thlai-Project-04-String-Art

I don’t know if this is the way to do it, but I set the gradient background by basically using a ‘for’ loop of strings and changing the colors. Als0, when the drawing resets, I noticed a blink, but I have not been able to figure out how to get rid of that.

thlai-project-04

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 04 - String Art

var t;

function setup() {
    t =1;
	createCanvas(640, 480);
    strokeWeight(1/4);
    noFill();
    angleMode(DEGREES);
}


// when triangle rotates all the way, reset
function reset(t){
    if (t/100 > 2.4) {
        setup();
    }
}


function draw() {
    t++;

    // set gradient background
    for (var i=0; i < 1000; i++) {
        stroke(20+i/2, 80+i/4, 90+i/4);
        line(0, 0+i, width, 0+i,);
    }
    
    // make 99 "strings"
    var num = 55;
    for (var i = 0; i < num; i++){
        // gradient stroke color
        stroke(i*5, i*7, i*11);

        var x1 = 0;
        var y1 = i*height/num;
        var x2 = i*width/num;
        var y2 = height;

        // draw strings
        line(x1, y1, x2, y2); // bottom left
        line(x2, 0, x1, height-y1); // top left
        line(width, height-y1, x2, y2); // bottom
        line(x2, 0, width, y1); // top right
    }

    push();

        var x1 = 0;
        var y1 = -138;
        var x2 = -120;
        var y2 = 70;
        var x3 = 120;
        var y3 = 70;

        var fade = 100;
        fade = 255 - t;
        stroke(255, 255, 255, fade); // triangle fades
        translate(width/2, height/2);
        triangle(x1, y1, x2, y2, x3, y3);

    for (var i = 0; i < 50; i++){ // center triangle
        rotate((t/100));
        triangle(x1, y1, x2, y2, x3, y3);
    }
    pop();

    print(t/100);
    reset(t);

}