Project 07 – Curves

Using a rose curve function I created two overlapping shapes. Moving the cursor to the left side of the canvas decreases the petal count and changes its rotation direction to counterclockwise; to the left, the petal count increases, and the rotation direction is clockwise. Clicking the canvas will pause its motion.

sketch
// Emily Franco
// Section C
// efranco@andrew.cmu.edu
// Project-07
 
//num of petals
var n=3;

//track move clickes
var state = 0;
//tracks when petals function runs
var petalState =0;

//store x and y cordinates of petal
var petalPointX = [];
var petalPointY = [];

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

function draw() { 
    background (0);

    //move origin to center canvas
    translate(width/2,height/2);

    //outter rose
    fill(167,1187,232,120);
    rose(n,200,5);

    //inner rose
    fill(252,219,3,120);
    rose(-n,120,3);


    petals();
} 

//only call petals mouse house is clicked    
function mousePressed(){
    if(petalState == 0){
        state = 1;
    }

    if(petalState == 1){
        state = 0;
        petalState = 0;
    }
}

//make rose shape
function rose(n,radius,rate){
    var x; 
    var y;
    var newRad;
    //make rose shape
    beginShape();
    for (var a=0; a<=360; a++){
        newRad = radius*sin(n*radians(a));
        x = newRad*cos(radians(a)); 
        y = newRad*sin(radians(a)); 
        petalPointX[a] = x;
        petalPointY[a] = y;
        vertex (x,y);
    }
    endShape();
    petalLines(rate);
}

//draw lines at determine increments from center to petal coordinate
function petalLines(rate){
    stroke("black");
    for(var i=0; i<=petalPointX.length;i = i+rate){
        line (petalPointX[i],petalPointY[i],0,0);
    }
            
}

//add or subtract petal depending on mouse location
function petals(){
    if(state==1){
        if(mouseX>=width/2){
             n=n+0.01;
        }if(mouseX<width/2){
             n=n-0.01;
        }
        
        petalState=1;
    }   
}

Leave a Reply