P5

Computational Media / Week Five by Pippa Kelmenson

Assignment:

The idea this week is to explore re-organizing your code. It is 100% legitimate to turn in a version of a previous assignment where nothing changes for the end user, but the code has been restructured. You may, however, choose to try a new experiment from scratch. Aim to keep setup() and draw() as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):

  • Reorganize "groups of variables" into objects. | How to do this.

  • Break code out of setup() and draw() into functions.

  • Use a function to draw a complex design multiple times with different arguments.

  • If you are feeling ambitious, try embedding a function into an object.

Process:

Reflection:

Computational Media / Week Four by Pippa Kelmenson

Assignment:

Make something with a lot of repetition, more than you want to hand-code. You could take something you've already done where there was a lot of repetition in the code and see if you can re-write it using a loop so that instead of 28 lines of code that call rect(), you have 1 line of code calls rect() inside of a loop that goes around 28 times. How do you need to rework the way you position that rect() in order to make it work in a loop? Try creating an algorithmic design with simple parameters.

Process:

I first drew individual vines using my “vine” function, including a loop for two leaves on either side of each. I then was able to make each vine move along a vertical sine wave, as if blowing in a breeze. In the future, I hope that I can add various shades of green to the vines and leaves, as well as adjust the leaf position with my “steps” variable, and integrate an interactive element with the mouseIspressed function. I would love if I could use the mouse to repel the vines as a unit, as the mouse gets closer to each.

Reflection:

Although I’m happy with my final result, I hope to make several improvements and answer a few questions.

  • How can I start the leaves after y=0 (so that they don’t start directly at the top of the canvas)?

  • Is there a way that I can set the vines/leaves to random shades of green?

  • Do I need to make a loop for the vines and leaves separately? Or would I not be able to since my vines are individually drawn?

Computational Media / Week Two by Pippa Kelmenson

P5.js Screen Drawing

For the second iteration of my P5.js sketch, I included the following parameters:

  • One element controlled by the mouse.

  • One element that changes over time, independently of the mouse.

  • One element that is different every time you run the sketch.

Process:

Final Product

Final Product

Step 1

Step 3: Adding Random Tail, Debugging Automated Tongue

Step 2: Adding Mouse-Controlled Bone

Step 4

Reflections:

Although I found it relatively simple to figure out how to arrange a drawing to move in sync with the mouse, I struggled most with stopping, starting, and returning movement at a certain (x, y) point. By writing an “if” statement with the variable “tongue,” I was able to animate the arc of the mouth to a specific speed that started, stopped, and returned in a loop. I also created variables to control the tail randomly with each refresh of the sketch, and to separately move the bone with the mouse. When combined with "random()”, the tail became independent from the body, randomly refreshing its position each time the sketch is run, starting at “tailstart” and ending at “tailend”. My bone variable simply applied symmetrical properties to my bone drawing, so that my code was more legible and my experience working on my sketch simpler.

I had trouble converting radians to degrees as well as remembering what numbers in each variable do. I hope to make other aspects of my drawing move at different intervals as time progresses, and review the protocol for creating my own variables.

You can find my P5.js code here: https://editor.p5js.org/prk247/sketches/PSyn-o7fm.