Week 3: Collab with Cy

(post in progress)

This week’s assignment paired me with the ever-talented Cy Kim for a collaboration exploring rule-based animation and interaction. Our initial concept was to create an “instrument”, something in the fashion of a harp, whereupon contact with the mouse, the “string” would curve, and to lesser degrees, the neighboring strings would sympathetically deflect as well.

I’m still wrapping my head around the fundamental and theoretical mechanics of coding, so the challenge has been developing a practice in spite of some massive gaps of understanding. Working with Cy was revelatory, simply from the perspective of being able to observe the process of someone who is no stranger to graphic design, but also who can methodically build backwards from a developed vision, and find the logic for that vision later. I was also most impressed by the skill with which she was able to articulate pictorial and visual concepts that have been up until this past couple weeks, considerations and dimensions that never occurred to me.

function setup() {
  createCanvas(400, 500);
  noFill();
  frameRate(60);
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(3);
  
  let mousePos = mouseY;
  let mouseMap = map(mousePos, 0, 500,0, 100);
  let mouseColorMap = map(mousePos, 0, 500, 0, 255);
  let lineOpacity = 0;

  for (let i = 0; i < 500; i += 15) {
    stroke(map(abs(mouseY - i), 0, 500, 255, 15));
    strokeWeight(map(abs(mouseY - i), 0, 500, 3.5, 0.3));
    
    if (mouseY < i + 10) {
      beginShape();
      curveVertex(-20, i);
      curveVertex(0,i);
      curveVertex(200, i + mouseMap);
      curveVertex(400, i);
      curveVertex(420, i);
      endShape();
    } else {
      beginShape();
      curveVertex(-20, i);
      curveVertex(0,i);
      curveVertex(200, i);
      curveVertex(400, i);
      curveVertex(420, i);
      endShape();
    }

Computational Media