Liu Xiangqi-Project-07

The project I tried to create is made up of eight curves and parabola. The parameter a (the scale of the eight curves) and b (the scale of the parabolas) is controlled by the x coordinates of the mouse. The number and the rotation degree is controlled by the y coordinates of the mouse. When a user moves the mouse, he/she can expect a procedure of flower blossom or a comet with its long tail. I was intended to create a kaleidoscope through the intertwine and changes of different curves.
sketch

function  setup() {
  createCanvas(600, 600);
}
 
function draw(){
  background(200, 200, 255);
  //keep the size of the eight curve in a reasonable size
  var x = min(mouseX, width);
  //like the parameter to mouseX
  var a = map(x, 0, width, 0, 200);
  var b = map(mouseX, 0, width, 0, 400);
  //link the rotation to mouseY
  var deg = map(mouseY, 0, height, 0, 360);
  noFill();
  stroke(255);
  push();
  translate(width/2, height/2);
  for (var j = 0; j < deg; j += 3600/deg){
    rotate(720/deg);
    beginShape();
    curveVertex(0, 0);
    //draw the complete eight curve
    for (var i = -10; i < 10; i += 0.1){
         var x = a*sin(i);
         var y = a*sin(i)*cos(i);
         curveVertex(x, y);
    }
    curveVertex(0, 0);
    endShape();
    
    beginShape();
    curveVertex(0, 0);
    //draw the complate parabola curve
    for (var i = -10; i < 10; i += 0.1){
         var x = b*sq(i);
         var y = 2*b*i;
         curveVertex(x, y);
    }
    curveVertex(0, 0);
    endShape();
  }
  pop();
  

}