• Gabriella Garcia

ICM Week 2: wtf (what the function)

Updated: Oct 11, 2018

I decided to build on last week's sketch because I wasn't satisfied with where I was on the learning curve and wanted to make sure I got all my basics down before I headed onto the next step. So I started by filling out the portrait to include hair (ellipses for main body and arcs for the bangs), neck (vertex shape), and body (rectangle with curved corners). I redefined the lips as a vertex object as I was hoping to learn, and changed the color of the nose using transparency to differentiate between the bridge and nostril areas. I also added blushing to the cheeks using two ellipses (same fill, same transparency, layered), and softened the eyes by playing with curveVertex point controls.

I experienced incredible relief finding that I could execute this polishing at an exponentially faster rate than it took me to get from zero to assignment one. I still hit pretty big speed bumps learning new material though, and the frustration is almost disabling. I'm realizing that I'm not native in this linear cause/effect thought process and have generally championed the grey zone of the anti-if/then binary. I'm truly grateful that I'm learning code from a poet, because I wouldn't (I didn't) understand it at all otherwise. Still, it's requiring a sort of rewired thinking and I'm trying to trust the process of letting it click into place with practice.

***tl;dr assignments below***

So this is what I got done over the weekend, thinking the last part would be a breeze (editor: https://editor.p5js.org/medusamachina/sketches/r1xRXGou7):

I was scheming ideas for animation during class and noted that it would be cool to make the lipstick change color once I figured out how to make the vertex object. I started by using random color selection for the stroke and frameRate, so the lips would change about 3x/second. I found that jolting and really wanted to figure out how to make more of a gradual shift, so I brought the question to the ICM help session with Seho & Mithru :prayer hands:. They introduced me to modulo commands, which I don't quite get so there's one question for the week.

For prompt three (change element every time the sketch is run) I wanted to play with the background to make it unexpectedly dynamic. I was aesthetically drawn to the heavily stroked ellipses exemplified in class. I used salmon pink to pop from my otherwise dark grey & black palette (much like my closet). Every time the sketch runs, the circles go to a random position. I really liked the way some people played with overlapping transparent objects so I went with it here. I like it but would like to add some more rules to the patterning of the ellipses. Upon googling this I of course found that Shiffman had it covered, and worked off his example.

Randomly-landing ellipses exposed my use of arc for cheek definition, so I updated that contouring to a CLOSE arc to reduce footprint. Still want to refine this, even though this won't be the method of illustration in the future. I have to note that drawing in shapes was unexpected and I didn't realize how much I'd like it! I think here I'd like to learn how to keep objects from entering specific coordinates.


I got it in my head that I wanted the mouse-control portion of the assignment to be a mousePressed/click/etc command when I saw Dephne's sketch at the help session (link when I see her blog). Every time you click her sketch, a shooting star of random size will launch across a twinkling starry night. It's quite lovely.

I wanted my background to strobe when clicked, figuring it would test me on a lot of different p5 capabilities. I'm very shaky on the concepts here, there's a lot of weird jerry-rigging with reference examples, class examples, and my own problem solving/writing in trying to figure this out, I'm definitely still following recipes here and it's still not cooking right, let's take a look (click and keep clicking):

here's the editor: https://editor.p5js.org/medusamachina/sketches/r1uNQ5lKQ You'll notice the background strobes when clicked, and then stops on a random greyscale (my arc cheek definition is well-displayed here [-__-]). I used last week's class example to figure out the Sin change and strobed the frameRate.

I then re-organized the code so the mouseIsPressed function was at the bottom with a repeat of the original background definition, theorizing that order would make the strobe happen, and then redraw the original backdrop when "else'd". Instead the following happened (click to reveal), which is actually quite beautiful...

...and the editor: https://editor.p5js.org/medusamachina/sketches/H1Xkm9etX

So that's where I'm at for the week. wtf.