ITP

Computational Media 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.

Computational Media by Pippa Kelmenson

How does computation apply to my interests?

Computation applies to my interest in creating a dialogue between sound and art through interactive projects. While working on my thesis at Bard College, I used Max/MSP to route audio signals to a six-channel speaker array installation. Although using the software familiarized me with “if, then” statements and the use of object systems, the visual aspect of the program made it more intuitive than the more standard coding of functions and arguments.

Using computation in my creative endeavors would allow me to simplify and expand upon my projects. I hope that, by learning various different coding languages, I can rely less on analog equipment to motorize electronics and produce dynamic audiovisual content. With digital functions, I would be able to automate processes that would be more difficult to execute in circuitry or fabrication. This way, I can implement creative coding into my mixed media sculptures and installations.

Projects I love:

43 prepared dc-motors, 31.5kg packing paper | 2013

Zimoun

Opera for a Small Room  | 2005  Janet Cardiff & George Bures Miller

Opera for a Small Room | 2005

Janet Cardiff & George Bures Miller

P5.js Screen Drawing

Rather than approach the assignment of creating a screen drawing from my imagination, I decided to attempt replicating a photo. At first, the logic of coding shapes along x- and y-axes seemed intuitive and logical, and I enjoyed discovering how things moved and changed with differently-valued inputs. I often referred to the P5.js reference guide, and found it helpful to apply various potential shapes to my screen drawing, editing them out later. I also found that labeling each grouping of shapes was useful in looking back and revising my code in P5.js.

Process:

Step 1

My Muse

My Muse

Step 2

Final Product

Reflections:

It wasn’t until I was forced to create my own lines and curves that I ran into some issues. When reviewing the reference guide, I was frustrated by the complications of rotating objects by radians and degrees, and would have preferred drawing my own shapes (rather than manipulating existing ones). I also ran into trouble trying to apply definition to my shapes—although I used stroke() and noStroke() with many elements of my drawing, deciphering what would be in the background and foreground proved difficult with shapes of the same color. Similarly, I found that moving groups of code defining separate segments of the drawing (i.e. face, eyes, body, legs, etc) would often cause other aspects of the drawing to be moved and disorganized. This happened particularly when arranging shapes in the foreground and background.

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