YouieCho-Project-03-Dynamic-Drawing

sketch

/*Youie Cho
  Section E
  minyounc@andrew.cmu.edu
  Project-03-Dynamic-Drawing*/

function setup() {
    createCanvas(480, 640);
    rectMode(CENTER);
}

function draw() {
    //background changes color based on mouse movement
    background(mouseX, mouseY, 180);
    //gray boundary frames background
    noFill();
    stroke(150);
    strokeWeight(5);
    rect(width / 2, height / 2, width, height);
    // mouseX is limited to 70-350
    var m = max(min(mouseX, 350), 70);
    var size = m * 350.0 / 480.0;
    strokeWeight(2);
    //purple square (rectangle)
    fill(210, 171, 255);
    rect(50 + m * 190.0 / 480.0, 200.0, size, size);
    //pink square
    fill(255, 207, 236);
    size = 350 - size;
    rect(150 + m * 190.0 / 480.0, 200.0, size, size);
    //blue square
    fill(179, 255, 255);
    size = 350 - size;
    rect(200 + m * 190.0 / 480.0, 200.0, size, size);

    /*yellow squares translate and rotate based on mouse movement
      color warmth changes based on mouseY*/
    stroke(200);
    strokeWeight(1);
    fill(255, mouseY + 150, 100);
    //yellow square 1
    push();
    translate(mouseX * 2.1, mouseY * 2.1);
    rotate(radians(mouseX / 10));
    rect(100, 250, 20, 20);
    pop();
    //yellow square 2
    push();
    translate(mouseX * 1.3, mouseY * 1.3);
    rotate(radians(mouseX / 10));
    rect(150, 290, 20, 20);
    pop();
    //yellow square 3
    push();
    translate(mouseX * 0.7, mouseY * 0.7);
    rotate(radians(mouseX / 10));
    rect(210, 340, 20, 20);
    pop();
    //yellow square 4
    push();
    translate(mouseX * 0.3, mouseY * 0.3);
    rotate(radians(mouseX / 10));
    rect(280, 400, 20, 20);
    pop();
    //yellow square 5
    push();
    translate(mouseX * 0.1, mouseY * 0.1);
    rotate(radians(mouseX / 10));
    rect(360, 470, 20, 20);
    pop();


    /*pink circles translate based on mouse movement
      they vary in size and rate of rotation*/
    fill(255, 110, 131);
    stroke(100);
    //pink circle 1
    push();
    translate(p5.Vector.fromAngle(millis() / 1000, 150));
    rotate(radians(mouseX / 10));
    ellipse(250, 400, 20, 20);
    pop();
    //pink circle 2
    push();
    translate(p5.Vector.fromAngle(millis() / 950, 150));
    rotate(radians(mouseX / 10));
    ellipse(255, 395, 30, 30);
    pop();
    //pink circle 3
    push();
    translate(p5.Vector.fromAngle(millis() / 900, 150));
    rotate(radians(mouseX / 10));
    ellipse(260, 390, 40, 40);
    pop();
    //pink circle 4
    push();
    translate(p5.Vector.fromAngle(millis() / 850, 150));
    rotate(radians(mouseX / 10));
    ellipse(265, 385, 50, 50);
    pop();
    //pink circle 5
    push();
    translate(p5.Vector.fromAngle(millis() / 800, 150));
    rotate(radians(mouseX / 10));
    ellipse(270, 380, 60, 60);
    pop();
    //pink circle 6
    push();
    translate(p5.Vector.fromAngle(millis() / 750, 150));
    rotate(radians(mouseX / 10));
    ellipse(275, 375, 70, 70);
    pop();
    //pink circle 7
    push();
    translate(p5.Vector.fromAngle(millis() / 700, 150));
    rotate(radians(mouseX / 10));
    ellipse(280, 370, 80, 80);
    pop();
}

It was fun to try controlling range of colors and creating movements that can change over time based on mouse movement.