Project-04-String-Art-Veronica

sketch

/*
Veronica Wang
Section B
yiruiw@andrew.cmu.edu
Project-04
*/

var r = 125; //radius of circle
var inc = 100; //increments on the circle
var stepDif = inc;//each step increases one increment
var stepNum = 0;//step number count


function setup() {
    createCanvas(400, 300);
    background(0);
}

function draw() {

    var centerX = width / 2; //center x of circle
    var centerY = height / 2; //center y of circle
    var step = 2 * PI / inc; //increment size

    //main ellipse to be divided
    stroke(120);
    strokeWeight(0.5);
    noFill();
    ellipse(centerX, centerY, r * 2, r * 2);
    

    for (i = 0; i < inc / 2; i += 1){
        var currNum = stepNum; //current iteration number
        //x and y coordinates of starting points equally divided increments along ellipse
        var x1 = centerX + r * cos(step * currNum); 
        var y1 = centerY - r * sin(step * currNum);
        //for every increment in starting point,
        //step two increaments for destination point 
        var nextNum = (inc / 2 + 2 * (currNum)) % inc; 
        //x and y coordinates of the destination points on the ellipse
        var x2 = centerX + r * cos(step * nextNum);
        var y2 = centerY - r * sin(step * nextNum);
        //step number increase
        stepNum += 1;
        stroke(220, 20, 60);
        line(x1, y1, x2, y2);
    }

    var offset = 0; //offset to create layers
    var repeats = 7; //how many layers
    var op = 100; //opacity of layer color to create depth

    for (i = 0; i < repeats; i += 1) {
        op -= i * 4; //opacity decrease
        stepNum = 0; //step number
        offset += 8; //offset by 8 increments each time
        
        //same as the for loop above
        for (j = 0; j < inc / 2; j += 1){ 
            var currNum = stepNum + offset;
            var x1 = centerX + r * cos(step * currNum);
            var y1 = centerY - r * sin(step * currNum);
            var nextNum = ((inc / 2 + 2 * (currNum - offset)) + offset) % inc;
            var x2 = centerX + r * cos(step * nextNum);
            var y2 = centerY - r * sin(step * nextNum);
            stepNum += 1;
            stroke(220, 20, 60, op);
            line(x1, y1, x2, y2);
        }
    }

    noLoop();

}

In this project I looked up string art and found inspiration from Demir String art. I decided to make a project similar to this art piece they made:

It took me some time to figure out how to extract points from a circle, as well as stepping in different increments for the two ends of a line. But I am happy with the output and had fun doing this project.