Category: Project-04-String-Art

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project 04

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

function draw() {
	background(0); 
	var x1= 200; 
	var accum= 2; 
	var space= 40; 
	
 	for (var i = 0; i < 300; i += 40) {
    	//white lines start on left and spread out
    	stroke(255); 
      line (0, 0, width, i); 
      //white lines start on right and spread out 
      line(width, 0, 0, i)
      
      //pink lines start on left and spread out
      stroke(255, 183, 221); 
      line(0, space, width, i); 
      //pink lines start on right and spread out 
     line(width, space, 0, i); 
     
      //yellow lines start on left and spread out 
      stroke(255, 241, 150); 
      line(0, space*2, width, i); 
      //yellow lines start on right and spread out 
      line(width, space*2, 0, i); 
      
      //blue lines start on left and spread out 
      stroke(183, 222, 255); 
      line(0, space*3, width, i); 
      //blue lines start on right and spread out 
      line(width, space*3, 0, i); 
      
      //aqua lines start on left and spread out
      stroke(183, 253, 255); 
      line(0, space*4, width, i); 
      //aqua lines start on right and spread out
      line(width, space*4, 0, i); 
      
      //green lines start on left and spread out
      stroke(151, 231, 182); 
      line(0, space*5, width, i); 
      //green  lines start on right and spread out
      line(width, space*5, 0, i); 
      
      //purple lines start on left and spread out
      stroke(161, 170, 245); 
      line(0, space*6, width, i); 
      //purple  lines start on right and spread out
       line(width, space*6, 0, i); 
       
       //hot pink line starts on left and spreads out
       stroke(243, 62, 150); 
       line(0, space*7, width, i); 
        //hot pink line starts on right and spreads out
      line(width, space*7, 0, i); 
      
    }
    
  
      

}

	

For this particular project, I was stuck at first on what I should do. I then wanted to try to make a visual illusion. The curves in my project are seen in the middle of the canvas where there are black spots. If you concentrate on the black spots only and move your eyes hori

I was trying to emulate wave shapes and the movement of waves in this project. When the mouse is moved through the x axis, the strings are elongating towards the right of the canvas and when the mouse is moved through the y axis then the strings elongating downwards.

When the mouse is clicked the background color changes.

sketch

// Brandon Hyun
// 15-104 Section B
// bhyun1@andrew.cmu.edu
// Project 04

var increase = 15;
var xInt = 15;

var x1 = 0;
var y1 = 550;
var x2 = 550;
var y2 = 0;
var red;
var green;
var blue;

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

function draw() {
  background (red,green,blue);
  var m = 400/25;
	for(var i = 0; i < m; i += 1) {
        strokeWeight(1);
		    stroke(40,40,40);


        for(var j =0; j<10; j+=1){
          line(mouseX+40*j, increase * i, increase * i +40*j, y1);
        }

		    for(var z =0; z<10; z+=1){
          line(mouseY+ x2 - increase * i, y2+40*z, x1, increase * i+ 40*z);
        }

	}
}

function mousePressed() {
  red = random(0,255);
  green = random (0,255);
  blue = random (0,255);
}

sketch

function setup() {
    createCanvas(400, 300);
    background("lavender");
}
function draw() {
    for (var i = 1; i < 300; i += 6) { // first set of chrome lines;
      strokeWeight(2);
      stroke(mouseX-1, mouseX-5, mouseY-10);
      line(i, 0, i*10, 500);
    }
    for (y = 10; y < 300; y += 10) { //the yellow lines;
      stroke(255,250,205);
      strokeWeight(1.2);
      line(-i, y/400 + 30, 400, y*2);
    }
    for (i =0; i < 40; i++) { // white beams and orange beams;
      stroke("white");
      strokeWeight(0.2);
      line(1, i*1.5, i+200, 400);
      stroke("orange");
      line(i+400, 300, i*1.5, i*3.5);
    }
    for (i = 10; i <300; i += 3) { // coral pink lines at the bottom;
      var y1 = i*(30/400);
      stroke("pink");
      strokeWeight(0.5);
      line(i, y1*9, 90, 400);
    }
    for (h =0; h < 100;h +=8) { // floating blue lines;
      stroke("skyblue");
      var y1 = 170;
      var y2 = 23;
      line(h+20, y1, h*5 ,y2);
      y2 += y2
    }
}

I basically played around with the codes to get a better understanding of how each of the equations affect the shape and size of each set of line drawings. I also used color to identify each set of strings to show more distinction from one another.

sketch

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

    //left white crossed lines
    stroke(255);
    var yl = height/4*3;
    var ym1 = height/8*5;

    for(var i=0; i < 15; i++){
        line(0, yl, width/2, ym1);
        yl *=0.97;
        ym1 *= 1.02+mouseX;
    };

    //right white crossed lines
    var yr = height/4*3;
    var ym2 = height/8*5;

    for(var i=0; i < 15; i++){
        line(width, yr, width/2, ym2);
        yr *=0.97;
        ym2 *= 1.02;
    };



    //left top lines 
    var x1 = 0;
    var y1 = height/2;

    for (var i=0; i < 15; i++){
        stroke(251,63,65);
        line(x1, 0, 0, y1);
        x1 += 15;
        y1 -= 10;
    };

    // right top lines 
    var x2 = width;
    var y2 = height/2

    for (var i=0; i < 15; i++){
        stroke(18,187,255);
        line(x2, 0, width, y2)
        x2 -= 15;
        y2 -= 10;
    };

    // right bottom lines
    var x3 = width;
    var y3 = height/2;

    for(var i=0; i < 15; i++){
        stroke(255, 242, 0);
        line(x3, height, width, y3)
        x3 -= 15;
        y3 += 10;
    };

    // left bottom lines
    var x4 = 0;
    var y4 = height/2;

    for(var i=0; i < 15; i++){
        stroke(0,255,217);
        line(x4, height, 0, y4);
        x4 += 15;
        y4 += 10;
    }

    //upper left grey crossed triangle
    var x5 = width/4;
    var y5 = height/2;

    stroke(100);
    line(x5, y5, width/2, y5)
    line(x5, y5, x5+(width/2-x5)/2, y5- sqrt(3)/2*(width/2-x5));
    
    for(var i=0; i < 8; i++){
        line(x5+5, y5, width/4+(width/2-x5)/2, y5- sqrt(3)/2*(width/2-x5));
        x5 += 10;
    }

    //upper purple triangle
    var x6 = width/4*3;
    var y6 = height/2;

    line(width/2, y6, x6, y6)
    line(x6, y6, width/4+(width/4)/2, y5- sqrt(3)/2*width/4);

    for(var i=0; i < 8; i++){
        line(x6-5, y6, width/4+(width/4)/2, y5- sqrt(3)/2*width/4);
        x6 -= 10;
    }

    //lower purple triangle
    var x7 = width/4;
    var y7 = height/2;

    stroke(156,0,255);

    for(var i=0; i < 31; i++){
        line (x7, y7, width/2, height/4*3);
        x7 += 5;
    }

    var x8 = width/4;
    var y8 = height/2;

    for(var i=0; i < 31; i++){
        line (x8, y8, width/2, height/4);
        x8 += 5;
    };

    
}

function draw() {
    
}

I tried to create a common usual string art pattern like this at first :

Later, I started to try to create a concrete shape in the middle of my canvas. During this project, I just had fun with combining different sequences of lines.