Category: Project-07-Curves

Curves

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-07
*/

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

function draw() {
    background(mouseX/2, width/2, 255);
    drawHypocycloid1(); //draw hypocloid 1
    drawHypocycloid2(); //draw hypocycloid 2
}

function drawHypocycloid1() {
	//constrain mouse values to only affect when on canvas
	var x = constrain(mouseX, 0, width);
	var y = constrain(mouseY, 0, width); 
    noFill(); //no fill color
    strokeWeight(2); //line thickness
    stroke(width-mouseX); //stoke color changes based on mouseX

    //Hypocycloid 1
	push();
	translate(width/2, height/2); //begin at center of canvas
	var a = map(mouseX, 0, width, 0, 100);
	var b = map(mouseY, 0, height, 0, 100);
	beginShape();
	    for (var i = 0; i<=100; i++) {
    	    var t = map(i, 0, 100, 0, TWO_PI); //angle variable
    	    //hypocycloid1 equations
    	    x = (a+b)*cos(t) + b*cos((a+b)*t); 
    	    y = (a+b)*sin(t) - b*sin((a+b)*t);
    	    vertex(x, y);
    }
    endShape();
	pop()
}

function drawHypocycloid2() {
	//Hypocycloid 2
	push();
	translate(width/2, height/2); //begin at center of canvas
	var a = map(width-mouseX, 0, width, 0, 100);
	var b = map(width-mouseY, 0, height, 0, 100);
	beginShape();
	    for (var i = 0; i<=150; i++) {
    	    var t = map(i, 0, 100, 0, 360); //angle variable
    	    //hypocycloid2 equations
    	    x = (a+b)*cos(t) + b*cos((a+b)*t); 
    	    y = (a+b)*sin(t) - b*sin((a+b)*t);
    	    vertex(x, y);
    }
    endShape();
	pop()
}

It took me quite a while to figure out how to use an equation of a hypocycloid in javascript. In addition, I spent a lot of time looking through the MathWorld website looking at different curves and equations. I really enjoyed looking at the curves. I like the colors that I chose. The background is blue when the mouse is on the left and changes to pink as the mouse moves right. In addition, I like that the color of the hypocycloid drawings change from black to white and contrasts the background color. I am pretty happy with my product. However, I prefer being able to imagine (in my mind) what my code will create/draw. And, I can imagine what one individual hypocycloid looks like on the screen, but I could never imagine all the changes of my drawing based on where the mouse is.

sketch

//Ankitha Vasudev
//ankithav@andrew.cmu.edu
//Section B
//Project 07

//global variable
var nPoints = 600;

function setup() {
    createCanvas(450, 450); 
    frameRate(100);
}

function draw() { 
	background(0);

    //variables to change stroke color depending on mouse position
	var r = map(mouseX, 0, width, 50, 255);
	var g = map(mouseX, 0, width, 50, 255);
	var b = map(mouseY, 0, height, 50, 255);

    noFill();

    //calling Hypotrochoid function
	push();
    stroke(r, g, b);
    strokeWeight(0.15);
    translate(width/2, height/2);
	drawHypotrochoid();
	pop();

    //calling Astroid function
	push();
	stroke(g, b, r);
	strokeWeight(0.15);
	translate(width/2, height/2);
	drawAstroid();
	pop();

}

function drawHypotrochoid() {
    var x;
    var y;
    var h = width/2;
    //Mouse controls radius of hyportochoid
	var a = map(mouseX, 0, width, 0, width/100);
	var b = map(mouseY, 0, height, 0, height/200);
   
    beginShape();
      for (var i = 0; i < nPoints; i++) {
    	var angle = map(i, 0, 180, 0, 360);
    	//using formula for Hypotrochoid
    	//mathworld.wolfram.com/Hypotrochoid.html
    	x = (a - b) * cos(angle) + h * cos((a - b) * angle);
        y = (a - b) * sin(angle) - h * sin((a - b) * angle);
        vertex(x, y);
      }
    endShape();
 }

function drawAstroid() {
	var x;
	var y;
	//Mouse controls radius of Astroid
	var a = map(mouseX/2, 0, width, 0, width/5);
	var b = map(mouseY/2, 0, height, 0, height/10);

    beginShape();
      for (var i = 0; i < nPoints/2; i++) {
        var angle = map(i, 0, 100, 0, 360);
        //using formula for Astroid/Hypocycloid
        //mathworld.wolfram.com/Hypocycloid.html
        x = (a - b) * cos(angle) - b * cos(angle * (a - b));
        y = (a - b) * sin(angle) - b * sin(angle * (a - b));
        vertex(x, y);
      }
    endShape();
}

This project was the most difficult one so far because it took me a while to understand how to draw the curves the way I wanted them to be. I had to look at some online videos to get a better understanding. Additionally, reading the explanations behind the curve equations on Mathworld helped a lot. I played around with the variables and curve layers before finalizing on a Hypotrochoid and Astroid curve. However, the equation for an astroid was too complex so my curve uses a general Hypocycloid equation.

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 07 - Curves

var nPoints = 200;
var rotation = 0; //rotation for all Hypotrochoid Evolutes starts at 0

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

function draw() {
    background('white');
    stroke('white');
    
    //Hypotrochoid Evolutes:
    drawHypotrochoidEvolute(5, 300, 0.75, 2.5, color(139, 198, 63, 125)); //green
    drawHypotrochoidEvolute(10, 150, map(mouseX, 0, width, 0, 2), 1.5, color(173, 18, 26, 125)); //red
    drawHypotrochoidEvolute(5, 200, map(mouseY, 0, height, 0.25, 1), 2.5, color(177, 158, 219, 125)); //purple
    drawHypotrochoidEvolute(50, 150, map(mouseY, height, 0, 0, 2), 1.5, color(113, 198, 232, 125)); //blue
    drawHypotrochoidEvolute(25, 226, map(mouseX, width, 0, 0.25, 1.5), 2, color(253, 185, 63, 125)); //yellow
}

function drawHypotrochoidEvolute(pedalNum, angularity, size, strokeW, fillColor) { //pedalNum and angularity affect how many "pedals" you see, and their appearance
    // Hypotrochoid Evolute:
    // http://mathworld.wolfram.com/HypotrochoidEvolute.html
    push();
    translate(width / 2, height / 2);
    scale(size); //scales down Hypotrochoids (including stroke), specified under draw
    
    //causes all Hypotrochoid Evolutes to rotate at same rate, clockwise when mouse is below the middle of the canvas, counter-clockwise when above
    rotation += map(mouseY, 0, height, -TWO_PI / 800, TWO_PI / 800);
    rotate(rotation);
    
    //creates the Hypotrochoid Evolutes
    beginShape();
    fill(fillColor);
    strokeWeight(strokeW);
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var h = map(mouseX, 0, width, -200, 200);
        //The equation for Hypotrochoid Evolutes
        x = (angularity - pedalNum) * cos(t) + h * cos((angularity - pedalNum) * (t / pedalNum));
        y = (angularity - pedalNum) * sin(t) - h * sin((angularity - pedalNum) * (t / pedalNum));
        vertex(x, y);
    }
    endShape();
    pop();
}

When approaching this project, I was a little overwhelmed, as I didn’t really know where to start, but after looking through the different roulette curves on the Mathworld curves website, I chose to focus on just the hypotrochoid evolute forms, as there were a large range of forms and examples for that particular curve that I could explore. After playing around with them a little, I started experimenting with colors and transparencies, and tried to go in the direction of a kaleidoscope, as I wanted my project to be constantly changing, and to reveal/conceal the different layers of colors depending on the location of your mouse.