Kyle Leve-Project-07-Curves

sketch

// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-07-Curves

var a = 40;
var b = 40;

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

function draw() {
    background(255);
    translate(width/2, height/2); // Sets all the curves to the center of the canvas
    drawAstroid1(); // Draws first curve
    drawAstroid2(); // Draws second curve
    drawAstroid3(); // Draws third curve
    drawAstroid4(); // Draws fourth curve
    if (mouseX >= 0 & mouseX <= width/2) { // Makes silver side shrink/appear and red side grow/disappear
        a += -0.1 * mouseY;
        b += 0.1 * mouseY;
    }
    if (mouseX > width/2 & mouseX <= width) { // Makes red side shrink/appear and silver side grow/disappear
        a += 0.1 * mouseY;
        b += -0.1 * mouseY;
    }
}

function drawAstroid1() { // First curve
    beginShape();
    fill('red');
    for(var i = 0; i < 240 * TWO_PI; i++) { // Draws overlapping vertices to make curves
        stroke(0);
        vertex(500 * (cos(i)**a), 500 * (sin(i)**a));
    }
    endShape(); 
}

function drawAstroid2() { // Second curve
    beginShape();
    fill('silver');
    for(var i = 0; i < 240 * TWO_PI; i++) { // Draws overlapping vertices to make curves
        stroke(0);
        vertex(-500 * (cos(i)**b), 500 * (sin(i)**b));
    }
    endShape(); 
}
function drawAstroid3() { // Third curve
    beginShape();
    fill('red');
    for(var i = 0; i < 240 * TWO_PI; i++) { // Draws overlapping vertices to make curves
        stroke(0);
        vertex(500 * (cos(i)**a), -500 * (sin(i)**a));
    }
    endShape(); 
}
function drawAstroid4() { // Fourth curve
    beginShape();
    fill('silver');
    for(var i = 0; i < 240 * TWO_PI; i++) { // Draws overlapping vertices to make curves
        stroke(0);
        vertex(-500 * (cos(i)**b), -500 * (sin(i)**b));
    }
    endShape(); 
}

I found this project to be really interesting because I found myself using functions that I had not used in the past. I decided in this project that I wanted to have contrasting sides where when something was happening to one side, the opposite was happening to the other. This is what ended up happening with the silver and red sides of the canvas. When one side expands, the other shrinks and vice versa. This is due to both mouseX and mouseY however each one has their own distinct properties. MouseX controls how the two sides behave while mouseY controls the speed at which they happen. This project helped me better understand how to have separate entities behave in similar yet contrary ways.