sijings-project07-Composition with Curves

sijings-07

//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//Assignment-06-compositionwithCurve

var t=0;
var r=60;
var curveP1;
var curveP2;
var color1=141;
var color2=141;

function setup() {
  createCanvas(480, 480);
}
 
function draw() {
  var t=map(mouseY, 0, height/4, height/2, height/4);//constrain it between hieght/2 and height/3
  background(156,170,164);
  noStroke();  
  var limit;//curve for determining how many times we want to rotate
  if (mouseX<width/2){
    limit=map(mouseX,0,width/2,0,16);
  }else{
    limit=map(mouseX, width/2, width,16,0);
  }
  for (var num=0;num<limit;num++){//set limit as our limit for iteration
    //leafs
    angleMode();
    fill(200,195,167);
    arc(50, 50, 140, 140, 180, 270,CHORD);//all used chord becuase we need to create
    arc(50, 80, 140, 140, 200, 270,CHORD);//a effect of leaves
    arc(width-50, height-50, 140, 140, 180, 270,CHORD);
    arc(width-50, height-80, 140, 140, 200, 270,CHORD);
    fill(104,103,78);
    arc(50, 70, 160, 140, 30, 0,CHORD);
    arc(60, -90, 260, 240, 190,40, CHORD);
    arc(width-50, height-30, 160, 140, 30, 0,CHORD);
    arc(width-50, height-90, 260, 240, 190,40, CHORD);
    fill(203,169,111,70);
    arc(30, -40, 260, 240, 190,40, CHORD);
    arc(20, 70, 140, 140, 180, 270,CHORD);
    arc(55, 115, 140, 140, 200, 270,CHORD);
    arc(width-150, height-90, 260, 240, 190,40, CHORD);
    arc(width-20, height-70, 140, 140, 180, 270,CHORD);
    arc(width-55, height-115, 140, 140, 200, 270,CHORD);
    fill(212,202,144);
    arc(50, 120, 240, 240, 200, 270,CHORD);
    arc(width-115, height-120, 240, 240, 200, 270,CHORD);
    fill(104,103,78,100);
    arc(-20, 90, 160, 140, 30, 0,CHORD);
    arc(20, -90, 260, 240, 190,40, CHORD);
    arc(width-80, height-90, 160, 140, 30, 0,CHORD);
    arc(width-80, height-90, 260, 240, 190,40, CHORD);

  //inner loop for drawing the actual curve
    for (var i=0;i<670;i++){
      r=mouseX/5;//set the radius to continue change
      if (num%4==0){//set different conditions for determing which direction we want
        var x=r*cos(t)*(1+cos(t));
        var y=r*sin(t)*(1+cos(t));
      }
      if (num%4==1){
        var x=r*cos(t)*(1-cos(t));
        var y=r*sin(t)*(1-cos(t));
      }
      if (num%4==2){
        var x=r*sin(t)*(1+cos(t));
        var y=r*cos(t)*(1+cos(t));
      }
      if (num%4==3){
        var x=r*sin(t)*(1-cos(t));
        var y=r*cos(t)*(1-cos(t)); 
      }
      t+=0.97;
      curveP1=width/2+num*2+x-12;//circles position x
      curveP2=height/2+num+y;//circles position y
      if (mouseX<width/2){
        var color1=map(mouseX, 0, width/2, 200, 74);//set conditions for changing color
        var color2=map(mouseX, 0, width/2, 121, 36);
      }else{
        var color1=map(mouseX, width/2, width, 80,200);
        var color2=map(mouseX, width/2, width, 35,121);
      }

      rotate(PI/5.0);//for rotating shape
      fill(255,color1,color2,255-mouseX/3);
      var size=map(mouseX,width/2,width,2,10);//also constrain size
      ellipse(curveP1,curveP2,size,size);
    } 

  }
  

}

For this project, I wanted to express the idea a flower is blooming and then dying based on our mouse movement from left of the canvas to the right. So we can see there are changes of the number of petals (increase when mouseX approaching to the center of the canvas) and decreases when mouseX leaving the center of the canvas and going to the edge. With this movement, there are also changes in color, opacity, size, and the position of each dots. The audience can play this interactive work by rotating the flower and seeing how they can transform a flower from born to death. There are also some leaves being created for decoration. Here are some screenshots of the different states of the flower.