Formula grid

[gwhitney]

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.
The following tasks have been completed:

• Implementation of mouseover (prototyped, needs to move near mouse)
• Diagram for hexagonal cells, and guidance for doing triangular arrays.
• Diagram for triangular cells
• Snapshots (we decided on an ulam spiral with the spiral emphasized and the mod-5 arithmetic triangle, and other polishing of documentation (including improving help popups in parameter tab) [decided to leave that for post alpha when we have more features for help facilities, like markdown or context-help "drawer")
• Selection and addition of featured specimens
• Updated tests, including unit tests for triangular and invTriangular
• Investigate phenomenon of specimen tests being erratic on the number of frames they display
• Investigate why aspect ratio does not update when dimensions change
• Make the placeholder text for dimensions and aspect parameters show the values actually being used, together with a phrase like '(from window size)' for dimensions and '(to fill window)' for aspect.

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

Resolves #527

[gwhitney]

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):
http://localhost:5173/?name=Formula%3A+n&viz=FormulaGrid&dimensions=200&speed=1024&fillFormula=%7Brectangle%3A+1+-+%28gcd%28x%2Cy%29-1%29%2Fx%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

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...).

[gwhitney]

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.

[gwhitney]

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.

[katestange]

When I preview other sequences, the full set of parameters doesn't seem to be applied in the thumbnails.

[katestange]

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.

[katestange]

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 TypeError: args[0].slice is not a function. If that doesn't immediately mean something to you, I'll try to track it down to a minimal example.

[katestange]

This error message seems in error:

[katestange]

This URL is quite laggy: http://localhost:5173/?name=Formula%3A+n&viz=FormulaGrid&aspect=0.999&backgroundColor=040404FF&speed=100&fillFormula=%7Bcircle%3A+chroma.scale%28%5B%27%23ffff6a%27%2C+%27%23000000%27%5D%29%0A++++.mode%28%27lch%27%29.colors%28600%29%5Bfloor%28601-600*%28gcd%28x%2Cy%29%2Fmax%28x%2Cy%29%29%29%5D%7D&inset=1&seq=Formula

I suspect it's because it has to compute the chroma scale afresh for each dot.

[katestange]

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?

[katestange]

I suspect it's because it has to compute the chroma scale afresh for each dot.

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.

[gwhitney]

With these settings, why is there background showing through?

Because r makes the hexagons and triangles regular, which is an aspect ratio of 1/√3. So centering squares in those tall thin rectangles leaves some background visible. If you want to fill the plane with squares, you should use an aspect ratio of 1.

[gwhitney]

This error message seems in error: [Cell aspect: 1]
Reproduced. Working on it. Don't push any commits ;-)

[gwhitney]

This error message seems in error: [Cell aspect: 1]
Reproduced. Working on it. Don't push any commits ;-)

OK, should be fixed if you pull.

[gwhitney]

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?

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 chroma('#ffff6a').mix('#000000', 1-gcd(x,y)/max(x,y), 'oklch') does essentially the same thing as what you wrote, and is shorter and doesn't involve an arbitrary constant 600, and is also super snappy. So I think the moral is don't make very long scales -- when you are doing that, probably you want a continuous mix. Oh and note I changed to mode oklch as that is recommended over lch in the chroma.js docs -- you can see the difference quite clearly if you switch that string back and forth between oklch and lch in this visualization.

[gwhitney]

This is borne out by a better 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.

[gwhitney]

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 TypeError: args[0].slice is not a function. If that doesn't immediately mean something to you, I'll try to track it down to a minimal example.

Yeah, I think I would need more than that to debug. I'm not seeing this phenomenon.

[gwhitney]

When I preview other sequences, the full set of parameters doesn't seem to be applied in the thumbnails.

I think this is #539 biting you. Let me know if you want me to fold a fix for that into this PR.

[gwhitney]

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.

[katestange]

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()".

[katestange]

It would be great to have a variable for the coordinates of the center of the canvas

[katestange]

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

[katestange]

Another favourite is Modular Multiplication Table: http://localhost:5173/?name=Modular+Multiplication+Table&viz=FormulaGrid&dimensions=100+100&aspect=0.999&backgroundColor=0B207CFF&speed=100&fillFormula=%7B+square%3A+chroma%28%27%233bbf7d%27%29.alpha%28abs%28%28x*y%29+%25+100-50%29%2F50%29+%7D&inset=1&seq=Formula&formula=n%5E2

[katestange]

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?

[katestange]

Here's a prime gap spiral: http://localhost:5173/?name=Prime+Gap+Spiral&viz=FormulaGrid&dimensions=100+100&aspect=0.999&fillOrder=1&pathFormula=spiral%28k%29&backgroundColor=FAFBFDFF&speed=100&fillFormula=%7B+square%3A+chroma%28%27%237c0980%27%29.alpha%28%28A%28n%2B1%29-A%28n%29%29%2F50%29+%7D&inset=1&seq=OEIS+A000040

[gwhitney]

Indeed, in my very first e2e run, one of the formulagrid filled more pixels than expected and one filled less. Everything else was fine. Will investigate.

[gwhitney]

