Project 03 – Dynamic Flower

var x = -225;
var y = -300;
/*d was used as a variable for translation as the artwork was originally
created with a grid*/
var d = 50;
var r = 50;
var angle = 45;
var colorChange = 255;

function setup() {
    createCanvas(450, 600);
    background(255);
}

function draw() {
    var colorReduce = mouseX / 50
    background(255);
    var extend = 3 * d;  //stretches dimensions on varying shapes
    translate(width / 2, height / 2);  //makes the center the origin

    extend -= .3 * mouseX;  //modifies the stretching variable
    //determines whether an RGB value should be increased or decreased
    if (mouseX <= width / 2){
      colorChange -= colorReduce
    } else {
      colorChange = 255
      colorChange += colorReduce;
      }
    /*creates the triangle-circle combination and rotates according to
    mousePressed*/
    push();
    fill(0, 0, colorChange, 60);
    rotate(radians(45 - 2 * angle)); //rotates the shapes around the center
    translate(-4.5 * d, -6 * d); //simplifies the location of each combo
    circle(7 * d + extend, 6 * d, 50);
    triangle(5 * d, 6.5 * d, 5 * d, 5.5 * d, 7 * d + extend, 6 * d);
    circle(4.5 * d, 9 * d + extend, 50);
    triangle(5 * d, 6.5 * d, 4.5 * d, 9 * d + extend, 4 * d, 6.5 * d);
    circle(2 * d - extend, 6 * d, 50);
    triangle(4 * d, 6.5 * d, 2 * d - extend, 6 * d, 4 * d, 5.5 * d);
    circle(4.5 * d, 3 * d - extend, 50);
    triangle(4 * d, 5.5 * d, 4.5 * d, 3 * d - extend, 5 * d, 5.5 * d);
    pop();

    /*creates the tilted petals of the flower and rotates them with the center
    when the mouse is pressed*/
    push();
    rotate(radians(45 + angle));
    fill(120, 30, 220, 35);
    circle(140, 0, 280);
    circle(0, 140, 280);
    circle(-140, 0, 280);
    circle(0, -140, 280);
    pop();
    //creates the non-tilted petals and rotates around the center with mouse
    push();
    rotate(radians(angle));
    fill(255, 176, 221, 120);
    circle(140, 0, 280);
    circle(0, 140, 280);
    circle(-140, 0, 280);
    circle(0, -140, 280);
    pop();
    /*creates the ellipses in the center of the petals and rotates them around
    the center*/
    push();
    fill(colorChange, 192, 176, 200);
    rotate(radians(2 * angle));
    ellipse(0, 100 + r, r, 2 * r);
    ellipse(0, -100 - r, r, 2 * r);
    ellipse(100 + r, 0, 2 * r, r);
    ellipse(-100 - r, 0, 2 * r, r);
    pop();
    //changes the size of the ellipses based on mouse position
    if (mouseY >= height / 2) {
      r = 45 + .05 * mouseY;
    } else {
      r = 50
      }
    //creates the green center square and rotation for mousePressed
    push();
    rotate(radians(angle - 45));
    rectMode(CENTER);
    fill(0, 255, 0, 80);
    rect(0, 0, 2 * d - 0.6 * extend, 2 * d - 0.6 * extend);
    pop();
    //creates the red center square and rotation for mousePressed
    push();
    rotate(radians(angle));
    rectMode(CENTER);
    fill(255, 0, 0, 80);
    rect(0, 0, 2 * d - .6 * extend, 2 * d - .6 * extend);
    pop();
    //creates the blue gradient when the y-mouse position changes
    let i=3;
    while (i<15) {
      noStroke(); //produces a graident effect based on ellipses
      fill(168, 235, 255, 10);
      ellipse(width / 3, height + i, mouseY + 50 * i, mouseY + 50 * i);
      ellipse(-width / 3, -height, mouseY + 50 * i, mouseY + 50 * i);
      ellipse(width / 3, -height, mouseY + 50 * i, mouseY + 50 * i);
      ellipse(-width / 3, height + i, mouseY + 50 * i, mouseY + 50 * i);
      i += 1; //increases the modifier as long as i<15
    }
}

function mousePressed() {
    //for when mouseX is less than the width, the angle of rotations increase
    if (mouseX < width) {
      angle += 45
    }
  }