Month: October 2018

Christine Chen-Project-07-Curves

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-07-Curves
*/

var nPoints = 100;
var eyeSize = 10;
var pupilSize = 5;

function setup() {
    createCanvas(480, 480);
    frameRate(10);
}

function draw(){
    background(189, 232, 252); //blue

    leaves();
    push();
    translate(width/2, height/2);
    drawHeart();
    pop();
    eye();
    blush();
    mouth();
}

function drawHeart(){
    //color
    noStroke();

    //peach turns "ripe" when its big
    if (mouseY > 130){ 
        fill(255, 178, 182); //light pink
    } else {
        fill(192, 222, 188); //light green
    }

    //heart
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = 16 * pow(sin(t), 3);
        y = 13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t)
             - cos(4 * t) * mouseX/90;

        mouseX = constrain(mouseX, 80, 70);
        mouseY = constrain(mouseY, 80, 200);

        x = map(x, -1, 15, -1, mouseY);
        y = map(y, -1, 15, -1, mouseY);

        vertex(x, y);
    }
    endShape(CLOSE);
}

function eye(){
    fill(0); //black
    var eyeLX = width/2 - 20 - mouseY/10;
    var eyeRX = width/2 + 20 + mouseY/10;
    ellipse(eyeLX, height/2, eyeSize, eyeSize); //left eye
    ellipse(eyeRX, height/2, eyeSize, eyeSize); //right eye
}

function blush(){
    noStroke();
    fill(229, 51, 60); //red
    var blushLX = width/2 - 20 - mouseY/7;
    var blushRX = width/2 + 20 + mouseY/7;
    ellipse(blushLX, height/2 + 15, eyeSize + 20, eyeSize); //left 
    ellipse(blushRX, height/2 + 15, eyeSize + 20, eyeSize); //right 
}

function mouth(){
    fill(232, 91, 98); //dark pink
    ellipse(240, 260, mouseY/10, mouseY/10);
}

function leaves(){
    noStroke();
    fill(112, 230, 134);

    //bigger leaves
    var leafLX = width/2 - 70;
    var leafRX = width/2 + 70;
    ellipse(leafLX, height/2 + 100, 150, 100); //left 
    ellipse(leafRX, height/2 + 100, 150, 100); //right 

    //smaller shadows on top
    fill(107, 221, 129);
    ellipse(leafLX + 20, height/2 + 90, 110, 80); //left 
    ellipse(leafRX - 20, height/2 + 90, 110, 80); //right 
}

I was initially just playing with the heart curve. Then when I made it pink, the idea of making it into a peach came to my mind. When the peach is small, it is unripe and so it is green. Once it gets big(once mouseY is larger than a particular point) it becomes ripe(pink). I initially wanted to play around with the curve even more, but I realized that doing so would make the shape not a heart, which wouldn’t work with the idea of a peach. Thus, I just play around with making the curves change “rationally”(so it keeps the shapes of a heart) according to the mouse positions.

sketch

/*Vicky Zhou
Section E
vzhou@andrew.cmu.edu
Project_07_Curves*/

var nPoints = 50; //amount of mapped out points
var EPITROCHOID1 = 0; // parametric form 
var HYPOTROCHOID = 0; //parametric form

function setup() {
    createCanvas(480, 480);
}

function draw() {
	background(15, 15, 25);
	translate(width/2, height/2);
	//draw light blue epitrochoid curve
	drawEPITROCHOID1();
	//draw light pink hypotrochoid curve
	drawHYPOTROCHOID();
	//draw orange circle epitrochoid curve
	drawEPITROCHOID2();
	//draw yellow circle epitrochoid curve
	drawEPITROCHOID3();
}

function drawEPITROCHOID1() {
	push();
	stroke(140, 200, 240);
	strokeWeight(0.75);
	noFill();
	var x; //x pos
	var y; //y pos
	var t = 90; //angle variable
	var b = constrain(mouseX / 100, 0, 10); //outside curve variable
	var h = map(mouseY, 0, mouseY, 30, height/2); //height variable
	beginShape();
	for (var i = 0; i < nPoints; i ++){
		var a = map(i, 0, nPoints, 0, TWO_PI); //inside circle size variable 
		x = (a + b) * cos(t) - h * cos (((a + b) / b) * t); //parametric eq1
		y = (a + b) * sin(t) - h * sin (((a + b) / b) * t); //parametric eq2
		vertex (x + random(0, 2), y + random(0, 2));
	}
	endShape();
	pop();
}

function drawHYPOTROCHOID() {
	push();
	strokeWeight(0.5);
	stroke(190, 140, 140);
	noFill();
	var x; //x pos
	var y; //y pos
	var t = constrain(mouseX / 10, 0, 100); //angle variable
	var b = 5; //outside curve variable
	var h1 = constrain(mouseX/ 2, width/4, width/3); //height variable 1 
	var h2 = constrain(mouseY/2, width/3, width/2); //height variable 2
	beginShape();
	for (var i = 0; i < nPoints; i++){
		var a = map(i, 0, nPoints, 0, TWO_PI); //inside circle size variable
		x = (a - b) * cos(t) + h1 * cos(((a - b)/b) * t);
		y = (a - b) * sin(t) + h2 * sin(((a - b)/b) * t);
		vertex(x, y);
	}
	endShape();
	pop();
}

function drawEPITROCHOID2() {
	push();
	noStroke();
	fill(100, 130, 190);
	var x; //x pos
	var y; //y pos
	var t = 100; //angle variable
	var b = constrain(mouseX / 100, 0, 10); //outside curve variable
	var h = constrain(mouseX/2, 0, 100); //height variable
	beginShape();
	for (var i = 0; i < nPoints; i ++){
		var a = map(i, 0, nPoints, 0, TWO_PI); //inside circle size variable 
		x = (a + b) * cos(t) - h * cos (((a + b) / b) * t); //parametric eq1
		y = (a + b) * sin(t) - h * sin (((a + b) / b) * t); //parametric eq2
		ellipse(x + random(-1, 1), y + random(-1, 1), 5, 5);
	}
	endShape();
	pop();
}

function drawEPITROCHOID3() {
	push();
	stroke(160, 140, 110);
	strokeWeight(0.3);
	noFill();
	var x; //x pos
	var y; //y pos
	var t = 190; //angle variable
	var b = constrain(mouseX, 0, 5); //outside curve variable
	var h = map(mouseY, 0, mouseY, 30, height/2); //height variable
	beginShape();
	for (var i = 0; i < nPoints; i ++){
		var a = map(i, 0, nPoints, 0, TWO_PI); //inside circle size variable 
		x = (a + b) * cos(t) - h * cos (((a + b) / b) * t); //parametric eq1
		y = (a + b) * sin(t) - h * sin (((a + b) / b) * t); //parametric eq2
		vertex(x + random(-5, 5), y + random(-3, 3));
	}
	endShape();
	pop();
}

This project was incredibly satisfying to make! Although it was a bit of a struggle at first to understand what each variable manipulated in the curve, plugging in random values and seeing what was affected was helpful and how I learned how to manipulate my curves into the desired look. I added a bit of “jitter” effect to my curves as well because I enjoy how they make the piece feel like it is constantly interactive even when the user is not altering the curves. For future iterations and/or ideas I think it would be interesting to incorporate equations that are not necessarily parametric, explicit, and/or polar.