Project 04: String Art

sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;

var numLines = 40;

function makeStringArt(x1, y1, x2, y2, x3, y3, x4, y4) { //function to make string art from points of two lines
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    dx1 = (x2-x1)/numLines; //changes x value of first point
    dy1 = (y2-y1)/numLines; //changes y value of first point
    dx2 = (x4-x3)/numLines; //changes x value of second point
    dy2 = (y4-y3)/numLines; //changes y value of second point

    //initial points
    var firstx = x1; 
    var firsty = y1;
    var secondx = x3;
    var secondy = y3;

    //draws lines and adjusts points for next line
    for (var i = 0; i <= numLines; i += 1) {
        line(firstx, firsty, secondx, secondy);
        firstx += dx1;
        firsty += dy1;
        secondx += dx2;
        secondy += dy2;
    }
}

function setup() {
    createCanvas(400, 400);
    background(218, 190, 229); //purple

}

function draw() {
    stroke(255); //white: corner shapes
    makeStringArt(0,0,200,0,0,400,0,0);
    makeStringArt(200,400,400,400,400,400,400,0);
    //quarters of the star shape
    stroke(166, 155, 52); //gold
    makeStringArt(200,0,200,200,200,200,380,200);
    stroke(0, 142, 219) //blue
    makeStringArt(200,400,200,200,200,200,380,200);
    stroke(166, 155, 52); //gold
    makeStringArt(200,400,200,200,200,200,20,200);
    stroke(0, 142, 219) //blue
    makeStringArt(200,0,200,200,200,200,20,200);

    noLoop();
}

Leave a Reply