//Rachel Shin
//reshin
//15-104 Section B
// Project - 04 String Art
var shift = 10; // changing the lines position from one another (increments)
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
function setup() {
createCanvas(400, 300);
background(0);
}
function draw() {
// left middle to right middle: orange curves that cover canvas based on mouseX and e value
for (var e = 0; e < width; e+= shift){
strokeWeight(0.5);
stroke(245, 202, 147);
line(mouseX, 300-e, e-100, e*0.5);
}
//bottom left to top right: pink rays
for (var c = 0; c < width; c += shift){
strokeWeight(0.5);
stroke(84, 77, 84);
line(0, c-10, width, c*0.5);
}
let leftBound = 100;
let rightBound = 300;
let bound1 = constrain(mouseX, leftBound, rightBound);
//top middle to bottom middle: white rays to form off white rectangle with mouseX movement
for (var d = 0; d < height; d += shift){
strokeWeight(0.5);
stroke(225);
line(bound1, mouseY, height/2, d*0.5);
}
//right top of canvas: green curves
for (var a = 0; a < height; a += shift){
strokeWeight(0.5);
stroke(168, 201, 157);
line(a, 0, width, a*0.5);
}
//top left of canvas: blue rays
for (var b = 0; b < width; b += shift){
strokeWeight(0.5);
stroke(157, 174, 201);
line(0, 0, height, b*0.5);
}}
For this project, I wanted to implement a variety of strings that would, while visually very different, would produce a cohesive visual. I first arranged the code by creating a light green web-like string art at the top right corner and brought the rest of the art counter-clockwise. I then chose to push the off-white string art to the back to bring more attention to the colored lines. I also wanted to employ mouseX and mouseY and constrain to experiment more. I found it very interesting to layer strings on top of each other to create more dimensional art.