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.