Week 1 : p5 drawing fun

In Week 1 of ICM we drew simple geometric shapes and then tried to describe the commands for how to replicate those drawings.  An interesting exercise which I enjoyed, and got us thinking and writing like coders - something that's relatively new to me.  

 

Afterwards, in the p5.js Web Editor I replicated the drawing from class and added some color to the shapes and background.

 

Here's a link to that p5.js project : https://alpha.editor.p5js.org/projects/B1Upotmn

For the further drawing assignment, I drew an alien flanked by the sun and moon in front of some pretty groovy astral rays.   Nice to get better acquainted with fill coloring, and different shape types.   I did have some trouble when I tried to implement more complex shapes like bezier curves, and got frustrated at the amount of guess and check involved with trying to actualize an image I had in my head.  Also, would be nice to learn how to implement an array that could accomplish the series of lines (astral rays) so that I didn't have to copy paste and change the coordinates by hand.  

A link to that project:  https://alpha.editor.p5js.org/projects/SkZIYf_2

I did run into some trouble with the web editor crashing.  It seemed to happen when I began adding lots of individual lines (those pesky astral rays).  Another reason for pursuing a method to draw an array of lines with one piece of code.  I have to admit I don't enjoy the guess and check nature of drawing like this, it really makes me want to open Illustrator and save myself loads of time.  But as we pursue higher level projects I'm sure p5 will reveal itself to be a place to make much more layered and nuanced work.

- - - - - 

A project that I really liked that I believe could be made with p5.js was a color sensitivity game that was developed by a company called Xrite for the electronic band Hot Chip surround the release of their new album.  Unfortunately that site has been taken down, but it looked essentially like this: 

It very simply allowed the user to rearrange the tiles on each line so that the gradient was correctly moving from one color to another (the end tiles of each line were fixed).  The other functionality was that depending on which of the 4 lines of color gradient you were rearranging, it would alter the site's background color.  This provided nice contrast for the tiles you were focused on, and also kept the exercise of the game fluid in a way that reinforced the point that this was about your sensitivity to color.  You could take as long as you wanted, and in fact it was designed for you to get lost in the game and spend time on the site because in the background was the streaming audio for their pre-release new album.  Once you'd finished you could submit your answers and find out how you did.  There was another promo element here - if you perfected it, you could be entered to win tickets to an upcoming show.  

Aside from the marketing tie-in of this, it was a lovely and pleasing way to sink into an interactive game, and held my interest for roughly 15 minutes.  I could see trying to make similarly interactive p5 projects that involve moving shapes around a canvas, while audio is incorporated, and perhaps reacts to the shapes.

Another project I'd love to tackle in a serious way at ITP is the ambient music app.  Some of the apps coming from Brian Eno and his developer are quite lovely.  This one called "Air" seems like a project that could easily be made with p5.  It's nice to interact with, or to put in random autoplay mode and watch and listen as it creates a generative soundscape using the simple designed ingredients that Eno gives us.