Inspiration

Earlier this year, I did a series of mini, incy, teeny tiny projects called Random Sketches with the goal of learning Canvas. In my opinion, Canvas has more differences than similarities from D3.js, but a hybrid of the two works very well when it comes to visualizing many distinct data points. Wtih this knowledge of Canvas, I could now do projects that focus purely on graphics without thinking about how to fit it to the data.

One design-by-coding project I had in mind for a really long time was creating a kaleidoscope. I remember having one as a kid (and accidentally losing it really quickly), and it was really cool to spin it to get different images. If I didn’t like one of them, I simply had to spin it again to get a new picture. With that experience in mind, I wanted to incorporate some sort of “spin” feature to shake up the graphic I was going to make to mimic an actual kaleidoscope.

I also did some research to see if anyone else had done the same project, and it turns out that this blog made by Luke describes in detail how he created a very nice Canvas kaleidoscope. I aimed to make mine a variation, which would have just radial symmetry and use geometric shapes.

Coding

Since I was not going to use data, I decided to leave it up to the user to create the initial kaleidoscope image. I had to look up a lot of CSS and event listeners to design a toolbar with different selections (for shape, size, color, etc.). This part was honestly not that enjoyable for me because I have always taken filters and buttons for granted in my typical drag-and-drop dashboard environment. There was so much code needed to make something not look ugly, be accessible (e.g. using the tab key instead of mouse), and be responsive. With CSS not doing what you expect it to do, it’s frustrating to debug because there are no error logs.

For the javascript part, I looked up the basic materials of an actual kaleidoscope and structured my code into a Kaleidoscope class and a Paper class (I guess Paper is a subcomponent of Kaleidoscope, but there’s not really a concept like that in plain ol' javascript). Below is my general code structure involving just the 2 classes, no frills.

class Kaleidoscope {
  constructor() {
    this.paperContents = [];  // Start with empty tube
    ...
  }

  addNewPaper() {
    this.paperContents.push(new Paper());  // Add 1 paper into the tube
  }
}

class Paper {
  constructor () {
    // Size, shape, position, etc.
  }
}

Two interesting graphics-related topics I encountered were creating a clipping mask and patterned fill. For graphics editing, a clipping mask is used when I want cut off an image based on the shape of a separate vector. Canvas has a context method clip to apply a clip to a given vector. It also has a way to revert it using save and restore so that it does not interfere with any future shapes.

Next, I learned that it IS possible for Canvas to do patterned fills by creating a dummy canvas to draw the pattern and assign that as the fill. However, I realized that this is computationally expensive and should just be used for non-animated things. If I use patterned fills in the final kaleidoscope, which honestly makes it so much better, the animation starts to slow down before even 10 objects.

Some final artwork is below. Click here to channel your inner Picasso!