Bettina-Project04-SectionC

sketch

// yuchienc@andrew.cmu.edu
// Section C
// project 4--stringart

function setup() {
  createCanvas(400,300);
}

var bgColor='#f8ada3'
var fuschia='#d06870'
var lightBlue='#86b5c6'
var ochre='#d0b268'

function draw() {
  background(bgColor);
  fuschiaCurve(mouseX);
  lightBlueCurve(mouseX);
  ochreCurve(mouseX);
}

function fuschiaCurve(mouseX) {
  var x1=mouseX;
  var y1=0;
  var x2=10;
  var y2=300;
  var x3=250;
  var y3=0;
  var cmx=constrain(mouseX,75,500);
  for (i=0;i<400;i+=20) {
    stroke(fuschia);
    line(x1,y1,x2,y2);
    line(x2,y2,x3,y3);
    x1+=.5;
    x2+=10;
    x3*=.8;
  }
}

function lightBlueCurve(mouseX) {
  var x1=10;
  var y1=300;
  var x2=250;
  var y2=0;
  var x3=x2+20;
  var y3=300;
  var cmx=constrain(mouseX,100,500);
  for (i=0;i<300;i+=50) {
    stroke(lightBlue);
    line(x1,y1,x2,y2);
    line(x2,y2,x3,y3);
    x1+=20;
    x2+=cmx/25;
    x3=x2+20;
  }
}

function ochreCurve(mouseX) {
  var x1=150;
  var y1=300;
  var x2=300;
  var y2=0;
  var cmx=constrain(mouseX,100,500);
  for (i=0;i<260;i+=20) {
    stroke(ochre);
    line(x1,y1,x2,y2);
    x1+=cmx*.05;
    x2+=cmx*.05;
  }
}

My previous projects, I had sketched a clear visual and then figured out the code to execute it. This time, I wanted to embrace the nature of code and draw something directly in p5 without sketching ideas prior. I’d used the print statement to find the values for x and y at certain points in the loop so I could use those values for other curve functions. I spent the most time adjusting the increments to x and y so the composition outcome was balanced. Some process pictures are below.

I also added an interactive portion, building off of last week’s assignment, so the positions of certain coordinates varied with mouseX.