Click on the art to take away night mode.

sketch

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

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.

sketchsydsal

    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
    }
}

sketch

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

sketch

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

sketch

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

sketch

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

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.

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);
}

sketch

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

sketch

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