IDStudio, VizTech2: Compositions, and fireworks

I’ve noticed that I tend to forget to post about my programming classes. I think it’s because we’re often doing things that seem pretty basic, or that don’t ever quite feel finished. But it’s still good to record progress, so here are a few things that I’ve been coding over the past couple of weeks.

The first homework assignment for my IDStudio class (with Noah Passel) was to create 4 compositions: a traditional “hello world,” and then three compositions of three circles, made in any way we chose, but we had to pick three different methods for getting them on the screen. I used the SVG canvas for the first circle composition, then d3, and then p5.js.

PS-01-a

PS-01-b

PS-01-c

PS-01-d

This week, the assignment was to produce compositions using only the HTML canvas and javascript. The first composition had to have 10 n-gons, the second 100 quadrilaterals, and the third 1000 lines. I took this an opportunity to play with color gradients and geometry in different ways.

a

b

c

We also had to pick an artist from a list, and create one composition inspired by their work. I chose Vera Molnar, and selected this piece as my inspiration (image from here):

molnar_desordres

A few nested for loops and a lot of Math.randoms later, I had this:

e

The fun thing about this one is that it updates every time you refresh, so you get a new composition each time.

We’ve also been working on the basics in my Processing/p5.js class with Pedro Cruz. We’re loosely following the outline of the Nature of Code by Daniel Shiffman, and I’ve been playing around with converting his text examples to p5.js on the side.

So far, we’ve learned to build particle systems and give them properties, and we’re using vector math to draw. We’ve written an update function that takes a position and velocity vector and draws the particles to the screen. Adding in some mouse interaction, a sound file, and some auto-generating code, we now have a pretty nice collection of fireworks:

week3fireworks

I worked through the object polymorphism and attractors sections of the Nature of Code book this week, and have created a new kind of particle that spirals out from the center in concentric rings. Those aren’t particularly pretty yet, but it was good to figure out how to set up a polymorphic class system. Since Javascript doesn’t have classes, that turned out to be a little harder to convert from Processing syntax to p5.js, but I got it working in the end.

I do intend to get some of these running on gh-pages, but right now that’s a fully manual process and I haven’t gotten to it yet. The code is up, in my Processing and IDV2 repositories, though.