Project 4: String Art

string art cb
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 200;

function setup() {
    createCanvas(400, 300);
    background(200);
    line(0, 0, 0, 300);
    line(0, 300, 400, 300);
    dx1 = (0-0)/numLines;
    dy1 = (300-0)/numLines;
    dx2 = (400-0)/numLines;
    dy2 = (300-300)/numLines;
}

function draw() {
    strokeWeight(.5);
    background(0);

    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;

    for (var i = 0; i <= numLines; i += 1) {

        //bottom left corner
        stroke(mouseX, mouseY, 100);
        line(x1, y1, x2, y2);
        //top right corner
        line(x1 + 400, y1, x2, y2 - 300);
        //moving lines Y
        stroke(mouseY, 100, mouseX);
        line(i*4, mouseY, 400, 0);
        line(0, 300, i*4, mouseY);
        line(i*4, mouseY, 0, 0);
        line(400, 300, i*4, mouseY);
        //moving lines X
        stroke(mouseX, 100, mouseY);
        line(mouseX, i*3, 400, 0);
        line(0, 300, mouseX, i*3);
        line(mouseX, i*3, 0, 0);
        line(400, 300, mouseX, i*3);
      
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}

My approach to this project involved a lot of trial and error but I had fun experimenting with different parts of the code and seeing what I could make. I wanted to make something interactive, so I made the colors change and the lines follow the mouse position.

Leave a Reply