var points = 100;
var R = 200;
var G = 100;
var B = 100;
var depth = 3
function setup() {
createCanvas(400, 400);
background(0);
}
function draw() {
//draw curves
translate(width / 2, height / 2);
rotate(mouseX/50);
drawParabolaCurve();
//decide color
if(mouseX < width/2){
R = 100;
G = 100;
B = 200;
}else{
R = 200;
G = 100;
B = 100;
}
}
function drawParabolaCurve() {
// Parabola:
// http://mathworld.wolfram.com/Parabola.html
strokeWeight(0.1);
stroke(R,G,B);
noFill()
//vertex points
var x;
var y;
var a = 20;
beginShape();
for (var i = 0; i < points; i++) {
var t = map(i, 0, points, 0, TWO_PI);
//parabolic formula
x = a * pow(t,depth) / a;
y = 2 * a * t;
vertex(x, y);
}
endShape(CLOSE);
}
For this project I really wanted to do/create something aesthetic. After looking through the algorithms and formulas, I found lots of them that were extremely complicated and hard to understand. I decided to go with something simple (a parabola) and influence it with both movement and color to make it look complex.
I created a formula that draws a more complex grid overtime you move your mouse. It creates a really interesting pattern and it makes the viewer want to make it more built up.