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
}