xxxxxxxxxx
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
}
function draw() {
translate(width / 2, height / 2);
rectMode(CENTER);
angleMode(DEGREES);
let mouseXcounter = map(mouseX, 0, width, 0, 20);
let mouseYcounter = map(mouseY, 0, height, 0, 360);
// COLOR MANAGEMENT
noStroke();
let colorMax = 255;
let colorHue = map(mouseY, 0, height, 0, colorMax);
colorMode(HSL, colorMax);
let color = [colorHue, colorMax / 3, colorMax / 2];
//fill(color);
//background(0);
if (mouseIsPressed) {
fill(0);
background(color);
} else {
fill(color);
background(0);
}
// DRAW LINES OF RECTS
let lineAmount = 12;
for (let i = 0; i < lineAmount; i += 1) {
// DRAW RECTS
rotate(mouseYcounter * -1); // rotate all rect
let rectAmount = mouseXcounter;
for (let j = 0; j < rectAmount; j += 1) {
let rectOffset = 5;
let rectSize = j * j;
let rectX = rectSize * j / 6 + rectOffset;
let rectY = (rectSize * j / 6 + rectOffset) + 100;
rect(rectX, rectY, rectSize, rectSize);
}
rotate(mouseYcounter); // revert rect rotation
rotate(360 / lineAmount);
}
}