Investigation of a hinged tiling effect on Truchet tiling fractals...
big version. See here for small version.
may put up more Webgl for better
explanation at some point. Lots of control dots, which you can move around the
screen with the mouse, and sliders and buttons and so on for different effects.
WARNING: can be very slow to load. You can turn off the reaction diffusion
altogther for faster functioning.
Initial canvas size depends on your
window size, so reduce for potentially faster load time. Resizing once running
doesn't work very well.
Exact functioning is browser/computer dependent.
Some images I have from screen shots or video capture from running this are
here, but you might not get exactly the same results.
4 initial number of rows/cols of squares =
4 brightness =
1 shade1 =
64 shade2 =
1 mod multiplier for shade type 1 =
1 angle in bend
Screen size: 512
Currently I have screen size initialise as largest power of two that will fit in browser when it opens, so for smaller size on start up, you could resize your browser window and restart. )
Notes on controls
red dot controls choice of sequence of transformations,
indicated by path on the tree. You have to click on stop motion to be
able to move this with the mouse.
yellow dot also controls position in tree, but this jumps from end
of branch to end of branch, whereas red dot travels continuously.
Red dot is better for colouring.
pink dot controls Da and Db in RD;
blue dot controls F,K.
Gray Scott parameters.
Green dot controls shape of neighbourhood of any point; x coord radius of this neighbourhood.
From 1 to 10. If this is large, ie., green dot to the right, the program gets very slow.
y-coord controls number of sides of the neighbourhood polygon.
magenta dot controls colour. x coord is range of colour, y is center of colour; currently uniform
orange dot controls boundary RD conditions (concentrations) on imposed shape (tree or trouchet)
cyan dot controls colour max/min (controls range of colour)
Bright green: width of path; x is width of containing path, y is
width of part containing RD
shade 1 and 2 only effect path when shade RD curve is turned on,
to try to get nice shading on curve
The point of the shear button is to transform so the
choice of alternating operations gives a curve
which fills a square
The 01010101 button makes the binary path in the
tree correspond to an alternating sequence of choices.
This gives a curve enclosed in a diamond shaped area,
or square if you shear. As well as the alternating path you
can also get the other extremes from this button.
Because it goes to these paths instantly rather than smoothly, the RD will fill several paths, so if you want to only fill one, you have to clear the RD, and then reseed with the mouse.
You can also use the yellow dot on the screen to achieve
The colouring is either by reaction diffusion or
a simple fill, which is currently rainbow effect,
but probably will add proper fill sometime.
The white dot's x position determines intended fill
is also shown on background of screen; the region might
not actually come out that colour though... Sometimes it works perfectly and sometimes not, don't know why.
If you switch to outline only, you will probably need to
move the bright green dot down so that the fill
area is big
enough, or the fill colour will vanish.
The magenta dot controls the range of colours
possible with the rainbow effect, so if you are not
able to acheive a wide range of colours, move the magenta
The choice of reaction diffusion patterns is very limited
compared with the vast range of possibilties.
Mouse erase is fun, but maybe not very useful, since you have to chase away all the RD in many cases, or it will repopulate, depending on parameters.
If you are in reaction diffusion colouring mode, generally the mouse down will
produde a colouring effect.
Sometimes you may have to hold it down and drag a little, or sometimes the effect
is only apparent on mouse release.
lighter pink dot effects shading, and a kind of colour inversion, both
of the reaction diffusion colouring only.
If you turn on the noise type, the first thing you get is
level of iteration controlled by Perlin noise,
the other two are not actually noise at all; one determines level
by distance from center, and the other from distance from bottom.
For these to actually show something different from usual, you have to make
N bigger than the default 4, e.g., try 8, and also move the red and yellow
dots on the screen to adjust the range of the noise.
The shade types just shade the path a bit, except shade type 5 is not
a shade type at all, but puts several itterations of the curve on top
of each other, which produces a fractal effect.
magenta dot controls colour
in this case. I don't use the fill in this case, reaction diffusion or
otherwise. width is x val of bright green dot. Turn off motion to control
max level of iteration by red dot, and increase N and change number of rows
and columns possibly. White dot x coord controls number of dots shown
simultaneously. white dot y controls brightness; needed when in fill in mode, since I currently have colours adding in this case, so it gets bright.
orange dot y coord for bluring round edges in these cases.
You can either just colour in the trouchet path, in which case either gradual
shading, or else a border along each side of the path, or you can "fill in",
which means take the trouchet path as a single line, which divides space into
a two colourable region, and then colour one in with the RD. This is the
button that starts of saying "colour outline only"
fill in the space between
squares background shows the underlying square hinged tiling structure.
The colours can be altered by moving the white/gray dot on the canvas.
Notes on programs
In progress! Needs work. Long to do list.
Email me any comments/suggestions etc hverrill
gmail dot com. Or find me on instagram, havcircles or havtofold
The reaction diffusion part of this started from
Robin Houston’s Block ed597847175cf692ecce.
I also use some set up Webgl files library files from
Mouse controls some parameters.
I have used the Gray Scott model for the reaction diffusion, which I have
copied from Robin Houston, as mentioned above. I don't know a great
deal about reaction diffusion. There are lots of good pages, e.g.,