Project-07-Curves

Please move your cursor around and feel the heartbeats.

heart
//jiaqiwa2; Jiaqi Wang; Section C
function setup() {
    createCanvas(480, 480);
    background(220);
    
}

function draw() {
	// Create a blended background
	fill(0, 10);
    rect(0, 0, width, height);
    //Keep track of how far mouse is away from the center
	var dX=Math.abs(mouseX-width/2);
	var dY=Math.abs(mouseY-height/2);
	//xoff and yoff are used to continuously govern 
	//two parameters of the curve respectively
	var xoff=map(dX,0,240,1,17);
	var yoff=map(dY,0,240,1,17);
	fill(220,49,63,60);
    heart(width/2,height/2,xoff,yoff);

}

function heart(Px,Py, xoff,yoff){
	push();
	//move the heart to the center of the canvas
	translate(Px,Py);
	noStroke();
	//start drawing heart curve 
	//with respect to mouse's distance from the center
	beginShape();
	for(var i=0;i<TWO_PI; i+=0.01){
		 var x=xoff*16*pow(sin(i),3);
		 var y=-yoff*(13*cos(i)-5*cos(2*i)-2*cos(3*i)-cos(4*i));
		 vertex(x,y);
	}
	endShape();
	pop();
}


For this project, I wanted to create a dynamic feeling of heartbeat using the Heart Curve.

Leave a Reply