William Kolomyjec’s work is again reminiscent of some of the old school generative works, focusing on simple shapes, tiling and recursion.
Today we’re going to replicate a piece of his called Hypnotic Squares.
The only HTML we have on the page is a <canvas>
element at 320×320 pixels.
As usual, here is our initial setup. Using window.devicePixelRatio
to scale the canvas on retina screens, and setting our canvas size.


Now, to create this piece we’re going to need to set a few variables, and then we will create our draw function. The goal will be to create a function that uses recursion
to draw squares inside itself, until they reach a certain minimum size.
If you don’t know much about recursion, that’s totally ok! I will explain it as we go through.


The steps
in the draw function, is how many times our square will recurse inwards. It’s a fixed variable now, but we will be able to make it a little bit more random later.
The finalSize
is the smallest square we want to draw, when our squares start to get this small, we’ll stop drawing.
The startSteps
will help us calculate a smaller and smaller square as we recurse.
Let’s make our draw
function draw. We’ll start with just a plain square.


Now we have a single square, its time for some recursion. This means that the draw function will be calling itself over and over, until we reach a certain condition, this condition is pretty important, otherwise the loop will never end. We will use steps
and count down.


Woohoo, recursion! So let me explain whats going on above.
newSize
is being calculated based on how many steps our square has remaining.newX
& newY
is being calculated based on making sure the new square fits inside the previous one.draw
function is steps  1
which means we step closer and closer to 0.So you can see now if we change the startSteps
variable, to a few differnt variations, we’ll have different degrees of recursion.


or


We can see that randomizing this value will give us different outputs, but lets add a little more to it first. You can see the two variables xMovement
and yMovement
… we want to use these variables to “tilt” the squares in a certain direction.
First, I’ll update the draw call, to represent this, with xMovement
and yMovement
both being 1. We will want this to tilt the square to the bottom right.


And here’s what we will do, to calculate this.


This looks a little complex… we’re calculating how big each step is going to be (difference between the bigger and smaller square sizes) and then dividing it by how many steps are left. The 2 is to make sure that the new square never quite touches the line of the previous one.
Now, if we change around our draw function, you’ll be able to see how it moves around and renders in different ways.








Ok, now that we have our draw function down, we’re going to do something we did in our very first tiled lines tutorial… and that is, tile!
Firstly some variables, about how often we will tile our squares, and a little offset to center the square a little more… we will make the final size smaller, and calculate tileStep
to be the width of our canvas
minus the offset
divided by how many squares we want (7
). And then, a final array of all the possible directions we can go in 1, 0 & 1


Yep, it looks broken, because we’re now going to use these variables to draw the tiles across our screen.


Now we’re really set up to play. We can add a random amount of steps.


And some random directions!


And there we have it! Hypnotic Squares. This is a great example of some beautiful use of recursion, as well as the kind of art piece that can easily be expanded with some color, especially on a slightly larger canvas.