Project 04-String Art

Dave String

//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project-04
//String Art
var slider; //slider variable
var n; // output variable for sequence
var spix; //x coordinate variable for spiral sequence 
var spiy; //y coordinate variable for spiral sequence
var nn; //simple sequence variable to connect with spiral
var Svalue;  //variable for slider value
function setup() {
    createCanvas(400, 300); // set canvas size to 400,300
    slider = createSlider(0,170,0); // slider that value goes from 0,170 and start value with 0
}
function draw() {
    Svalue = slider.value(); //return slider value to Svalue
    background(0); //set background color to black
    //sequence();
    
    stroke(255,255,255,70);//set color to be white and Alpha value of 100
    strokeWeight(1) // stroke weight to be 1 pix. 
    sequence(); //execute simple sequence function. 
    Bloom(); // execute Bloom function
}



function sequence(){ //simple arithmatic sequence
    for (var i =0; i <=Svalue; i+=5){ // increment of i in 5s if smaller than slider
        n = 2*i+1; //out put equation

        line(0,height/2+n,n*3,height); // sequence and inverse connected on left bottom corner 
        line(width,height/2+n,width-n*3,height); //Same on right bottom corner
        line(0,height/2-n,n*3,0); //same on left top corner
        line(width,height/2-n,width-n*3,0); //same on right top corner. 
    }
}
function Bloom(){
    for (var j = 0; j <=Svalue/100; j+= 0.1){// slider value divided by 100 to fit trigonomatric values. 
        //based on r(t) = exp(t) in polar equation
        spix = exp(j)*cos(j); //x coordinate based on cos with exponaential value
        spiy = exp(j)*sin(j); //y coordeinate based on sine with exponential value
        //top and bottom of flower
        line(width/2+spix*20,height/2+spiy*20,width/2-spix*20,height/2+spiy); //connecting lines to each points generated
        line(width/2-spix*20,height/2-spiy*20,width/2+spix*20,height/2-spiy);
        line(width/2-spix*20,height/2+spiy*20,width/2+spix*20,height/2-spiy);
        line(width/2+spix*20,height/2-spiy*20,width/2-spix*20,height/2+spiy);
        //left and right of flower
        line(width/2+spiy*20,height/2+spix*20,width/2-spiy*20,height/2+spix);
        line(width/2-spiy*20,height/2-spix*20,width/2+spiy*20,height/2-spix);
        line(width/2-spiy*20,height/2+spix*20,width/2+spiy*20,height/2-spix);
        line(width/2+spiy*20,height/2-spix*20,width/2-spiy*20,height/2+spix);
        for (var w = 0; w <=Svalue;w+=60){ //connecting the polar equation with linear sequence
            nn = 2*w+1; //same sequence as above
            line(width/2+spiy*20,height/2+spix*20,width,height/2+nn); // connecting sequence with points on same quadrant
            line(width/2-spiy*20,height/2+spix*20,0,height/2+nn);   //left borrom corner
            line(width/2+spiy*20,height/2-spix*20,0,height/2-nn);   // left top corner
            line(width/2-spiy*20,height/2-spix*20,width,height/2-nn); // right top corner
        }
    }
}

For this project, I wanted to look into other equations rather than simple arithmetic equations. I tried to incorporate the polar equation (spiral,r(t) = exp(t))to generate interesting shape and line movements. I added the slider so user can interact with the shape and see the process of generating.