Project-03: Dynamic Drawing

My project for this week is loosely inspired by a kaleidoscope. I wanted to make an intricate design but due to my limited knowledge of p5.js, I decided to stick with just squares and ellipses. By piling them over and over and varying them by sizes, shapes, rotation speed, and colors based on the mouse position, I was able to achieve a fun, colorful kaleidoscope design.

sketch
function setup() {
    createCanvas(600, 450); 
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

var x = 0;
var y = 0;
var angle = 0;

function draw() { 
	background(0);
	noStroke();
	push();
	translate(300,225);
	rotate(radians(angle));
	rectMode(CENTER);
	var mX = max(min(mouseX, 600), 0); //constraint of canvas width
	var size = mX * (5/6); //sizes vary based on mouseX
	var mY = max(min(mouseY, 450), 0); //constraint of canvas height
	var sizeY = mY * (5/6); //sizes vary based on mouseY

	//square shapes based on mouseX
	fill(mouseY*255/height, mouseX*255/width, max(mouseX, mouseY)*255/500); //color of object depends on mouse position
	rect(x,y, 3*size/2, 3*size/2);	//biggest square
	fill(mouseX*255/width, mouseY*255/height, max(mouseX, mouseY)*255/500); 
	rect(x,y, size, size);	//big square
	fill(mouseY*255/height, max(mouseX, mouseY)*255/500, mouseX*255/width); 
	rect(x,y, 3*size/4, 3*size/4);  //medium square
	fill(max(mouseX, mouseY)*255/500, mouseX*255/width, mouseY*255/height);
	rect(x,y, 5*size/12, 5*size/12); //small square
	fill(max(mouseX, mouseY)*255/500, mouseY*255/height, mouseX*255/width);
	rect(x,y, size/5, size/5); //smallest square

	//square shapes based on mouseY (same sizes, colors)
	fill(mouseY*255/height, mouseX*255/width, max(mouseX, mouseY)*255/500); 
	rect(x,y, 3*sizeY/2, 3*sizeY/2);
	fill(mouseX*255/width, mouseY*255/height, max(mouseX, mouseY)*255/500); 
	rect(x,y, sizeY, sizeY);	
	fill(mouseY*255/height, max(mouseX, mouseY)*255/500, mouseX*255/width); 
	rect(x,y, 3*sizeY/4, 3*sizeY/4); 
	fill(max(mouseX, mouseY)*255/500, mouseX*255/width, mouseY*255/height);
	rect(x,y, 5*sizeY/12, 5*sizeY/12);
	fill(max(mouseX, mouseY)*255/500, mouseY*255/height, mouseX*255/width);
	rect(x,y, sizeY/5, sizeY/5);

	//ellipse shapes based on mouseX
	noFill();
	strokeWeight(4);
	stroke(mouseX*255/width,min(mouseX, mouseY)*255/500, mouseY*255/height);
	ellipse(x,y, 5*size/2, 2*size);
	ellipse(x,y, 2*size, 5*size/2); //biggest ellipses
	stroke(mouseY*255/height, mouseX*255/width, min(mouseX, mouseY)*255/500);
	ellipse(x,y, 3*size/2, size);
	ellipse(x,y, size, 3*size/2); //big ellipses
	stroke(mouseX*255/width, mouseY*255/height, min(mouseX, mouseY)*255/500);
	ellipse(x,y, size, 2*size/3);
	ellipse(x,y, 2*size/3, size); //medium ellipses
	stroke(mouseY*255/height, max(mouseX, mouseY)*255/500, mouseX*255/width);
	ellipse(x,y, 3*size/5, 3*size/4);
	ellipse(x,y, 3*size/4, 3*size/5); //smaller ellipses
	stroke(max(mouseX, mouseY)*255/500, mouseY*255/height, mouseX*255/width);
	ellipse(x,y, size/3, 2*size/9);
	ellipse(x,y, 2*size/9, size/3); //smallest ellipses

	//ellipse shapes based on mouseY (same size, colors)
	noFill();
	strokeWeight(4);
	stroke(mouseX*255/width,min(mouseX, mouseY)*255/500, mouseY*255/height);
	ellipse(x,y, 5*sizeY/2, 2*sizeY);
	ellipse(x,y, 2*sizeY, 5*sizeY/2);
	stroke(mouseY*255/height, mouseX*255/width, min(mouseX, mouseY)*255/500);
	ellipse(x,y, 3*sizeY/2, sizeY);
	ellipse(x,y, sizeY, 3*sizeY/2);
	stroke(mouseX*255/width, mouseY*255/height, min(mouseX, mouseY)*255/500);
	ellipse(x,y, sizeY, 2*sizeY/3);
	ellipse(x,y, 2*sizeY/3, sizeY);
	stroke(mouseY*255/height, max(mouseX, mouseY)*255/500, mouseX*255/width);
	ellipse(x,y, 3*sizeY/5, 3*sizeY/4);
	ellipse(x,y, 3*sizeY/4, 3*sizeY/5);
	stroke(max(mouseX, mouseY)*255/500, mouseY*255/height, mouseX*255/width);
	ellipse(x,y, sizeY/3, 2*sizeY/9);
	ellipse(x,y, 2*sizeY/9, sizeY/3);

	pop();
	angle += max(mouseX, mouseY)/ 5; //rotation depends on mouse position

}

Leave a Reply