Honestly I had very little idea of what I was doing or where I was going with this project. In the end I just experimented around with different equations until I found something that looked cool. The background of my project is a failed attempt at adding more complex curve. However I kind of liked the randomness that it added so I decided to keep it around. I added a cruciform on top of it which ended up having a very interesting shaped fill space. To finish it off I added a “+” to the center that would rapidly spin, making it look circular.
function setup() {
createCanvas(480, 480);
}
function draw() {
background(0);
squiggles();
drawCruciform();
drawSpinner();
}
// function for background squiggles
function squiggles() {
strokeWeight(10);
var x;
var y;
var a = width / 2;
var nPoints = map(mouseY, 0, height, height / 4, height / 2); // It jiggles with y movement
push()
translate(width / 2, height / 2); // Puts the jumble in the middle of the canvas
beginShape();
for (i = 0; i < nPoints; i++) {
stroke(250, i, 200);
var t = map(i, 0, nPoints, 0, 2 * PI);
x = a * cos(t * (1 - 2 * pow(sin(t), 2))); // Attempted equations
y = a * sin(t * (1 + 2 * pow(cos(t), 2))); // These didn't turn out how I expected but kinda liked them
vertex(x, y);
}
endShape();
pop();
}
// function for the cruciform
function drawCruciform() {
var x;
var y;
var a = map(mouseX, 0, width, width / 8, 200); // They move with the mouse
var b = map(mouseY, 0, height, height / 8, 200);
var nPoints = 300;
strokeWeight(20);
fill(150, 100, mouseX * mouseY / 300); // The interesting fill shape changes color
translate(width / 2, height / 2); // Centers it around the middle of the canvas
beginShape();
for(z = 0; z < nPoints; z ++) {
t = map(z, 0, nPoints, 0, 2 * PI);
x = a * (1 / cos(t)); // Cruciform equations
y = b * (1 / sin(t));
vertex(x, y);
}
endShape();
}
function drawSpinner() { // Adds two rectangles to the cent that spin with mouse movement
fill(200, 250, 200);
push();
rotate(mouseX * 10); // Spins very rapidly
rectMode(CENTER);
rect(0, 0, 50, 120); // These are already using the same translation as the cruciform
rect(0, 0, 120, 50);
pop();
}