Computer-Aided Art

  • 0

Computer-Aided Art

Category : Uncategorized

Yesterday at the Coder School a student and I were looking for inspiration; a Processing sketch to recreate to test our Python skills. There’s a Dutch artist named Saskia Freeke who posts a new Processing sketch every day on Twitter, and yesterday her sketch was a doozy:

I tell my students the ancient Nasrudin joke I originally read in a book by Idries Shah:

Nasrudin was asked to describe his house. He brought the man a brick and said, “It’s just a collection of these.”

My student and I tried to break down the sketch into its simplest component(s), and it’s just a collection of squares. He easily drew a square in Processing.

Next, can we make the square rotate back and forth and get bigger and smaller? Those are both behaviors that can be modeled using sines and cosines. First we needed a bunch of squares, meaning we used a loop. In Python that’s

for i in range(20):

where i is an iterator, and it takes a different value from 0 to 19 in this case. So every square will have its own i. We made the angle change with the time variable t like this:

#angle of rotation
angle = sin(t-i)

That made each square in a column rotate a little differently from the one next to it:

After that we put in a line for making the size oscillate:

#size of each square
sz = 40+20*sin(t-i/4)

Another application of the “sin(t-i)” trick. But the output of the sine function is between -1 and 1. With the “40 + 20*sin…” part, the size of the squares would oscillate between 20 and 60 pixels. So now the size oscillates:

Since every square has its own i, we can easily use that to make each square its own color. My life changed the day I learned to use HSB values. Every color is a combination of three numbers: Hue, Saturation and Brightness. Only the first number, Hue, needs to change for our purposes, so I used this code to change the color for every square:

#color of the outline

I had to tweak the code until I settled on the “10” which would make a nice rainbow effect, my trademark. Finally we can draw the rectangle. This line means, “Draw a rectangle in the middle of the screen (0,0) with a length and width of whatever value the “sz” variable has.”


I posted it on Twitter, and guess who gave us a favorable comment? See below the sketch!

Procedural Art makes friends over the Internet!


Leave a Reply