Week 3: Buttons

Within this week's assignment to learn about p5 Buttons, I spent a lot of my time experimenting with color theory.  I'm inspired by Josef Albers, and I made some homage pieces to his seminal book the Interaction of Color.  

 

A very helpful session with Yining Shi illuminated how I could randomly generate an array of rectangles, with a constrained cohesive color palette, that would all function as buttons.  The reaction to any button press changes the background color to the inverse (or close to inverse, in some cases I changed the code to make for a different and pleasing contrast color).  The background color fade from one inverse choice to the next depending on where you click happens over a few seconds. It plays on Albers' work with color theory, contrast, and the ways that we can effectively and harmoniously arrange colors on a page..  

Links to the p5 sketches:

   

    I also played around with some Albers' inspired p5 sketches that didn't involve buttons, but did randomly generate fill colors that complement each other.

Week 2: Random and Transformational

Made my life a bit trickier than needed by wanting to use this Jitter script for my background.  But after much headbanging it mostly worked out. Thanks for the help Shawn and reference page! 

 

sketch 1::

In this sketch the mouse position controls the background color, and inverse to that controls the alien's face color and Jitter bug color.  The mouse position also controls the rotation of the alien's face.

 

sketch 2::

In this sketch, the mouse position controls the color of the alien's face, and inverse to that controls the color of the Jitter bugs and text color.  The text randomizes each time between these three options : "FRIEND," "LOVER", "ENEMY".

 

https://alpha.editor.p5js.org/projects/H1Vddl-p

 

https://alpha.editor.p5js.org/projects/HJLzBk-6

 

 

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.