programming

ICM - Week 4 : Reorganizing a code

This week our assignment is to explore “reorganizing code” and I am trying to clean up my previous assignment, Crazy Circles.

Point A - crazy circles - reorganized point A.

I duplicated my original code and started working out separating the handles into separate functions.

Point B - https://editor.p5js.org/gdor/sketches/H1E-bNWqm

Finalizing both handles

Final Reorganization - https://editor.p5js.org/gdor/sketches/HkSw54Z9m

Both handles are each their own separate functions within their own separate files. They are then called in the draw loop.

ICM Week 4

This week we were to work with rule-based animation, motion and interaction with out p5 sketches. Along with this we were to work in pairs/groups, and figure out a way to collaborate on a sketch; by either working together on the beginning and separating, joining separate sketches together, etc.

I had been working along with the Coding Train videos and was inspired by what Shiffman made in Coding Train 4.2.

My sketch for 4.2: https://editor.p5js.org/gdor/sketches/S1dml9LFX.

Once I finished the video I played with the size of the ellipses and made them change with the mouseX+Y:

Edited 4.2: https://editor.p5js.org/gdor/sketches/HJMcRFLK7

After making that, I went back and watched the Boolean Variables video (3.4) to review and was inspired to make a button that would start the sketch I made from 4.2.

Suzanne and I met after I made this sketch (crazy circles 1.1) for fun, and we spoke on how to add more interaction to it, specifically a slider(s). We worked out that we would make one slider to affect the width of the appearing/disappearing circles, and another slider to affect the height. I decided to work on the horizontal slider, Suzanne would work on the left, and we would see how each of our sketches differed.

Mockup

Mockup

Versions

Gilad’s Final Version



ICM - p5 Self Portrait

For our first assignment in Intro to Computational Media (ICM), we were assigned to make a self portrait using the p5.js editor.

My self portrait’s code.

Immediately after the class I started to create the self portrait. I mistakenly did not follow the rules of the homework, which was to watch Daniel Shiffman’s Coding Train 1-7. Instead I just kept on going with working on my self portrait, by means of trial and error and going back to the p5 reference.

icm_portrait1.png

I decided the way I wanted to portray myself was with only my face. The first base for a self portrait began as a cube, with two smaller cubes for my glasses. I then added eyes inside the glasses to make it a little clearer for myself as a base to start with.

As I built this, I kept on thinking about Picasso and cubism. I thought of ways I could interpret the different levels and features of my face with geometric shapes in a more abstract direction than I was already going down.

icm_portrait2.png

The next goal I had was to create the effect of a mouth, teeth, and jaw with as few shapes as possible. I decided to use two quads, one on top of the other to form the teeth below and the jaw on the layer above it.

My main issue with this portion was having the angle of teeth look normal underneath the jaw. This required lot of playing with different coordinates for the 3+4 corners.

Working with different ways of portraying my face, I played with sizing my glasses differently.

I moved on to my nose next, and thought of how I could play with it’s presentation. I went through each of the different shapes in the reference and came across bezier(). I’m still not totally sure how exactly each of the coordinates work with regards to how I got my line to curve the way that it did.

icm_portrait3.png
gilad in p5. 2018.

gilad in p5. 2018.

My largest regret with making this piece is not knowing about push() + pop() before starting the portrait. I was doing the math for the entire thing for each of the coordinates relative to their space in the canvas ex. Instead of starting the main quad for the head at (0,0) it starts at (50,50).

I will absolutely watch The Coding Train videos before each next assignment.