Rachel Shin – Project 04 – String Art

reshin-string art

//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.