Category: Section B

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-07
var x;
var y; 
var bR; // big radius outside 
var r; // smaller radius inside 
var d; // distance from the center of the interior circle 
var mx; // mouseX
var my; // mouseY 

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

function draw() {
    background(255,0,0);
    translate(width/2, height/2);
    noFill();
    mx = constrain(mouseX,0, width);
// draw a Hypotrochoid with ellipses 
        strokeWeight(1);
        stroke(255);
        for (var a = 0; a < 2*TWO_PI; a ++){ // a is angle 
            bR = 50; // big radius 
            r = map( mx, 0, width, 10, 65 ); // small radius
            d = map( mx, 0, width, 10, 100 ); // distance 
            x = (bR-r)*cos(a) + d*cos( ((bR-r)/r)*a ) ;
            y = (bR-r)*sin(a) - d*sin( ((bR-r)/r)*a ) ;
        ellipse(0,0,x*5,y*7);
        }

// draw Nephroid
            strokeWeight(0.25);
            stroke(255);
            for (var a = 0; a < 10*TWO_PI; a ++){ // a is angle 
                bR = map( mx, 0, width, 0, 130 ); // big radius  
                x = bR*((3*cos(a)) -  (cos(3*a))) ;
                y = bR*((3*sin(a)) -  (sin(3*a))) ;
            ellipse(0,0,x*30,y*15);
            }

// draw Hypotrochoid 
    beginShape();
        strokeWeight(.75);
        stroke(255);
        for (var a = 0; a < 25*TWO_PI; a ++){ // a is angle 
            bR = 200;   // big radius 
            r = map( mx, 0, width, 10, 130 ); // small radius
            d = map( mx, 0, width, 10, 300 ); // distance 
            x = (bR-r)*cos(a) + d*cos( ((bR-r)/r)*a ) ;
            y = (bR-r)*sin(a) - d*sin( ((bR-r)/r)*a ) ;
        vertex(x,y);
        }
    endShape();

}

I first went to WolframMathworld website too look for shapes that I found interesting. I eventually decided to use the equations for hypotrochoid and nephroid since I thought the combination of roulette and plane curves would make a good contrast.  Although the curves in the final iteration didn’t turn out as I thought, I thought that the shapes were still interesting.

These are the process images before I adjusted the limits in the for loops and the parameters of vertex & shapes. If I could change anything from the final design, I would adjust the map()  more so that the movement would look more organized.

sketch

//Kade Stewart
//Section B
//kades@andrew.cmu.edu
//Project-07


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

var t = 10;
var x;
var y;
var col = 0;

function mouseClicked() {
    //when the mouse is clicked, change the color scheme to 1 of 2 options
    col = (1 + col) % 2;
}

function draw() {

    //fills the background a diff color depending on the state
    if (col == 0) {
        background(0, 59, 26);
    } else {
        background(18, 0, 58);
    }

    //sets variables in the equations to the mouseX and mouseY
    var a = mouseX;

    noStroke();
    fill(0);

    //this makes the coordinate reference frame in the middle of the screen
    push();
    translate(width/2, height/2);

    for (j = 0; j < 40; j++) {
        beginShape();
        noFill();


        if (col == 0) {
            //uses the green color scheme
            if (j % 2 == 0) {
                stroke(255, 255, 255);
            } else {
                stroke(190, 249, 156);
            }
        } else {
            //uses the blue and orange color scheme
            if (j % 2 == 0) {
                stroke(245, 134, 124);
            } else {
                stroke(253, 218, 183);
            }
        }

        //draws each astroid curve with a number of points determined by the mouseY
        for (i = 0; i < mouseY; i++) {
            x = (a - (width/2)*j) * cos(i) * cos(i) * cos(i);
            y = (a - (width/2)*j) * sin(i) * sin(i) * sin(i);
            //places the point to be drawn to
            vertex(x,y);
        }
        endShape();
    }
    pop();

}

I drew the astroid curve multiple times so that they could seemingly fold in and out of each other. This is manipulated by where the mouse is on the horizontal axis. I initially had the mouse’s y-height affecting the center of the curves, but it gave the user too much to vary in the curves. Now the mouse’s y-height affects the fidelity of each curve. Furthermore, clicking changes the color scheme between 2 options, just for some extra fun.

lingfanj-07

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-07



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

function draw(){
    background(80);
    //tranlate the center of the canvas
    translate(240, 240);
    stroke(255);
    strokeWeight(0.5);
    Hypotrochoid();
}

function Hypotrochoid(){
    //x and y defines the positions of points
    var x;
    var y;
    //use map and constrain to keep the shapes inside the canvas
    //Also, use mouseX and mouseY to change all the variables inside the equation
    var xbound = constrain(mouseX, 0, 480);
    var a = map(xbound, 0, 480, 0, 130);
    var b = map(xbound, 0, 480, 0, 60);
    var h = constrain(mouseY, 0, 270);
    noFill();
    //Hypotrochoid
    beginShape();
    for (var i = 0; i < 360; i++) {
        x = (a - b) * cos(i) + h * cos((a - b) / b * i);
        y = (a - b) * sin(i) - h * sin((a - b) / b * i);
        vertex(x, y);
    };
    endShape();

}

I think this is an easy but super fun project. Before working on this project, I have seen projects using the spirograph technique. I was very interested in how math was a natural art. However, I am surprised by how much I could do just using mathematical curves and p5.js.

This project also became more interesting adding the interactive aspect. By doing this project, I realized that sometimes the artist does not need to have a clear vision about how the final form looks at first. Design within the process can also be a great way to have surprising results.

sketch

/*Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-07 */

var numLines = 20;
var angle = 0;
var angleX;
var clickCount = 1;
var circleW;
var circleC;

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

function draw() {
    background(0);
    for(var i = 0; i < numLines; i++){
        noFill();
        strokeWeight(clickCount);
        push();
        angleX = map(mouseX, 0, 480, 0, 90); //altering how slow or fast ellipses rotate 
        circleC = map(mouseX, 0, 480, 20, 255); //altering stroke color from black to white
        numLines = map(mouseY, 0, 480, 5, 50); // altering amount of lines drawn
        circleW = map(mouseY, 0, 480, 200, 50); //altering ellipse width
        stroke(circleC);
        translate(width / 2, height / 2);
        rotate(radians(angle));
        ellipseMode(CENTER);
        ellipse(0, 0, circleW, 400);
        pop();
        angle += angleX;

    }
}

function mouseClicked(){
    //increases strokeWeight parameter based on mouse clicks
    clickCount++;
}

function keyPressed() {
    clickCount = 1;
}

For this project, I was inspired by the spirograph curves. I created a set of ellipses that change based on mouseX and mouseY parameters. The mouseX changes the color of the stroke and the angle of rotation for the ellipses. The mouseY changes how many curves are drawn and the width of the curves. Additionally, when the mouse is clicked the strokeWeight will increase. When any key is pressed, the strokeWeight defaults back to its original value.