Category: Section E

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.

click + drag/click to explore

/* 
Mimi Jiao
wjiao@andrew.cmu.edu
Section E
Project 7
*/

var mousepress; //boolean for switching states in mousePressed()
var r = 255; //initial color variable
var power = 33; //exponent for astroid functions
var scaleFactor = 1; //scaling elements variable
var increaseScale = .01; //variable for if statement in altering scale

function setup() {
    createCanvas(480, 480, WEBGL);
    background(0, 0, 255);
}

function draw() {
    background(0, 0, 0);
    strokeWeight(random(.4,.6)); //random strokeweight for jitter effect
    stroke(0, 0, 255);

    //drawing the rainbow background
    push();
    translate(0, 0, -100);
    drawBG();
    pop();

    //drag mouse to rotate astroids around X and Y axis
    if (mouseIsPressed) {
        rotateX(mouseX * .01);
        rotateY(mouseY * .013);
    }
    //rotate astroids 
    rotateZ(frameCount * .02);
    rotateX(frameCount * .001);
    rotateY(frameCount * .01);
    stroke(0, 0, 255);
    ellipsoid(25, 25, 25); //center ellipsoid
    stroke(0, 255, 0);
    scale(scaleFactor); //scaling the astroids

    //constantly scales up and scales down the astroids
    if (scaleFactor < 5 & scaleFactor >= 1) {
        scaleFactor += increaseScale;
    }else if (scaleFactor >= 5) {
        increaseScale = -increaseScale;
        scaleFactor += increaseScale;
    }else if (scaleFactor === .99) {
        increaseScale = -increaseScale;
        scaleFactor = 1;
    }

    //drawing the astroids & rotating them to form a spike
    drawAstroid();
    push();
    rotateZ(5);
    rotateX(3);
    rotateY(4);
    drawAstroid2();
    pop();
    push();
    rotateZ(3);
    rotateX(4);
    rotateY(5);
    drawAstroid2();
    pop();
    push();
    rotateZ(3);
    rotateX(4);
    rotateY(5);
    drawAstroid();
    pop();
    push();
    rotateZ(4);
    rotateX(3);
    rotateY(5);
    drawAstroid();
    pop();
    push();
    rotateZ(4);
    rotateX(3);
    rotateY(5);
    drawAstroid2();
    pop();
    
}

//first draw astroid function
function drawAstroid() {
    mappedMouseX = map(mouseX, 0, width, 0, 12);
    beginShape();
    noFill();
    for(var i = 0; i <  250 * TWO_PI; i ++) {
        stroke(0 , 255, 0);
        vertex(300 * (cos(i)**power), 
             300 * (sin(i)**power));
        //changes color of astroid based on mouseY
        if (mouseY >= height / 2) {
            stroke(r , 0, 0);
        }
       
    }
    endShape(); 
}

//second draw astroid function (different color)
function drawAstroid2() {
    mappedMouseX = map(mouseX, 0, width, 0, 12);
    beginShape();
    noFill();
    for(var i = 0; i < 250 * TWO_PI; i ++) {
        stroke(-r , 255, r);
        vertex(300 * (cos(i)**power), 
             300 * (sin(i)**power));
       
    }
    endShape();
}

//drawing the rainbow background 
function drawBG() {
    push();
    for (var i = 0; i < 1000; i++) {
        noFill();        
        stroke(i * sin(i) + 455, i * cos(i), sin(i) * width);
        beginShape();
        vertex(sin(i) * 900, cos(i) * 900,
               sin(i)* 900);
        vertex(sin(i) * 850, cos(i) * 850,
               cos(i) * 850);
        vertex(cos(i), sin(i), sin(i));
        endShape(CLOSE);
    }
    pop();

}

//if mouse is pressed, change color of specific astroids
function mousePressed() {
    if (mousepress === true) {
        r = random(20, 255);
    } else {
        r = 255;
    }
    mousepress = !mousepress;
}

I wanted to continue along the same path as I did for my project last week by using WEBGL again. This time, I really wanted to create a more 3D object that didn’t only exist on one plane, so I tried to play around with rotating the X, Y, and Z axis for the astroids. For this project, I utilized the mousePressed function and mouseIsPressed to play around with interaction. Here are some of my previous explorations below.

 

 

 

 

 

 

 

sketch

/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project 07: Curves */

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

function draw() {
    background(150, 200, 170);
    strokeWeight(1);
    fill(255);
	drawHypothrochoid();
}

function drawHypothrochoid() {
	// radius of circle a changes with mouseX within bounds
	var a = constrain(mouseX, 0, width / 3.5); 
	// radius of circle b
	var b = 10; 
	// distance from center of interior circle changes with mouseY
	var h = map(mouseY, 0, height / 5, height / 2, height / 4); 

    // t considers all values in a circle (360 degrees)
    for (var t = 0; t < 360; t ++) { 
    	// hypotrochoid equations affecting x and y (parametric equations)
        var x = width / 2 + (a - b) * cos(radians(t)) + h * cos(((a - b) / b)) * (radians(t)); 
        var y = height / 2 + (a - b) * sin(radians(t)) - h * sin(((a - b) / b) * (radians(t))); 
        // drawing hypothrochoid inspired ellipse
        ellipse(x, y, 5, 5);
    }

    // color of elements change depending on mouseY position
    if (mouseY <= height / 2) {
        stroke(247, 138, 100);
    } else if (mouseY > height / 2) {
    	stroke(170, 160, 200);
    }
}

For this project, I was inspired by the curves of the Hypotrochoid. I really enjoyed the curves that were being created in by the two simultaneous circles operating at once, and decided to add interaction to alter the tightness of the coils and play around with three dimensionality in space. While this project was initially challenging, I found it really fun to see what kind of results the curve would program.