Category: Project-07-Curves

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//project-07

var outR;               //outer circle radius
var inR;                //inner circle radius
var d = 100;            //distance for drawing pedal 
var t;                  //theta variable
var points = 10000;     //number of points to draw in for loop
var color2;             //global color variable

//constrained mouse values
var MX;
var MY;
//x and y values for resulting curve
var x;
var y;

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

function draw() {
    //constrain mouse x and y within the canvas
    MX = constrain(mouseX, 0, width);
    MY = constrain(mouseY, 0, height);

    //map background color based on mouse location
    var color0 = map(MX, 0, width, 150, 250);
    var color1 = map(MY, 0, height, 150, 250);
    background(color0, color1, 200);

    //mapped color value based on mouse y location
    color2 = map(MY, 0, height, 0, 255);

    //draw everything using the center of canvas as (0,0)
    translate(width/2, height/2);
    //map the driving circle dimensions to mous x pos
    n = map(MX, 0, width, 0, 6)
    //rose formula for the radii
    outR = (2*n*d)/(n+1);
    inR = (n-1)*d/(n+1);

    drawHypotrochoid();
    drawBaseCrvs();
}

function drawHypotrochoid() {
    noFill();
    //map color value to mouse y location
    stroke(color2, 0, 0);

    //draw the resulting curve
    beginShape();
    for (var i = 0; i < points; i++) {
        // map theta to full circle radians
        t = map(i, 0, points, 0, TWO_PI);
        //use the mathematical formula of a Hypotrochoid to find x and y values
        x = (outR - inR) * cos(t) + d * cos((outR-inR) / inR * t);
        y = (outR - inR) * sin(t) - d * sin((outR-inR) / inR * t);
        vertex(x, y);
    }
    endShape();

}

function drawBaseCrvs() {
    //draw outer circle
    stroke(0, 0, 255);
    noFill();
    ellipse(0, 0, 2*outR, 2*outR);

    //draw the inner circle and line 
    stroke(0);
    fill(0);
    ellipse((outR+inR) * cos(t), (outR+inR) * sin(t), 5, 5);
    line((outR+inR) * cos(t), (outR+inR) * sin(t), x, y);
    noFill();
    ellipse((outR+inR) * cos(t), (outR+inR) * sin(t), 2 * inR, 2 * inR);

    //draw pedal dot
    fill(color2, 0, 0);
    ellipse(x, y, 5, 5);
}

• 

• 

• 

• 

Inspired by the rose variation of a hypotrochoid on Wolfram’s Math World, I tried to show the logic behind how the hypotrochoid curves are drawn as well. In terms of color, the background and the resulting curve’s stroke color change with the mouse location. To add an extra level of interaction, the “n” variable also reacts to the mouse location, which controls the radii of the two circles that create the hypotrochoid, resulting in the manipulation of the resulting overall shape.

sketch

//Claire Xu
//xux1@andrew.cmu.edu
//Section B
//Project-07
var angle = 0;

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


function draw() {
    background("black");
    push();
    translate(width/2, height/2);
    rotate(radians(angle));
    angle += mouseX;
    drawAstroid();
    drawEightCurve();
    drawHypocycloid();
    pop();
}
function drawAstroid() {
    var b = map(mouseY, 0, width, -100, 150);
    strokeWeight(3);
    stroke(157,68,110);
    noFill();
    beginShape();
    for (var i = 0; i < 300; i++){
        var t = map(i, 0, 100, 0, TWO_PI);
        var x = (3*b*cos(t) + b*cos(3*t));
        var y = (3*b*sin(t) - b*sin(3*t));
        vertex(x, y);
    }
    endShape(CLOSE);

}
function drawEightCurve() {
    strokeWeight(2);
    stroke(252,158,33);
    noFill();
    var a = map(mouseX, 0, width, 0, 100); 
    beginShape();
    for (var i = 0; i < 800; i++){
        var t = map(i, 0, 100, 0, TWO_PI);
        var x = (a*sin(t));
        var y = (a*sin(t)*cos(t));
        vertex(x, y);
    }
    endShape(CLOSE);
}

