Mihika Bansal – Project – 07 – Curves

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 5


function setup() {
    createCanvas(480, 480);
}
   
  
function draw() {
    
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    background(0, 0, 0, 75); 

    drawHypotrochoid(); //color one
    drawBlackHypotrochoid(); //black one 
    drawBlackHypotrochoid2(); //black one
    drawCenter(); //center flower ellipse 
    frameRate(500); 
     
}

function drawHypotrochoid(){

    push(); 
    translate(width / 2, height / 2); 
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    var rad1 = 230; //radius and parameters 
 
    var r = my * 0.4; //color variables
    var g = 100; 
    var b = mx * 0.4; 

    noFill();
    stroke(r, g, b); 
    strokeWeight(4); 

    var a1 = map(mx, 0, width, 0, 20);
    var b1 = map(my, 0, height, 0, 1); 

    beginShape(); 
    rotate(radians(angle));

    for(var i = 0; i < 360; i += 5){
        var angle = map(i, 0, 360, 0, 360); 

        var x = (a1 - b1) * cos(angle) + rad1 * cos((a1 - b1 * angle)); //equations of math functions
        var y = (a1 - b1) * sin(angle) - rad1 * sin((a1 - b1 * angle));

        curveVertex(x, y); //drawing points 

    }

    endShape(); 
    pop(); 

}

function drawBlackHypotrochoid(){

    push(); 
    translate(width / 2, height / 2); 
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    var rad1 = 380; //radius and parameters 
 

    noFill();
    stroke("black"); //overlapping the first function with a black one so that it cuts through it 
    strokeWeight(10); 

    var a1 = map(mx, 0, width, 0, 25);
    var b1 = map(my, 0, height, 0, 5); 

    beginShape(); 
    rotate(radians(angle));

    for(var i = 0; i < 360; i += 5){ //determines numnber of times loop runs 
        var angle = map(i, 0, 360, 0, 360); 

        var x = (a1 - b1) * cos(angle) + rad1 * cos((a1 - b1 * angle)); //equations of math functions
        var y = (a1 - b1) * sin(angle) - rad1 * sin((a1 - b1 * angle));

        curveVertex(x, y); //drawing points 

    }

    endShape(); 
    pop(); 

}
function drawBlackHypotrochoid2(){

    push(); 
    translate(width / 2, height / 2); 
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    var rad1 = 300; //radius and parameters 
 

    noFill();
    stroke("black"); //overlapping the first function with a black one so that it cuts through it 
    strokeWeight(10); 

    var a1 = map(my, 0, width, 0, 30);
    var b1 = map(mx, 0, height, 0, 2); 

    beginShape(); 
    rotate(radians(angle));

    for(var i = 0; i < 360; i += 5){ //determines numnber of times loop runs 
        var angle = map(i, 0, 360, 0, 360); 

        var x = (a1 - b1) * cos(angle) + rad1 * cos((a1 - b1 * angle)); //equations of math functions
        var y = (a1 - b1) * sin(angle) - rad1 * sin((a1 - b1 * angle));

        curveVertex(x, y); //drawing points 

    }

    endShape(); 
    pop(); 

}

function drawCenter(){
    translate(width / 2, height / 2);
    noFill();
    
    var mx = constrain(mouseX, 0, 480); // define constrain variables
    var my = constrain(mouseY, 0, 480);

    var angle = map(mx, 0, width, 0, 360);// define draw parameters
    var a2 = 70 + (.3 * mx);
    var b2 = 70 + (.3 * mx);

    var r = my * 0.5; //color variables
    var g = 50; 
    var b = mx * 0.5; 

    // define stroke
    strokeWeight(1);
    stroke(r, g, b);
    // define shape parameters
    beginShape();
    rotate(radians(angle));
    for (var t = 0; t < 160; t += 2.5){

        var x = a2 * (cos(t)); //equation function 
        var y = b2 * (sin(t));
        curveVertex(x,y);
        }
    endShape();
}

This project was quite confusing to grasp at first, but once I had an idea of what I wanted to do, I was able to explore the functions in an interesting manner. I spent a good amount of time playing around with my numbers in my code to get interesting interactions with the way that the curve moves, and forms. I was also able to layer curves in a way that created fun patterns. Here are some screen shots from the project at different states of the mouse location.

• 

• 

• 

•