Alec Albright – Project 04 – String Art

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 04


var x1StepSize = 5;
var y1StepSize = 0;
var x2StepSize = 0;
var y2StepSize = -4;
var x1 = 0;
var y1 = 150;
var x2 = 200;
var y2 = 150;


function setup() {
    createCanvas(400, 300);
    background("black");
}
 
function draw() {
    // top left 
    makeCurve("red");

    // top right
    x1 = 400;
    y1 = 150;
    x2 = 200;
    y2 = 150;
    x1StepSize = -5;
    y2StepSize = -4;
    makeCurve("limegreen");

    // bottom left
    x1 = 0;
    y1 = 150;
    x2 = 200;
    y2 = 150;
    x1StepSize = 5;
    y2StepSize = 4;
    makeCurve("yellow");

    // bottom right
    x1 = 400;
    y1 = 150;
    x2 = 200;
    y2 = 150;
    x1StepSize = -5;
    y2StepSize = 4;
    makeCurve("purple");

    // bottom left, top left
    x1 = 0;
    y1 = 225;
    x2 = 100;
    y2 = 225;
    x1StepSize = 2.5;
    y2StepSize = -1.75;
    makeCurve("red");

    // bottom left, bottom left
    x1 = 0;
    y1 = 225;
    x2 = 100;
    y2 = 225;
    x1StepSize = 2.5;
    y2StepSize = 1.75;
    makeCurve("yellow");

    // bottom left, top right
    x1 = 200;
    y1 = 225;
    x2 = 100;
    y2 = 225;
    x1StepSize = -2.5;
    y2StepSize = -1.75;
    makeCurve("limegreen");

    // bottom left, bottom right
    x1 = 200;
    y1 = 225;
    x2 = 100;
    y2 = 225;
    x1StepSize = -2.5;
    y2StepSize = 1.75;
    makeCurve("purple");

    // top left, top left
    x1 = 0;
    y1 = 75;
    x2 = 100;
    y2 = 75;
    x1StepSize = 2.5;
    y2StepSize = -1.75;
    makeCurve("red");

    // top left, bottom left
    x1 = 0;
    y1 = 75;
    x2 = 100;
    y2 = 75;
    x1StepSize = 2.5;
    y2StepSize = 1.75;
    makeCurve("yellow");

    // top left, top right
    x1 = 200;
    y1 = 75;
    x2 = 100;
    y2 = 75;
    x1StepSize = -2.5;
    y2StepSize = -1.75;
    makeCurve("limegreen");

    // top left, bottom right
    x1 = 200;
    y1 = 75;
    x2 = 100;
    y2 = 75;
    x1StepSize = -2.5;
    y2StepSize = 1.75;
    makeCurve("purple");

    // top right, top left
    x1 = 200;
    y1 = 75;
    x2 = 300;
    y2 = 75;
    x1StepSize = 2.5;
    y2StepSize = -1.75;
    makeCurve("red");

    // top right, bottom left
    x1 = 200;
    y1 = 75;
    x2 = 300;
    y2 = 75;
    x1StepSize = 2.5;
    y2StepSize = 1.75;
    makeCurve("yellow");

    // top right, top right
    x1 = 400;
    y1 = 75;
    x2 = 300;
    y2 = 75;
    x1StepSize = -2.5;
    y2StepSize = -1.75;
    makeCurve("limegreen");

    // top right, bottom right
    x1 = 400;
    y1 = 75;
    x2 = 300;
    y2 = 75;
    x1StepSize = -2.5;
    y2StepSize = 1.75;
    makeCurve("purple");

    // bottom right, top left
    x1 = 200;
    y1 = 225;
    x2 = 300;
    y2 = 225;
    x1StepSize = 2.5;
    y2StepSize = -1.75;
    makeCurve("red");

    // bottom right, bottom left
    x1 = 200;
    y1 = 225;
    x2 = 300;
    y2 = 225;
    x1StepSize = 2.5;
    y2StepSize = 1.75;
    makeCurve("yellow");

    // bottom right, top right
    x1 = 400;
    y1 = 225;
    x2 = 300;
    y2 = 225;
    x1StepSize = -2.5;
    y2StepSize = -1.75;
    makeCurve("limegreen");

    // bottom right, bottom right
    x1 = 400;
    y1 = 225;
    x2 = 300;
    y2 = 225;
    x1StepSize = -2.5;
    y2StepSize = 1.75;
    makeCurve("purple");
}

// makes a curve based on any color
// x1, y1, x2, y2, and step sizes must be predefined
function makeCurve(color){
    for (i = 0; i < 41; i ++) {
        stroke(color);
        line(x1, y1, x2, y2);
        x1 += x1StepSize;
        y1 += y1StepSize;
        x2 += x2StepSize;
        y2 += y2StepSize;
        noLoop();
    }
}

Throughout my process of creating this visualization, I had to get more familiar with how exactly the string art is generated in terms of the size of steps in the sequence. Once I got a good feel for that, I was able to utilize my knowledge of the coordinate system to make the same image in a variety of interesting places.