Project 07: Composition with Curves

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.

Project 7 – CurvesDownload



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);
}

Leave a Reply