## Zee Salman- Project 04 String Art

Click on the art to take away night mode.

``````//Zee Salman
//SECTION E

function setup() {
createCanvas(600,300);

}

function draw(){

if (mouseIsPressed) {
background('pink')
for (i = 0; i <= 2000; i+=30){
//blue horizantal lines
stroke(0,0,255);
line(i,mouseY, i/2 ,height);
}
for (i = width/2; i <= 2000; i +=20){
stroke(177,89,139);
// bottom right
line(mouseX, 500 - i, i / 2, height/ 2);
// bottom left
line(5 - i, i * .2, 1000-i, mouseY);

}

for (i = 0; i <= 60; i++){
//red vertical lines
stroke(255,0,0);
line(mouseX, i * mouseY,width / 2 ,height/2);
}
}

//night mode
else {
background('black')
for (i = 0; i <= 2000; i+=30){
//white horizantal lines
stroke('white');
line(i,mouseY, i/2 ,height);
}
for (i = width/2; i < 2000; i +=20){
stroke(177,189,100);
// bottom right
line(mouseX, 500 - i, i / 2, height/ 2);
strokeWeight(0.75);
// bottom left
line(5 - i, i * .2, 1000-i, mouseY);

}

for (i = 0; i <= 60; i++){
//green vertical lines
stroke(55,187,10);
line(mouseX, i * mouseY,width / 2 ,height/2);
}

}

}``````

*Grace Day*

While doing this project, I definitely went for random and exploratory lines, it was really fun also I wanted to experiment with movement in many ways so when you hold the mouse it changes color as well as movement from the drag of the mouse.

## Sydney Salamy: Project-04-String-Art

My process started with trying to figure out how to get the strings to “curve” (or have the illusion to curve). After drawing a bunch of hatch marks didn’t work, I studied the photos on the blog of the 7th grade teacher until I understood the pattern. After a bit of experimentation, I was able to get the formula for my for loop. Then I just kept modifying it and adding colors till I was satisfied.

``````    var lx = 20;//width divided by 20
var ly = 15;//height divided by 20

function setup(){
createCanvas(400,300);

}

function draw() {
background(255, 150, 213);

//red heart
fill("red");
noStroke();
ellipse(width/2 - 23, height/2, 50,50);//left heart bulb
ellipse(width/2 + 23, height/2, 50,50);//right heart bulb
triangle((width / 2) - 55,height / 2 + 10, width / 2,(height / 2)
+ 60, (width / 2) + 55,height / 2 + 10);//base of heart

//makes curve on top right
for(var i = 0; i < lx; i += 1){//sets up increment and # of elements
stroke(247, 25, 25);
line(width - lx * i,0, width,height - ly * i);//draws lines
}
//makes curve on top left
for(var j = 0; j < lx; j += 1){//sets up increment and # of elements
stroke(250, 90, 96);
line(0 + lx * j,0, 0,height - ly * j);//draws lines
}
//makes curve on bottom left
for(var t = 0; t < lx; t += 1){//sets up increment and # of elements
stroke(255, 150, 175);
line(width - lx * t,height, 0,height - ly * t);//draws lines
}
//makes second curve on bottom right
for(var z = 0; z < lx; z += 1){//sets up increment and # of elements
stroke(255, 201, 201);
line(height - lx * z,height, 0,height - ly * z);//draws lines
}
//makes second curve on top right
for(var z = 0; z < lx; z += 1){//sets up increment and # of elements
stroke(255, 201, 201);
line(height - lx * z,0, width,height - ly * z);//draws lines
}
}``````

## Aaron Lee – Project 04 – String Art

``````/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-04-String Art
*/

function setup() {
createCanvas(400, 300);
}

function draw() {

background( mouseX, mouseY, 100);//backgrond chages color
var stepx = 10;
var stepy = 20;

for(var i = 0; i < 100; i = i + 1) {
line(width - (mouseX * i / 50), 0, width, height - (mouseY * i /50)); //top right curves
line(0, width - (mouseX * i / 50), height - (mouseY * i /50), width); //bottom left curves
}

for(var i = 0; i < 100; i = i + 4) {
line(mouseX, mouseY, i, i / 50);  //top straight lines
line(i / 50, i, mouseX, mouseY);  //bottom straight lines
}
}``````

