jiaxinw-sectionB-Project 4-String Art

sketch

function setup() {
    createCanvas(300, 400);
    background(20);

    //left white crossed lines
    stroke(255);
    var yl = height/4*3;
    var ym1 = height/8*5;

    for(var i=0; i < 15; i++){
        line(0, yl, width/2, ym1);
        yl *=0.97;
        ym1 *= 1.02+mouseX;
    };

    //right white crossed lines
    var yr = height/4*3;
    var ym2 = height/8*5;

    for(var i=0; i < 15; i++){
        line(width, yr, width/2, ym2);
        yr *=0.97;
        ym2 *= 1.02;
    };



    //left top lines 
    var x1 = 0;
    var y1 = height/2;

    for (var i=0; i < 15; i++){
        stroke(251,63,65);
        line(x1, 0, 0, y1);
        x1 += 15;
        y1 -= 10;
    };

    // right top lines 
    var x2 = width;
    var y2 = height/2

    for (var i=0; i < 15; i++){
        stroke(18,187,255);
        line(x2, 0, width, y2)
        x2 -= 15;
        y2 -= 10;
    };

    // right bottom lines
    var x3 = width;
    var y3 = height/2;

    for(var i=0; i < 15; i++){
        stroke(255, 242, 0);
        line(x3, height, width, y3)
        x3 -= 15;
        y3 += 10;
    };

    // left bottom lines
    var x4 = 0;
    var y4 = height/2;

    for(var i=0; i < 15; i++){
        stroke(0,255,217);
        line(x4, height, 0, y4);
        x4 += 15;
        y4 += 10;
    }

    //upper left grey crossed triangle
    var x5 = width/4;
    var y5 = height/2;

    stroke(100);
    line(x5, y5, width/2, y5)
    line(x5, y5, x5+(width/2-x5)/2, y5- sqrt(3)/2*(width/2-x5));
    
    for(var i=0; i < 8; i++){
        line(x5+5, y5, width/4+(width/2-x5)/2, y5- sqrt(3)/2*(width/2-x5));
        x5 += 10;
    }

    //upper purple triangle
    var x6 = width/4*3;
    var y6 = height/2;

    line(width/2, y6, x6, y6)
    line(x6, y6, width/4+(width/4)/2, y5- sqrt(3)/2*width/4);

    for(var i=0; i < 8; i++){
        line(x6-5, y6, width/4+(width/4)/2, y5- sqrt(3)/2*width/4);
        x6 -= 10;
    }

    //lower purple triangle
    var x7 = width/4;
    var y7 = height/2;

    stroke(156,0,255);

    for(var i=0; i < 31; i++){
        line (x7, y7, width/2, height/4*3);
        x7 += 5;
    }

    var x8 = width/4;
    var y8 = height/2;

    for(var i=0; i < 31; i++){
        line (x8, y8, width/2, height/4);
        x8 += 5;
    };

    
}

function draw() {
    
}

I tried to create a common usual string art pattern like this at first :

Later, I started to try to create a concrete shape in the middle of my canvas. During this project, I just had fun with combining different sequences of lines.