project 03: cube-y

the hardest part for me was sticking with an idea, and resisting the urge to scrap my code constantly. it was also tricky to keep my variables in check without rewriting them with each function… anyway, try moving your mouse around the canvas and clicking!

sketch
// Jaden Luscher
// section A
// project 03

var x = 0;
var y = 0;
var square1 = 0;
var square2 = 0;
var rot1 = 0;
var rot2 = 0;
var col = 200;

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

function draw() {
  background(200,200,100);
  rectMode(CENTER);
  noStroke();
  fill(col);
  translate(width/2, height/2); // move origin to center of canvas

  square1 = (mouseX + mouseY) / 2; // move mouse to change square size
  rot1 += 0.01; // makes square 1 spin
  rotate(rot1);
  rect(x, y, square1, square1); // center square (square 1)

  square2 = (mouseX - mouseY); // size of four squares differs from square 1
  if(mouseX > mouseY) {
    rot2 = 2 * rot1; // spins clockwise
  } else {
    rot2 = -2 * rot1; // spins counter clockwise
  }
  rotate(rot2);
  rect(x + square2, y + square2, square2, square2);
  rect(x - square2, y - square2, square2, square2);
  rect(x + square2, y - square2, square2, square2);
  rect(x - square2, y + square2, square2, square2); // four squares at corners

  if (mouseIsPressed) { // squares "jitter" & turn white
    rot1 *= -1;
    col = 255;
  } else {
    col = 0;
  }

  print("square2 = ", square2);

}

Leave a Reply