Charmaine Qiu – Project 03 – Dynamic Drawing

sketch

/* Charmaine Qiu
   Section E
   charmaiq@andrew.cmu.edu
   Project-03-DynamicDrawing */


var angle = 0
var b = 0


function setup() {
    createCanvas(400, 400);
}

function draw() {
//square that follows the cursor
    fill(b);
    b = random (0, 255);
    strokeWeight(0);
    rectMode(CENTER);
    push();
    translate(mouseX, mouseY);
    background(0);
    rotate(radians(angle));
    rect(0, 0, 50, 50);
    pop();
    angle += 5;

//rectangle outlines in the center
    noFill();
    stroke(255);
    strokeWeight(5);
    push();
    translate(width / 2, height / 2);
    rect(0, 0, mouseX, mouseY);
    pop();

    stroke(b);
    strokeWeight(1);
    rect(width * 0.5, height * 0.5, mouseY, mouseX);

//dancing lines in the center
    stroke(255);
    strokeWeight(1);
    line(width / 2 - 40, height / 2, width / 2 - 40, mouseY + 50);
    line(width / 2 - 30, height / 2, width / 2 - 30, mouseY);
    line(width / 2 - 20, height / 2, width / 2 - 20, mouseY - 20);
    line(width / 2 - 10, height / 2, width / 2 - 10, mouseY + 40);
    line(width / 2, height / 2, width / 2, mouseY);
    line(width / 2 + 10, height / 2, width / 2 + 10, mouseY + 60);
    line(width / 2 + 20, height / 2, width / 2 + 20, mouseY + 10);
    line(width / 2 + 30, height / 2, width / 2 + 30, mouseY);
    line(width / 2 + 40, height / 2, width / 2 + 40, mouseY - 30);

//When the mouse move to the left side of the canvas
    if (mouseX <= width / 2){
      push();
      translate(mouseX - 50, mouseY - 50);
      rotate(radians(angle));
      rectMode(CORNER);
      rect(20, 20, 20, 20);
      pop();
      angle = angle + 0.5;

      push();
      translate(mouseX + 50, mouseY + 50);
      rotate(radians(angle));
      rect(0, 0, 10, 10);
      pop();
      angle = angle - 0.5

      //text
      textSize(15);
      text('WooHooo!!!', 20, 90);
      textSize(30);
      text('哦耶!', 280, 180);

    } else { //When the mouse move to the right side of the canvas
      fill(0);
      strokeWeight();
      push();
      translate(mouseX, mouseY);
      rotate(radians(angle));
      rectMode(CENTER);
      rect(0, 0, 30, 30);
      pop();
      angle = angle + 5

      //text
      textSize(20);
      fill(255);
      text('야호!', 280, 50);
      textSize(25);
      text('ヤッホ〜ー', 70, 350);

    }


}

Exploring the various ways that shapes in p5js can change with the movement of the cursor was really interesting! It was also interesting to incorporating text in different languages into my code.