This project was more of a try and error process. My initial formula was not intriguing as I had wished. Thus I had to constantly make changes until I got this result.

## Claire Yoon-String Art-Project 4

``````/*Claire Yoon
Section E
claireyo@andrew.cmu.edu
Project4
*/

function setup() {
createCanvas(400, 300);
strokeWeight(0.75)
}

function draw() {
background(158,219,229,);
for (var i = 0; i < 40; i ++) {
stroke(255);
strokeWeight(0.75);
// white lines moving in a diamond shape
line(i * 10, mouseY, width / 2, height);
line(width / 2, 0, i * 10, mouseY);
}
//yellow lines
for (var i = 0; i < 400; i += 10){
stroke("yellow");
strokeWeight(0.75);
// bottom right curve
line(mouseX, 250 - i, i / 2, height/ 2);
strokeWeight(0.75);
// bottom left curve
line(0, i / 2, 400 - i, mouseY);
strokeWeight(0.75);

// horizontal lines
stroke("white")
strokeWeight (1.5);
line(mouseX, 300 - i, 200, height - i);
}
}
``````

Compared to the other projects, I found that I was a lot more intuitive with this piece and went through a more trial and error process in order to show visual harmony between the lines.

## Nadia Susanto – Project 04 – String Art

``````/* Nadia Susanto
nsusanto@andrew.cmu.edu
Section B
Project 04 - String Art */

function setup() {
createCanvas(400, 300);

}

function draw() {
background("black");
for (var i = 0; i < 100; i += 5) {
//green line
strokeWeight(1);
stroke(29,151,98);
//negative slope
line(i - 50, -i, i*2, 300);

//blue line
strokeWeight(2);
stroke(28,60,116);
line(0, i + 20, width - i, i*3);

//dark green line
strokeWeight(3);
stroke(1,50,36);
//positive slope
line(0, 350, i + 200, i*2);

//red line
strokeWeight(1);
stroke(189, 3, 0);
//right negative slope
line(i - 50, -i, width, i + 20);
//positive slope
line(100, 400, 400, 50 + i*2);
//left negative slope
line(0, 50 + i*2, i*4, 100 + i*4);

//yellow line
stroke(218,149,1);
strokeWeight(1);
//negative slope
line(350, i - 50, 400, 100 + i*3);
//positive slope
line(300, 400, 400, 100 + i*2);

}

}
``````

I was inspired by the tartan pattern and tried to code it similarly to this picture above. It was a challenging project because it took me a while to get used to it, but overall I am pretty happy with the result. It was fun experimenting with all the different curves and lines that can be a result of just changing a single number or variable.

## Jacky Tian’s Project-04

``````// Yinjie Tian
// yinjiet@andrew.cmu.edu
// Section D
// Project 04

function setup() {
createCanvas(400, 300);
}

function draw() {
background(0)
for (var i = 0; i < 21; i++) {
stroke(255, 0, 0);
line(width/5+i*10, 0, 0, height/2+i*(-5)); //line set 1

stroke(255)
line(0, height/2+i*10, width/3+i*(-5), 0); //line set 2

stroke(0, 255, 0);
line(0, height/3+i*10, width/2+i*(10), height);  //line set 3

stroke(0, 0, 255);
line(width, height/7+i*10, width*3/4+i*(-10), height); //line set 4

stroke(150, 80, 0);
line(width, height/7+i*10, width/4+i*(10), 0); //line set 5

}
}``````

In this project, I created 5 different sets of lines that gradually rotates from the origin edge to the adjacent edge.

## Rachel Shin – Project 04 – 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.

## Project 4 – String Art

``````var x1;
var x2;
var y1;
var y2;
var x1ss;
var y1ss;
var x3;
var x4;
var y3;
var y4;
var y2ss;
var x5;
var y5;

function setup() {
createCanvas(300, 400);
background (0);
x1 = 0;
y1 = 0;
x1ss = 10;
y1ss = 50;
x2 = x1 + x1ss;
y2 = y1 + y1ss;
x3 = 0;
y3 = 400;
x1ss = 10;
y1ss = 50;
x4 = x1 + x1ss;
y4 = y1 + y1ss;
}
function draw() {
noFill();
stroke(255);
strokeWeight(1);
line(x1, y1, x2, y2);
x1ss = x1ss * 1.35;
y1ss = y1ss * 1.3;
x2 = x1 + x1ss;
y2 = y1 + y1ss;
y2ss = -y1ss;

stroke("red");
strokeWeight(1);
line(x3, y3, x4, y4);
x4 = x3 + x1ss;
y4 = y3 + y2ss;

stroke("pink");
strokeWeight(1);
line(x2 - x1, y2 - y1, y2- y1, x2 - x1);

stroke("grey")
line(300 - x2, 400 - x2, x4 / 3, y4 / 3);
}
``````