function drawHypocycloid() {
    strokeWeight(1);
    stroke(255,111,97);
    noFill(); 
    var a = map(mouseX, 0, width, 0, 150);
    var b = map(mouseY, 0, width, 0, 150);
    beginShape();
    for(var i = 0; i < 400; i++){
        var angle2 = map(i, 0, 100, 0, TWO_PI);
        var x = ((a - b)* cos(angle2) - b*cos(((a - b))*angle2));
        var y = ((a - b)* sin(angle2) + b*sin(((a - b))*angle2));
        vertex(x, y);
    }
    endShape(CLOSE);
}

This project was quite challenging, because it took me a long time before I figured out what part of the code modified which part of the drawn form. I wanted to create spiraling geometric shapes that are web-like, and I was really interested in Hypocycloid, because it seemed to be less “restrictive” than other curves. I think the rotation makes it look more fun, because it gives the drawing a new dimension.

• 

• 

sketch-135.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Project_07


var nPoints = 100;
function setup() {
    createCanvas(480, 480);
}

function draw() {
    background(0);
    translate(width/2, height/2);
    drawEpitrochoid2();
    drawHeart();
    drawEpitrochoid();
}


function drawEpitrochoid2() {

    //geometry rotation
    rotate(map(mouseX, height, 0, TWO_PI, 0));

    //color gradiant
    var from = color(208, 16, 76);
    var to = color(0, 137, 167);
    var cH = lerpColor(from, to, map(mouseY, 0, width, 0 , 1));
    stroke(255);
    strokeWeight(0.2);
    fill(cH);

    //geometry parameters
	var a = map(mouseX, 0 , width, 50, 200);
    var b = a/30;
    var h = map(mouseY,0, height, 100, 0);

    //plotting geometry
	beginShape();
	for (var i = -1; i < 100; i ++) {
		var t = map(i, 0, 100, 0, TWO_PI);
        x = (a+b)*cos(t)-h*cos(((a+b)/b)*t);
        y = (a+b)*sin(t)-h*sin(((a+b)/b)*t);
		vertex(x, y)
	}
	endShape();
}

function drawHeart(){

    //stop heart shapes from rotation
    rotate(map(mouseX, height, 0, 0, TWO_PI));
    push();
    noStroke();
    fill(255,50);

    //size
    var h = map(mouseY, 0, height, 0, 5);

    //for how many layers of heart shapes
    for (var z = 1; z < 8; z++) {

        //plotting geometry
        beginShape();
        for (var i = 0; i < nPoints; i++) {
            var t = map(i, 0, nPoints, 0, TWO_PI);
            //heart equation
            x = 16 * pow(sin(t),3);
            y = -13 * cos(t)+ 5 * cos(2 * t) + 2 * cos(3 * t) + cos(4 * t);
            vertex(x*z*h,y*z*h);
        }
        endShape(CLOSE);
    }
}

function drawEpitrochoid() {

    //geometry rotation
    rotate(map(mouseY, 0, height, 0, TWO_PI));

    //color gradiant
    var from = color(178, 43, 206);
    var to = color(247, 217, 76);
    var cH = lerpColor(from, to, map(mouseX, 0, width, 0 , 1),100);
    stroke(cH);
    strokeWeight(1);
    noFill();

    //geometry parameters
    var a = map(mouseX, 0 , width, 50, 200);
    var b = a/20;
    var h = map(mouseY,0, height, 50, 200);

    //plotting the geometry
	beginShape();
	for (var i = -1; i < 100; i ++) {
		var t = map(i, 0, 100, 0, TWO_PI);
        x = (a+b)*cos(t)-h*cos(((a+b)/b)*t);
        y = (a+b)*sin(t)-h*sin(((a+b)/b)*t);
		vertex(x, y)
	}
	endShape();
}

This project is very intriguing to me because I got to explore the artistic value of math and geometry in a larger span.