Category: Section B

sketch

//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//Project-4

function setup() {
    createCanvas(400, 300);
    background(0);
    pixelDensity(5.0);
    noStroke();
    colorMode(HSB, 360, 100, 100);
}

function draw() {
    background(0);
    noStroke();
    var x1;
    var x2;
    var y1;
    var y2;
    var r = 90; //radius of iris
    var eyeBright; //variable used to fade iris background to black
    for (var i = 0; i < 100; i++) { //iris faded background
        eyeBright = i;
        fill(213, 20, eyeBright);
        ellipse(width/2, height/2, 2.5*r - i*2.5*r/100, 2.5*r - i*2.5*r/100);
    }

    //blue iris coloring
    translate(width/2, height/2);
    for (var i = 0; i < 4; i++) { //for loop to create four foci by which to fill in the iris
        push();
        angleMode(RADIANS);
        rotate(i*PI/2); //rotates 90 degrees between foci
        for (var j = -14; j < 15; j++) { //21 strings from each foci are used to fill in circle
            if(j == -1 || j == -2 || j == 1 || j ==2 || j == -14 || j == -13 || j == 13 || j == 14) {
              continue; //skip center lines for both star visual effect, and to
                        //concentrate blue color to the outside of the iris
            }
            angleMode(DEGREES);
            x1 = -r;
            y1 = sqrt(sq(r)-sq(x1)); //uses equation for a circle to calculate y coordinate
            x2 = r*cos(12*j); //makes and end point every 12 degrees
            y2 = r*sin(12*j);
            stroke(199, 46, 80); //blue
            strokeWeight(1);
            line(x1, y1, x2, y2);
        }
        pop();
    }
    
    //green center iris
    var r2 = 5*r/12;
    for (var i = 0; i < 4; i++) { //for loop to create for foci by which to fill in the circle
        push();
        angleMode(RADIANS);
        rotate(i*PI/2); //rotates 90 degrees between foci
        for (var j = -12; j < 13; j++) { //21 strings from each foci are used to fill in circle
            if(j == -1 || j == -2 || j == 1 || j ==2) {
              continue;
            }
            x1 = -r/2;
            y1 = sqrt(sq(r/2)-sq(x1)); //uses r/2 to create a star shape
            angleMode(DEGREES);
            x2 = r2*cos(15*j); //makes and end point every 15 degrees
            y2 = r2*sin(15*j);
            stroke(77, 93, 48);//pale yellow/green
            strokeWeight(.5);
            line(x1, y1, x2, y2);
        }
        pop();
    }
    fill(0);
    ellipse(0, 0, r/2, r/2); //pupil
    fill(100); 
    ellipse(r/7, -r/8, r/9, r/9); //pupil light reflection

    //outside iris
    for (var i = 0; i < 30; i++) { //upper right accent
        x1 = i*(r+r/4)/29
        y1 = -r - r/4
        x2 = r+ r/4
        y2 = -r - r/4 + i*(r)/29
        stroke(80);
        line(x1, y1, x2, y2);
    }
    for (var i = 0; i < 30; i++) { // lower left accent
        x1 = -i*(r+r/4)/29
        y1 = r + r/4
        x2 = -r - r/4
        y2 = r + r/4 - i*(r)/29
        stroke(80);
        line(x1, y1, x2, y2);
    }
 

    //eyelid
    translate(-width/2, -height/2)
    for (var j = 0; j < 45; j++) { //fills in quarter circle with 45 lines
        x1 = 0
        y1 = height - j*height/45
        x2 = j * width/45
        y2 = 0
        stroke(100 + j*4, 60, 77); //slowly changes color from green to purple from left to right
        line(x1, y1, x2, y2);
    }
    for (var j = 0; j < 45; j++) { //fills in quarter circle with 45 lines
        x1 = width
        y1 = height - j*height/45
        x2 = j * width/45
        y2 = height
        stroke(100 + j*4, 60, 77); //slowly changes color from green to purple from left to right
        line(x1,y1,x2,y2);
    }

}

This project was pretty difficult for me to wrap my head around at first… I had never done any sort of string art before, nor could I quite get the feel for it. So, the way I started this project was pretty much playing around with the string art form: trying to make different shapes, and seeing what different loops I could use to accomplish drawing efficiently.

Somewhere along the lines, I ended up deciding on an eye as the theme for my drawing. Once I got going, I discovered some of the advantages of using string art, mainly, its ability to create compositional lines. After deciding on the shapes and composition, the next thing was the color and negative space. Negative space was definitely something that I realized later on was a very important part of the string drawing. Originally, all of the space was filled with strings, and the drawing became quickly cluttered. I had to decide on what to remove, and where perhaps I should use less strings to render the shapes.

As for the finished product, I enjoy how the strings led to a reptilian aesthetic. The spaces between the lines give the image texture and curvature that would be hard to do otherwise. The iris of the lizard’s eye plays off the geometric qualities of drawing with string art, creating different polygons with the lines and shapes where lines are removed.

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-04_ (String Art)


function setup() {
    createCanvas(300, 400);
    background(0);
    angleMode(DEGREES);
}

function draw() {
    var x = 0;
    var y = 0;
    var x1 = 300;
    var y1 = 400;
    var xspacing = 7.5;
    var yspacing = 10;
    var i;

    var r = map(mouseX, 0, width, 100, 200);
    var g = map(mouseX, 0, width, 0, 100);
    var b = map(mouseY, 0, height, 200, 250);

    for (i = 0; i < 50; i++) {
      stroke(r, g, b);
      strokeWeight(0.5);
      line(x, y + i * yspacing, x + i * xspacing, y1);
      line(x + i * xspacing, y, x1, y + i * yspacing);

      stroke(b, r, g);
      line(x + i * xspacing, y, x, y1 - i * yspacing);
      line(x + i * xspacing, y1, x1, y1 - i * yspacing);
    }
}

I found that string art is simple yet so aesthetic. Numberless lines drawn by mathematics create beautiful composition which makes you just zone into.
I wish I could figure out more complicated formulas.

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.