Formula grid #542
Formula grid #542
Conversation
gwhitney
added
the
visualizer
|
OK, I added a prototype of mouseover. You can see it in action in this monochrome version of the gcd(x,y) plot (not saying it's the best version of such a plot, by any means): However, I definitely don't think it is done. Right now it just overlays the mouseover text at the top right of the canvas, in the default font and color. There's no effort to set it off in a box and no styling. I could definitely use feedback/ideas on what the mouseover text should look like and where it should appear. Should it follow some offset from the mouse like FactorHistogram? Should it always be in the top right corner? Or should it actually be just above the canvas somewhere so it shows up in the specimen bar? Or some other location option? (Or heavens forfend, should its location be configurable in some way? We should not indulge in configurability always for configurability's sake...) Personally, I would be happy with it styled in some way (maybe an outlined box with an opaque or semitransparent white or pastel-tinted background, maybe with the same drop shadows as our help boxes) and always appearing in the same place (like the top right where it is now, or any fixed location folks think would be better...). |
|
So I think this PR is now at the stage that it would be best for me to get some feedback before proceeding further, even though it is still a draft. |
|
In particular @katestange if you could try translating some of your specimens from #526 into this FormulaGrid and see how that goes, that would be really great. |
|
When I preview other sequences, the full set of parameters doesn't seem to be applied in the thumbnails. |
|
With these settings, why is there background showing through? The aspect ratio of the cells is 'r' for regular, and the "inset" for the squares is '1' to fill the short side. I put one number in "dimensions" to specify only rows. |
|
This particular error may be difficult to isolate, since it presumably has to do with the pile of sequences I have in my sequence chooser, but when I open the sequence chooser, I get |
|
This error message seems in error: |
|
I suspect it's because it has to compute the chroma scale afresh for each dot. |
Maybe one possibility is to have more inbuilt chroma scales for people to choose from that are pre-computed? |
This is borne out by a better formula: http://localhost:5173/?name=Formula%3A+n&viz=FormulaGrid&aspect=0.999&backgroundColor=040404FF&speed=100&fillFormula=%7Bcircle%3A+chroma.mix%28%27%23ffff6a%27%2C+%27%23000000%27%2C+1-gcd%28x%2Cy%29%2Fmax%28x%2Cy%29%2C+%27hsl%27%29%7D&inset=1&seq=Formula That's a variation on my favourite "gcd" self-similarity. |
Because |
|
OK, should be fixed if you pull. |
I observe the same thing, and if I replace the scale with "rainbow" it's super snappy. So I agree, recomputing the scale is expensive. But formula |
Ah yes, you and I got to the same place; your comment just hadn't refreshed into my view of this page when I was working on the "laggy" comment. So unless you think otherwise, there doesn't seem to be any action item here. |
Yeah, I think I would need more than that to debug. I'm not seeing this phenomenon. |
I think this is #539 biting you. Let me know if you want me to fold a fix for that into this PR. |
|
Oh, I added a to-do item at the top about featured specimens - @katestange feel free to push a commit with some you like whenever the feeling moves you. |
|
Would it be ok if I push a few new functions for colours? There's things I'm trying to do simply/frequently that it would be great to have shortcuts for. Like "rainbow()". |
|
It would be great to have a variable for the coordinates of the center of the canvas |
|
For example, here's Gaussian split prime soup: (which could use centre coordinates): http://localhost:5173/?name=Gaussian+Split+Prime+Soup&viz=FormulaGrid&dimensions=100&aspect=0.999&backgroundColor=822F4FFF&speed=100&fillFormula=%7B+circle%3A+chroma%28%27%235db374%27%29.alpha%280.8*isPrime%28%28x-100%29%5E2%2B%28y-50%29%5E2%29%29+%7D&inset=1&seq=Formula |
|
Because there's a little question mark next to the little drag handle to grow the formula box, it's hard to get with the mouse. Maybe the formula box entire lower bar should drag? |
In particular, it could be at the top right instead of the bottom right, and I think that would actually make more sense. it seems weird to me that the help icon moves as you drag to resize the input box. |
Should be fixed now. |
That seems reasonable. |
Just so you know you can simplify this:
|
OK, I will change to that when I get the chance, probably not tonight. |
* Put the help-info icon for a field near its top rather than its
bottom so that it will not move as you resize a formula input area
* Pop the resulting help info up above all other elements so the whole
thing is readable
* Validate and restore color codes correctly
* At load time and whenever there is input, auto-grow formula text areas
if necessary to show the entire formula
OK, I have changed this and taken care of #539 because it kept being a pain. I also changed the formula text area to auto-grow if needed to show the whole formula, when the page is loaded and any time you type anything. Let me know what you think of that change. Also, I'd love to get feedback on the behavior when you add a |
Cool! If you change denominator to y, the text is not very readable... it may need a background rectangle of white. Also, I would move it slightly left to avoid it hitting up against the right end of the canvas. Here's the denominator y example to see what I mean: "http://localhost:5173/?name=Formula%3A+n&viz=FormulaGrid&dimensions=200&speed=1024&fillFormula=%7Brectangle%3A+1+-+%28gcd%28x%2Cy%29-1%29%2Fy%2C%0A+mouseover%3A+%5B%0A++++%27gcd%28%27%2C+x%2C+%27%2C+%27%2C+y%2C+%27%29+%3D+%27%2C+gcd%28x%2Cy%29%0A%5D%7D&seq=Formula" |
And also, if you'd like to be really fancy, the mouseover text could "hop" out of the way (maybe to the opposite corner) when your mouse goes over there, so you have some way to access the grid pixels covered by the text. |
This is great! |
|
I don't know whether you want to go here or not... but the inset could be a formula. |
|
Unusual behaviour: Microsoft edge has totally whacky tooltip behaviour on the parameter input cells. Depending on how the panel is scrolled up or down by the main scrollbar, some tooltips don't appear, or appear above the parameter pane entirely. (similar issues in chrome) |
Oh I think I know what's happening! The tooltips are appearing behind the parameter pane instead of on top. |
src/visualizers/FormulaGrid.ts
Outdated
| /** md | ||
| - Inset: The side length of the 'square' shape and/or diameter of the 'circle' | ||
| shape, as a multiple of the shorter dimension of a cell. Must be positive, | ||
| but allowed to be greater than one, in which case the shapes may overlap. |
There was a problem hiding this comment.
what if it's a triangle or hexagon?
There was a problem hiding this comment.
The triangles and hexagons are fixed sizes that singly and doubly cover the plane, respectively.
There was a problem hiding this comment.
Oh, ok. Is it worth mentioning it is expected to have no effect on those?
| and `y` giving the coordinates. The formula may use any of the variables | ||
| listed in the description above, where the inputs _x_, _y_, and _s_ are | ||
| calculated as if the fill order were the default 'By_Rows'. This latter | ||
| convention is useful if you want to tweak the default fill order. |
There was a problem hiding this comment.
I think an example would help here, if just to show that square brackets are needed on an ordered pair.
There was a problem hiding this comment.
OK, will fill in an example of each format (for doing vertical instead of horizontal stripes).
|
|
||
| On the other hand, the fill formula may instead return a plain object with keys | ||
| drawn from the list of supported shapes: | ||
|
|
There was a problem hiding this comment.
This (fill formula) is sufficiently complicated that some examples should maybe be included to show the formatting for "objects" and "keys" for those not familiar. It helped me a lot to see an example with a shape and a mouseover.
There was a problem hiding this comment.
ok, putting in three examples: one with just a color, one with rectangle and square together, and one with hexagon and mouseover.
| + 'keys are rectangle, square, ellipse, circle, hexagon, ' | ||
| + 'triangle, text, or mouseover; the values for the last two ' | ||
| + '"shapes" will be (converted to) strings, not colors. ' | ||
| + formulaDescription, |
There was a problem hiding this comment.
I'm not sure how to improve this pop up description, but the use of this cell is very complicated and a tooltip can't possibly do it justice. Maybe it should just say something like "A formula giving the color of the cell, or a more complicated formula describing shapes, text and mouseover information for the cell." Because they need to visit the docs, maybe the only goal here is to describe the function, not the format. Perhaps this comment could even apply to some of the other tooltips also.
There was a problem hiding this comment.
Deferring this for in-person conversation.
Is this what you meant (if you pull)? Also, it is opaque, bordered, and shadowed now, so I think it stands out pretty well wherever it is. |
Your wish is my code. Here's a version of your favorite gcd grid, but with the brighter circles smaller in diameter so that the overall intensity is relatively constant, just more concentrated at the high-gcd places: (not saying this is any better than the one with constant-size dots; mostly just a demo of the inset formula. |
OK, edge should be fixed now. Thanks for checking! |
|
OK, got most of the review comments, except some I explicitly deferred either because I can't get to them tonight or because I think a voice/video conversation would be helpful. |
Very cool! Love it. |
Ok, it's totally legible now! And matches the decor. But now that I see it jumping around, I wonder why not just put it near the mouse cursor (where your eyes are looking anyway)? More like a typical mouseover popup. |
Agree, looking good. |
BTW, this was because I didn't read the instructions carefully. So all is well. |
OK, I added a to-do to put the popup by the mouse cursor. My plan is to put it below and to the right of the cursor, unless that would move it off of the canvas, in which case it will rotate around the pointer as you approach the bottom or the right edge of the canvas. If that doesn't sound good, let me know. |
By submitting this PR, I am indicating to the Numberscope maintainers that I have read and understood the contributing guidelines and that this PR follows those guidelines to the best of my knowledge. I have also read the pull request checklist and followed the instructions therein.
Introduces the FormulaGrid Visualizer, a formula-based common generalization of Grid and SelfSimilarity.
This is a work in progress. Still needs:
However, it's definitely not too early to provide feedback.
Here's a classic view of the arithmetic triangle:
http://localhost:5173/?name=OEIS+A007318&viz=FormulaGrid&aspect=r&fillOrder=2&pathFormula=%5Bceil%28c%2F2%29+-+invTriangular%28k-1%29+%2B+2*%28k+-+triangular%28invTriangular%28k-1%29%29+-+1%29%2CinvTriangular%28k-1%29+%2B+1%5D&fillFormula=%7Bhexagon%3A+rainbow%2872a%29%7D&seq=OEIS+A007318