Katherine Hua – Project-03 – Dynamic Drawing

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-03-Drawing Variables*/

var x = 0;
var y = 0;


var width1 = 50;
var height1 = 50;
var width2 = 150;
var height2 = 150;
var width3 = 400;
var height3 = 400;

var xRGB = 255/600
var yRGB = 255/600

function setup() {
    createCanvas(600, 600);
    background(0);
}

function draw() {
	background(0);
	rectMode(CENTER); //making it so that the x,y indicates the center of the rectangle instead of the top left corner
	angleMode(DEGREES); //changing mode from radians to angles
	translate(300, 300); // the elements will rotate with this point acting as the center

	var squarerotatemap = map(mouseX, 0, width, 0, 360); //mouseX will control the movement of the spinning elements

//inner
	noFill(); 
	strokeWeight(1);

    stroke(abs(mouseX-mouseY) * yRGB, mouseY * yRGB, mouseX * xRGB); //color will change based on mouse position on canvas

    // the following are drawing squares rotates at different angles that are spinning depending on the mouse position
	push();
	rotate(0 + squarerotatemap);
	rect(x, y, mouseX/12, mouseY/12); //mouseX controls the size of the square

	push();
	rotate(30);
	rect(x, y, mouseX/12, mouseY/12);
	pop();

	push();
	rotate(60);
	rect(x, y, mouseX/12, mouseY/12);
	pop();

	push();
	rotate(90);
	rect(x, y, mouseX/12, mouseY/12);
	pop();

	push();
	rotate(120);
	rect(x, y, mouseX/12, mouseY/12);
	pop();

	push();
	rotate(150);
	rect(x, y, mouseX/12, mouseY/12);
	pop();


//middle1
	stroke(mouseX * xRGB, abs(mouseX-mouseY)* xRGB, mouseY * yRGB);

	rotate(0+ squarerotatemap);
	rect(x, y, mouseX/4, mouseY/4);

	push();
	rotate(15);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(30);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(45);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(60);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(75);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(90);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(105);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(120);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(135);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(150);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(165);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

//outer
	stroke(mouseX * yRGB, mouseY * xRGB, abs(mouseX-mouseY)* xRGB);


	rotate(0 + squarerotatemap);
	rect(x, y, mouseX/2, mouseY/2);

	push();
	rotate(15);
	rect(x, y, mouseX/2, mouseY/2);
	pop();

	push();
	rotate(30);
	rect(x, y, mouseX/2, mouseY/2);
	pop();

	push();
	rotate(45);
	rect(x, y, mouseX/2, mouseY/2);
	pop();

	push();
	rotate(60);
	rect(x, y, mouseX/2, mouseY/2);
	pop();

	push();
	rotate(75);
	rect(x, y, mouseX/2, mouseY/2);
	pop();

//outerouter

	stroke(abs(mouseX-mouseY) * yRGB, mouseX * yRGB, mouseX * xRGB);

	rotate(0 + squarerotatemap);
	rect(x, y, mouseX, mouseY);

	push();
	rotate(105);
	rect(x, y, mouseX, mouseY);
	pop();

	push();
	rotate(120);
	rect(x, y, mouseX, mouseY);
	pop();

	push();
	rotate(135);
	rect(x, y, mouseX, mouseY);
	pop();

	push();
	rotate(150);
	rect(x, y, mouseX, mouseY);
	pop();

	push();
	rotate(165);
	rect(x, y, mouseX, mouseY);
	pop();



//inner
	noFill();
	strokeWeight(1);
	stroke(mouseX * xRGB, abs(mouseX-mouseY)* xRGB, mouseY * yRGB);

	push();
	rotate(0 + squarerotatemap);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);

	push();
	rotate(30);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);
	pop();

	push();
	rotate(60);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);
	pop();

	push();
	rotate(90);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);
	pop();

	push();
	rotate(120);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);
	pop();

	push();
	rotate(150);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);
	pop();


//middle
	stroke(mouseX * xRGB, abs(mouseX-mouseY)* xRGB, mouseY * yRGB);

	rotate(0+ squarerotatemap);
	rect(x, y, mouseX/3, mouseY/3);

	push();
	rotate(15);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(30);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(45);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(60);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(75);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(90);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(105);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(120);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(135);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(150);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(165);
	rect(x, y, mouseX/3, mouseY/3);
	pop();
}

My design is meant to look like as if you’re looking into a kaleidoscope. This project really helped me get more familiar with understanding how variables work and how the mouse position can work in relation to other elements of the design.