Modular arithmetic and carpets using webR
I’m not sure what’s more exciting, running R directly in a browser or generating rug designs with a few lines of code.
R in the browser!
A big part of the motivation for this post was to test out webR and its Quarto integration. Running R code directly in the browser enables all kinds of possibilities for dynamic art. We can look at the effects of randomness and play with parameters without relying on a local R installation.
Even more awesome, James J Balamuta has developed a WebR Quarto extension, (https://github.com/coatless/quarto-webr) which allows regular code blocks to be edited and rerun by anyone. This is how I have generated the interactive code blocks in this post.
Modular arithmetic and tile patterns
From a maths-and-art point of view, in this post I’ll demonstrate the use of modular arithmetic to generate interesting symmetric patterns, building up to the randomised Persian rug style pattern generator.
The code block below calculates the result of the function \(z= x^2+y^2 \bmod{11}\) for each \(x\) and \(y\) from -16 to 16, and then plots the resulting matrix of \(z\) values as an image.
Hit “Run code” above the block to see the output!
Cool pattern, isn’t it? And probably unexpected, if you think about the shape that you’d expect a function based on \(x^2 + y^2\) to take.
Try tweaking the formula by changing the code in the block above and re-running to see what happens.
Some maths
So why does \(x^2 + y^2 \bmod{11}\) make a square repeating pattern like this?
For a function \(f\) to repeat with period \(N\), it must have the property that \(f(x)=f(x+N)\).
It’s fairly easy to show this is the case for \(f(x)=x^2 \bmod{N}\), since \((x+N)^2 = x^2 + 2Nx + N^2\), and both \(2Nx\) and \(N^2\) are congruent with \(0 \bmod{N}\).
Similarly, the pattern will be symmetric around \(N\) if \(f(N-x)=f(x)\), which is similarly also to demonstrate in this case. So \(x^2 \bmod{N}\) has period N and is symmetric.
Below I’ve shown the value of \(f(x)=x^2 \bmod{N}\), with the point colour showing how this might translate to a colour scheme.
So, since \(f(x,y) = x^2 \bmod{N}\) repeats in this way, I think its fairly clear that \(f(x,y) = x^2 + y^2 \bmod{N}\) must represent a regular symmetric tile pattern, because for each value of \(y\) we are just adding a constant (that also repeats), and because \(f(x,y)=f(y,x)\).
More complex patterns
We can build on this to create some more complex patterns, and experiment with how the result changes with the formula.
Here I’ve introduced a second modulus operation to the formula (see line 5 below). I’ve overlaid two different layers for each pattern, each with a slightly different formula. I’ve experimented with a few variations, and found that order four polynomials seem to work well. NA is used as a colour to leave some areas clear and to let the pattern underneath show through in places. The first modulus is 28 in each case, the only parameter that changes between the tiles here is the second modulus which varies from 5 to 16, this has a big effect on the pattern.
Again, you can modify the code and re-reun to see what happens!
Making randomised carpets
Next we use the same idea to create random ‘carpets’. A new seed is created every time you hit ‘run’ and is printed in case you find a pattern that you’d like to reproduce.
The second modulus is varied as we move away from the centre of the image, to vary the pattern across the image. The aspect ratio is changed to 2/3. For colours, two random palettes are sampled and shuffled, which I’ve found gives a nice blend of cohesion and contrast.
Again, try changing any of the parameters or the functions to see what happens.
Remarks
WebR is really cool, and its integration with Quarto makes it extremely simple to get started, just by changing our existing R code chunks into webR chunks. It’s really great to be able to show random outputs within these posts, and to allow readers to change things as they go.
I was always a bit dissatisfied with Shiny for arty stuff (I’m sure it is great for dashboards) and I think webR is probably a better direction for building accessible art tools, as well as statistics education.
There’s a whole lot more that can be done with modular arithmetic. I originally started working with it when I was playing with bitwise operators, but that’s another post entirely.
Finally, since all the art in this post is generated in your browser and might vary with different versions of webR, I’m including a code chunk to get the sessionInfo, which you should take note of if you want to recreate something that you make here, particularly if it involves random numbers!