My process to create this project began with doing research on various geometric curves. Once I found the Conchoid of de Sluze, I found that it had this unique directional quality and, if translated to the middle of the canvas, neatly divided it in half. After making the curve flip based on the x-position of the mouse, I decided to make the bulge of the curve responsive to the y-position of the mouse. Then, I would draw another curve ( a cardiod cartacaustic) with a flashing background in the half of the canvas the Conchoid of de Sluze was not occupying. In this way, the Conchoid of de Sluze was acting as a revealing element. Afterwards, to add some visual interest, I added a random function to the vertexes of each curve to create a jittery animated effect.
function setup() {
createCanvas(480, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(0);
if (mouseX >= width/2){
noStroke();
fill(random(200,255),random(100,255),0);
rect(0,0,width/2,height);
push();
translate(width/4,height/2);
//rotate(radians(45));
cardioidCatacaustic();
pop();
} else {
noStroke();
fill(random(100,255),0,random(200,255));
rect(width/2,0,width/2,height);
push();
translate(3*width/4,height/2);
rotate(radians(180));
cardioidCatacaustic();
pop();
}
push();
translate(width/2,height/2);
conchoid();
pop();
}
function conchoid() {
//https://mathworld.wolfram.com/ConchoidofdeSluze.html
var x;
var y;
var r;
var a = constrain(mouseY,10,240);
fill("red");
beginShape();
for(var i = 0; i < 200; i++){
var t = map(i,0,200,-PI,3*PI);
if(mouseX <= width/2){
r = -(1/cos(t) + a*cos(t));
} else{
r = (1/cos(t) + a*cos(t));
}
x = r*cos(t);
y = r*sin(t);
vertex(x + random(-2,2),y + random(-2,2));
}
endShape();
}
function cardioidCatacaustic() {
https://mathworld.wolfram.com/CardioidCatacaustic.html
var x;
var y;
var xe;
var ye;
var strokeVal =.2;
var a = 60;
noFill();
stroke(0);
strokeWeight(strokeVal);
beginShape();
for(var i = 0; i < 200; i++){
var t = map(i,0,200,-PI,PI);
x = a*(1 + cos(t))*cos(t);
y = -a*(1 + cos(t))*sin(t);
vertex(x + random(-2,2),y + random(-2,2));
}
endShape(CLOSE);
}