Month: October 2019

Trying to get the curve was pretty difficult. The website had a lot of equations on it and I picked through them to get the information I needed. Once I got the curve I wanted, the issue rose of how to implement it in the code. After experimenting for a bit and looking at the code given on the assignment instructions for reference, I eventually figured it out. After getting the curve to work, I changed some values so that it changed along with the mouse, making it interactive. I also added and changed other elements to make the image prettier, such as adding colors and flowers.

sketchsal

var num_points = 100;//number of points being drawn

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

function draw() {
    var hW = width / 2;//half of width
    var hH = height / 2;//half of height
    background("pink");
    for(var i = 0; i < 3; i++){//draws rows of elements
        for(var g = 0; g < 3; g++){//drawns columns of elements
        ellipse((width / 2) * i,(height / 2) * g, (mouseX / 4) * 1,
            (mouseX / 4) * 1);//circles being drawn
        }

    }
    //circles
    noStroke();
    fill(255, 232, 232);
    ellipse(120,120, 10,10);//upper left
    ellipse(360,120, 10,10);//upper right
    ellipse(120,360, 10,10);//lower left
    ellipse(360,360, 10,10);//lower right
    //flowers
    fill(255, 69, 69);
    ellipse(120,120, 5,15);//upper left
    ellipse(360,120, 5,15);//upper right
    ellipse(120,360, 5,15);//lower left
    ellipse(360,360, 5,15);//lower right

    fill(255, 117, 117);
    ellipse(120,120, 15,5);//upper left
    ellipse(360,120, 15,5);//upper right
    ellipse(120,360, 15,5);//lower left
    ellipse(360,360, 15,5);//lower right
    fill('red');//makes circles red
    stroke(0);//makes everything outlined

    //draw curve (Astroid) 
    push();
    translate(width / 2, height / 2);//(240,240)
    drawAstroid();
    pop();
}
function drawAstroid() {//function that draws curve
    var x;//calls x
    var y;//calls y
    var vx = mouseX / 5.0;//value of mouseX divided by 5 
    fill(255, 200, 200);//pink
    beginShape();//makes it so that the lines don't stay after being drawn
    //(there isn't a bunch of overlapping blackness)
    for (var i = 0; i < num_points; i++) {//increments elements from 0 to 100
        var t = map(i, 0, num_points, 0, TWO_PI);//runs curve from 0 to 2 pi
        
        x = vx * pow(cos(t * vx),3);//formula for x values
        y = vx * pow(sin(t * vx),3);//formula for y values
        vertex(x, y);
    }
    endShape(CLOSE);//ends shape
}

reshin-project07

/*Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 07- Composition with Curves
*/

var numPoints = 300;
var angle = 0;


function setup() {
    createCanvas(480, 480)
    r = random(255);
    g = random(255);
    b = random(255);
}    



function draw() {
    background(0);

    push();
    translate(width / 2, height / 2); //center on canvas
    drawHypotrochoid();
    pop();

    push();
    translate(mouseX, mouseY); //center of curve based on mouse position
    rotate(radians(angle)); //rotates on center point
    drawTrifolium();
    pop();

    angle = angle + 4; // speed of rotation
}  
  
function drawHypotrochoid() { //http://mathworld.wolfram.com/Hypotrochoid.html
    var x;
    var y;
    
    //map boundaries
    var h = map(mouseY, 0, height, 0, 200); //size changes based on mouseY
    var a = map(mouseX, 0, width, 0, 200); //size changes based on mouseX
    var b = a / 8;

    //Hypotrochoid curve
    beginShape();
    for (var i = 0; i < numPoints; i ++) {
        stroke(r, g, b);
        strokeWeight(2);
        noFill();
        var t = map(i, 0, 200, 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(CLOSE);
}


function drawTrifolium() { //http://mathworld.wolfram.com/ConicalSpiral.html    
    var x;
    var y;
    var r;

    //constrain    
    var a = constrain(mouseX, width / 5, width / 2);
    
    //outline of light blue spinning trifolium
    noFill();
    stroke(195, 217, 227);
    strokeWeight(0.5);

    //Trifolium curve
    beginShape();
    for (var i = 0; i < numPoints; i++) {
        var t = map(i, 0, numPoints, 0, TWO_PI);
        r = - a * cos(3 * t);
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

This project took me a while because it took me a while to figure out how to compute each curves. Maneuvering it around the canvas was more interesting for me because it allowed me observe how the code I wrote computed it to animate a certain way.

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-07



function setup() {
    createCanvas(480, 480);
    background('black');
}

function draw() {
    push();// draw in the middle
    translate(width / 2, height / 2);
    drawHypotrochoid();
    pop();
}

//Equations from http://mathworld.wolfram.com/Hypotrochoid.html
 function drawHypotrochoid() {
    var x;
    var y;
    var a1 = mouseX; //move mouse to control hypotrochoids drawing
    var a2 = mouseY;
    var h = 5;

    beginShape(); //draw hypotrochoid
    for (i = 0; i < 480; i += 5){
        var t = map(i, 0, 200, 0, width);
        x = (a1- a2) * cos(t) + h * cos(t * (a1 - a2) / a2);
        y = (a1- a2) * sin(t) - h * sin(t * (a1 - a2) / a2);
        vertex(x, y);
    }
    endShape();



}

This simple looking black and white drawing with hypotrochoids attracted me more than other colorful tries in many reasons. First of all, the first impression is very wild, and simple. With the mouse cursor starting at the middle of the canvas (240, 240), the canvas starts black, and creates white spaces as the mouse moves. The fun part is, the background will never be pitch black once you move your mouse.

The mouse movement is sensitive, the drawing can change in many ways according to the user control. Although it can’t go full black unless refreshing the page, the drawing can go all-white which can reset the drawing.

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.