/*
* Angela Lee
* Section E
* ahl2@andrew.cmu.edu
* Project 4 String Art
*/
function setup() {
createCanvas(400, 300);
background("black");
}
function draw() {
spacing1 = 40;
spacing2 = 10;
spacing3 = 5;
red = mouseX;
green = mouseX;
blue = mouseY
// LOOP FOR OUTERMOST STRINGS
// the strings span the boundary of the canvas
for(var a = 0; a <= 400; a += spacing1){
// left bottom strings
stroke(red, 0, 162);
line(0, a, a, 300);
// right top strings
stroke(153, green, 0);
line(400, a, a, 0);
}
// LOOP FOR GREEN, BLUE STRINGS
// the strings are contained by the outermost strings
for(var b = 0; b <= 200; b += spacing2){
stroke(0, 187, mouseY);
// left top strings
line(100 + b, 50, 100, 250 - b);
// right top strings
line(100 + b, 250, 300, 250 - b);
}
// LOOP FOR INNERMOST SQUARE
// the strings are contained within a box
// the box specs: rect(150, 100, 100, 100)
for(var a = 0; a <= 100; a += spacing3){
// bottom left
stroke(red, green, 162);
line(150, 100 + a, 150 + a, 200);
// top left
stroke(150, green, blue);
line(150 + a, 100, 150, 200 - a);
// top right
stroke(red, 150, blue);
line(150 + a, 100, 250, 100 + a);
// bottom right
stroke(red, 100, blue);
line(250, 100 + a, 250 - a, 200);
}
}
For this project, I wanted to make a composition that had a fixed form but some element that was controlled by the user. I stuck to a strict geometry that relied on square and rectangle boundaries but allowed the colors of the strings to change based on the users’ mouse position.