# Project 04-String Art

``````//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.