# sijings-project07-Composition with Curves

``````
//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.