Project 07 Curves

When I saw the bean curve on the website, I knew i had to do it since it was pretty cute. After coding it in, I realized my bean did not look like a bean, and it turns out its becuase I had to be careful translating the math equations in way that the code would understand. After, I figured it out, I realized just drawing one bean was too simple, so I had to draw alot of them. Taking inspiration from the spots on canvas example, I was able to create the project below.

sketch
var ex = [];
var ey = [];
var points = 100;

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
//Picked the bean curve to do the project 
background("green");
//translate(width/2,height/2);
for (var i = 0; i < ex.length; i++){
  push();
  translate(ex[i], ey[i]);
  drawBeanCurve();
  pop();
}
}

function mousePressed(){
  ex.push(mouseX);
  ey.push(mouseY);
}

function drawBeanCurve(){
  var x;
  var y;
  var a = mouseX;
  var t = mouseY;
  fill("purple");
  beginShape();
  for (var i = 0; i < points; i++){
    t = map(i,0,points,0,TWO_PI);
    x = a*(cos(t)*((sin(t)**3)+(cos(t)**3)));
    y = a*(sin(t)*((sin(t)**3)+(cos(t)**3)));
    vertex(x,y);
  }
  endShape(CLOSE);
}

Leave a Reply