ifv-Project-03

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Project-03
function setup() {
    createCanvas(480, 640);
}

function draw() {
  background(189,246,255);
//background color change
  if (mouseX >= 180 & mouseX <= 280) {
    background(211,255,255);
  }
  var centerX = constrain(mouseX,100,380);
  var centerY = constrain(mouseY,180,460);
//multi-layed rotating square which follows the cursor as its pressed
  if(mouseIsPressed) {
    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 700, 700);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 600, 600);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 500, 500);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 400, 400);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 300, 300);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 200, 200);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 100, 100);
    pop();
  }
//white dots that change size according to mouseX
  fill(255);
  stroke(255);
  strokeWeight(mouseX/10);
  point(centerX + 50, centerY);
  point(centerX - 50, centerY);
  point(centerX + 100, centerY);
  point(centerX - 100, centerY);
  point(centerX + 150, centerY);
  point(centerX - 150, centerY);
  point(centerX + 200, centerY);
  point(centerX - 200, centerY);
//Color and shape-changing Triangle
  fill(mouseX/5,mouseY/7,mouseX/2 + 5,mouseY);
  stroke(mouseX/5,mouseY/7,mouseX/2 + 5,mouseY);
  strokeWeight(3);
  triangle(100,0,centerX,centerY-70,380,0);
  triangle(100,640,centerX,centerY+70,380,640);

//lines orig from each corner and connect at cursor
  stroke(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  strokeWeight(6);
  fill(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  line(0,0,centerX,centerY);
  line(0,640,centerX,centerY);
  line(480,0,centerX,centerY);
  line(480,640,centerX,centerY);
//Centercircle
  fill(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  stroke(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  ellipseMode(CENTER);
  ellipse(centerX,centerY,50,50);

}

MouseX and MouseY are used to change the position of the center circle and the intersection of the four lines along with their color. These coordinates also affect the shape of the two triangles and the color of their stroke and fill. The white dots also follow these points and the stroke weight changes in thickness based on mouseX. When the Mouse is pressed multiple overlapped rotating squares appear. The position in which the mouse X&Y can effect the above elements is restrained. Transparency of certain elements is also affected. The background color lightens when the mouse is near the middle x-coordinates.