@katestange, you have the alpha formula in the Modular Multiplication Table featured specimen to be abs((x*y) % 200-100)/100, but this seems to presuppose that the number of rows and columns is 200. But a nice thing to do is to experiment with different moduli by changing the number of rows and columns. So would it be better for the formula to be abs(2((x*y) % c) - c)/c ?

[gwhitney]

OK, I believe I tracked down an async race condition between onBeforeMount and onMounted in the Scope.vue view, and fixed it. The tests seem much more solid to me now. Give them a whirl on your end. If all seems well, then we just need to discuss the popups with the description of the formula parameters, and then I need to tweak the documentation just a little more, and update the CI snapshots, and we shoulld be ready for final review.

[gwhitney]

OK, I had found another bug in that when you changed the dimensions, the canvas wouldn't change shape even if the change resulted in a different requestedAspectRatio. That's fixed now, so we remain in exactly the state of my immediately preceding comment.

[katestange]

Another cool Ulam spiral: http://localhost:5050/?name=OEIS+A010051&viz=FormulaGrid&dimensions=100+100&aspect=1&fillOrder=1&pathFormula=spiral%28k%29&backgroundColor=000000FF&speed=100&fillFormula=%7B+rectangle%3A+chroma%28%27%233bbf7d%27%29.alpha%28abs%28%28%28isPrime%28k%2B1%29*8%2BisPrime%28k%2B2%29*7%2BisPrime%28k%2B3%29*6%2BisPrime%28k%2B4%29*5%2BisPrime%28k%2B5%29*4%2BisPrime%28k%2B6%29*3%2BisPrime%28k%2B7%29*2%2BisPrime%28k%2B8%29*1%29%29%29%2F20%29+%2C+circle%3A+chroma%28%27yellow%27%29.alpha%28a%29%2C+mouseover%3A+%5B%0A++++k%0A%5D%7D&inset=0.8&seq=OEIS+A010051

[katestange]

Another cool Ulam spiral: http://localhost:5050/?name=OEIS+A010051&viz=FormulaGrid&dimensions=100+100&aspect=1&fillOrder=1&pathFormula=spiral%28k%29&backgroundColor=000000FF&speed=100&fillFormula=%7B+rectangle%3A+chroma%28%27%233bbf7d%27%29.alpha%28abs%28%28%28isPrime%28k%2B1%29*8%2BisPrime%28k%2B2%29*7%2BisPrime%28k%2B3%29*6%2BisPrime%28k%2B4%29*5%2BisPrime%28k%2B5%29*4%2BisPrime%28k%2B6%29*3%2BisPrime%28k%2B7%29*2%2BisPrime%28k%2B8%29*1%29%29%29%2F20%29+%2C+circle%3A+chroma%28%27yellow%27%29.alpha%28a%29%2C+mouseover%3A+%5B%0A++++k%0A%5D%7D&inset=0.8&seq=OEIS+A010051

This is the one Aaron and Glen collaborated one: http://localhost:5173/?name=OEIS+A010051&viz=FormulaGrid&dimensions=70+70&aspect=1&fillOrder=1&pathFormula=spiral%28k%29&backgroundColor=000000FF&fillFormula=%7Brectangle%3A+chroma.lch%2832+%2B+7*sin%285%2F9*pi*sqrt%28k%29%29%2C+31%2C+100*sqrt%28k%29%29%2C+circle%3A+chroma.lch%2875%2C+81%2C+72%29.alpha%28a%29%7D&inset=0.8&seq=OEIS+A010051

I think it's fantastic, we should add it as a gallery specimen!

[katestange]

@katestange, you have the alpha formula in the Modular Multiplication Table featured specimen to be abs((x*y) % 200-100)/100, but this seems to presuppose that the number of rows and columns is 200. But a nice thing to do is to experiment with different moduli by changing the number of rows and columns. So would it be better for the formula to be abs(2((x*y) % c) - c)/c ?

Definitely!

[gwhitney]

I think it's fantastic, we should add it as a gallery specimen!

OK, I will definitely use it for the snapshot. As far as featured specimens go, I think we shouldn't have both the Ulam Divisors and this one -- I feel like they are cognitively too close. I think we may at some point want to have a "library" of specimens that are not all "Featured" and then I'd be happy to include this (as well as maybe a very plain, very zoomed-out Ulam spiral). For now I will just put it in the interesting specimens discussion.

[gwhitney]

OK, please check out the new placeholders for dimensions and aspect. It was a bit tricky because the placeholder needs to stay even when you have entered the number of rows but not the number of columns, so that you can see how many columns the visualizer ended up choosing. But I think I have it working OK now -- happy for any feedback. As far as I know, once we are settled on this I can update the CI snapshots and mark this as ready for review. Of course if you see anything else that needs improving, just let me know.

[katestange]

OK, please check out the new placeholders for dimensions and aspect. It was a bit tricky

Wow, this is great! It's really nice and intuitive.

[gwhitney]

OK, I am not at the moment aware of anything that needs to be done with respect to this PR and all tests are passing, so I have marked it ready for review. Of course, if anything comes up in the final review, I am happy to make further changes/fixes.

[katestange]

Small detail: "visualizer" isn't capitalized in the documentation page title (in contrast to other Visualizers). That's the only nitpick I have left!

[gwhitney]

OK, typo should be fixed.