I’ve been taking a Sketching with Code course with Noah Paessel this semester. Most of the course content is pretty basic, since most people in the class haven’t done any coding at all before. But I’ve also found the open-ended assignments to be a great opportunity to stretch in different directions with my code.
We started out the semester playing with CSS and HTML styling, and I learned about CSS animations and using flexbox for alignment. I also played around with random numbers We played a bit with typography, and did some simple graphic design exercises in composition.
Then, we did some computational art, inspired by Sol Lewitt, and I used this as my chance to experiment with animation frames. (See the live versions here.)
In the next assignment, I built a basic random walker, and used it to make a series of connected lines inside the bounds of the canvas.
Then I started playing around with accepting user input, and updating my code sketches to match. The first was an animated broken grid with more random numbers, where the user can change the frame rate.
And then came what I think might be my favorite piece so far this semester. We needed to make a rules sketch that would draw something based on a simple set of rules that we defined. I chose to make mine fully parametrized, so that the user could set values for each of the values that determine the drawing.
I continued with the input theme the next week for our optical illusions piece, kind of the visual opposite of the rules sketch, as loud as the previous one is quiet. For this illusion, use of two competing colors cause the image to spin. It was also a fun exercise in deciphering circle packing geometry; the construction is really quite simple, if you can stop it from spinning long enough to count! I did use a library called jscolor to allow the user to change the color values and see how that affects the speed of the rotation.
Last week was a performative art assignment, where we needed to use mouse input to allow the user to interact with the drawing. My first sketch was a stream of particles, falling like rain. When the user mouses over the canvas, the particles swirl around the mouse, creating a vortex.
I tried a bunch of different things with this animation, but didn’t quite get it to where I wanted to be. I was pretty happy with the rain in the background, but still don’t quite love how the mouse interaction works. I think maybe a more gradual application of gravity would work better here.
One of the reasons that I tried the particle system was that I was thinking about using particles for a different project in another class. Even if this assignment wasn’t particularly successful, the exercise gave me a chance to develop a particle system and give it some behaviors, which fed into my ideas for the other designs.
The second performative art piece turned out a lot better. This one is another take on falling rain, except this time it uses the mouse motion to generate ripples. I had planned to add music to accompany the bigger drops, but didn’t find midi libraries simple to use. Still, I think it’s really relaxing to play with this piece, and am very happy with how it turned out. There are lots of invisible details in there that make it feel realistic, and I just enjoy watching it go.
In an updated version, I think I would add an auto-play using a random number generator to make the piece more interesting before the user interacts.
This week, our task was to create a simulation, of anything, using code. Inspired partly by the botanical feel of my earlier rules sketch and partly by my walk home from the train the other day, I thought I’d try simulating the growth of trees. I found a great book on the Algorithmic Beauty of Plants that I can’t wait to dig into when the semester is over; that kind of programming is really appealing to me.
I based the final version on a simple 2-way branching system, and again exposed all the relevant parameters for the user to control. It’s really fun to adjust the branching point and branching angle, and see what happens to the tree. I also added a randomness factor, which the user can scale to include as much or as little randomness as they like. With a lot of randomness added in, the branching becomes nicely asymmetric, and even begins to resemble a real tree.