## Shannon Ha – Project 04 – String Art

``````//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 04 String Art

function setup() {
createCanvas(400, 300);
}

function draw(){
background(175,0,0);
stroke('black')
for (var i = 0; i < width; i+=20) {
stroke(mouseX, mouseY, 210); //upper left corner arc
line(mouseX-i,0,0,i+20);
stroke(28,50,158);
line(mouseX+i,0,0,i-20);
stroke(255, 227, mouseX-10);//lower right corner arc
line(mouseX-i,300,400,i-20);

}
for (var i = 0; i < 500; i+=30) {
push();
translate(width/2, height/2);
rotate(180);
stroke(93,28,158);
line(5,5, mouseX/2, i+1); //purple lines in the back
rotate(90);
line(5,5, mouseX/2, i+1);

pop();
}

ellipseMode(CENTER); //the moving pupil of the eye
noFill();
ellipse(mouseX-200, height/2 ,100,100);
strokeWeight(2);

}
``````

For this project I explored how the lines met to form arcs and curves through iteration and ultimately decided it would be fun to make the string art so that it looks like an eye!

## Austin Garcia – Project 4 – Section C

``````/*		Austin Garcia
Section C
aegarcia@andrew.cmu.edu
Project - 04
*/

function setup() {
createCanvas(600, 600);

}

function draw() {
background(0);

// purple background
stroke(80, 40, 200);
for (var x1 = 0; x1 <= height; x1 += 10) {
for (var y1 = 0; y1 < width; y1 += 4) {
line(x1, y1, 3 * width, 2 * height)
}
}
// white 'god rays'
stroke(255, 255, 255);
for (var x2 = 2; x2 <= height; x2 += 100) {
for (var y2 = 0; y2 < width; y2 += 100) {
line(x2, y2, 0, 0)
}
}
// green wings bot
stroke(30, 300, 55);
for (var x3 = 0; x3 < width / 20; x3 += 60) {
for (var y3 = 0; y3 <= 200; y3 += 4) {
line(x3, y3, width, height)
}
}

stroke(30, 300, 55);
for (var x4 = 0; x4 < width / 20; x4 += 60) {
for (var y4 = 0; y4 <= 200; y4 += 4) {
line(x4, y4, width / 1.5, height / 1.5)
}
}

stroke(30, 300, 55);
for (var x5 = 0; x5 < width / 20; x5 += 60) {
for (var y5 = 0; y5 <= 200; y5 += 4) {
line(x5, y5, width / 2, height / 2)
}
}

stroke(30, 300, 55);
for (var x6 = 0; x6 < width / 20; x6 += 60) {
for (var y6 = 0; y6 <= 200; y6 += 4) {
line(x6, y6, width / 4, height / 4)
}
}

// green wings top
stroke(30, 300, 55);
for (var x7 = 0; x7 < width / 20; x7 += 60) {
for (var y7 = 0; y7 <= 200; y7 += 4) {
line(y7, x7, width, height)
}
}

stroke(30, 300, 55);
for (var x8 = 0; x8 < width / 20; x8 += 60) {
for (var y8 = 0; y8 <= 200; y8 += 4) {
line(y8, x8, width / 1.5, height / 1.5)
}
}

stroke(30, 300, 55);
for (var x9 = 0; x9 < width / 20; x9 += 60) {
for (var y9 = 0; y9 <= 200; y9 += 4) {
line(y9, x9, width / 2, height / 2)
}
}

stroke(30, 300, 55);
for (var x10 = 0; x10 < width / 20; x10 += 60) {
for (var y10 = 0; y10 <= 200; y10 += 4) {
line(y10, x10, width / 4, height / 4)
}
}

}
``````

While experimenting with creating lines, I was fascinated with the way that arcs and curves can be perceived when straight lines intersect. I decided to try and make a butterfly-wing like shape projecting from a corner of the canvas