Month: September 2018

Kai Zhang-Project-04-String-Art

sketch

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-04

var a;
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
var x4;
var y4;
var x5;
var y5;
var x6;
var y6;
//assign all the coordinators

var d0 = 50;
var d1 = 80;
var d2 = 120;
var d3 = 160;
var d4 = 190;
//various diameters of curves

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


function draw() {
    
    for (a = -90; a <= 90; a += 5) {
        x1 = 80 + d0 * cos(a);
        y1 = 150 - d0 * sin(a);
        x2 = 320 - d0 * cos(a);
        y2 = 150 + d0 * sin(a);
        x3 = 80 - d0 * cos(a);
        y3 = 50 + d0 * sin(a);
        x4 = 320 + d0 * cos(a);
        y4 = 250 - d0 * sin(a);

        stroke(100 + 3 * a);
        line(x1, y1, x2, y2);
        line(x3, y3, x4, y4);
    }

    noFill();
    stroke(250);
    ellipse(200, 150, 40, 40);
    //first ring

    for (a = 90; a <= 180; a += 2) {
        x5 = 200 + d1 * cos(a);
        y5 = 250 - d1 * sin(a);
        x6 = 200 - d1 * cos(a)
        y6 = 50 + d1 * sin(a);

        stroke(0 + 2 * (a - 130));
        line(x5, y5, x6, y6);
    }

    stroke(190);
    ellipse(200, 150, 70, 70);
    //second ring

    for (a = 120; a <= 180; a += 2) {
        x5 = 200 + d2 * cos(a);
        y5 = 250 - d2 * sin(a);
        x6 = 200 - d2 * cos(a)
        y6 = 50 + d2 * sin(a);
        //the x and y variables can be reused because the previous marks wouldn't disappear

        stroke(0 + 2.5 * (a - 120));
        line(x5, y5, x6, y6);
    }
    
    stroke(120);
    ellipse(200, 150, 100, 100);
    //third ring

    for (a = 150; a <= 180; a += 1) {
        x5 = 200 + d3 * cos(a);
        y5 = 250 - d3 * sin(a);
        x6 = 200 - d3 * cos(a)
        y6 = 50 + d3 * sin(a);

        stroke(50 + 4 * (a - 160));
        line(x5, y5, x6, y6);
    }

    stroke(80);
    ellipse(200, 150, 130, 130);
    //fourth ring

    for (a = 130; a <= 170; a += 1) {
        x5 = 200 + d4 * cos(a);
        y5 = 250 - d4 * sin(a);
        x6 = 200 - d4 * cos(a)
        y6 = 50 + d4 * sin(a);

        stroke(50 + 4 * (a - 160));
        line(x5, y5, x6, y6);
    }
}

One of the rather stunning effects of string art is it’s using 1D lines to represent 2D surfaces. In this project, I’m willing to take the challenge of giving it the third dimension. To achieve this, I chose the monochrome color for the lines and assign them with gradient changing shades so as if they have depth into the canvas. On top of that, I also hooped the elegant flowing surfaces with rings that overlay on different layers of the drawing. In this case, we’re using 2D work space to create 3D rendering visual effects using merely different shades of gray.

Yingying Yan – Project 4 – String Art

sketch

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-04
*/
var x; //x1 of the line
var y; //y1 of the line
var x2; //x2 of the line
var y2; // y2 of the line

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

function draw() {
	//bottom right curve
	for( var a = 0; a < 10; a += .03){
		push();
		//assign color n weight
		stroke(255,255,161);
		strokeWeight(0.003);
		//draw from bottom left corner to top right corner
		x = lerp(0, width, a);
		y = height;
		x2 = width;
		y2 =lerp(height,0,a);
		line(x, y, x2, y2);
		pop();
	}

    //bottom left curve
	for( var b = 0; b < 30; b += .03){
		push();
		stroke(250,170,113);
		strokeWeight(0.003);
		//draw from top left corner to bottom right corner
		x = 0
		y = lerp(0, height, b)
		x2 = lerp(0, width, b);
		y2 = height;
		line(x, y, x2, y2);
		pop();

	}
    //background curve from bottom left corner to top right corner
	for(var e = 0; e < 10; e += 0.04){
		push();
		stroke(255, 244, 200);
		strokeWeight(0.001);
		//just testing what it looks like if all var are lerp
		x = lerp(0, width / 4, e);
		y = lerp(height, 3 * height / 4, e);
		x2 = lerp(3 * width / 4, width, e);
		y2 = lerp(0, height / 4, e);
		line(x, y, x2, y2);
		pop();
	}


    //draw the lighting from one point
	for ( var c = 0; c < 200; c += 10 ){

		push();
		stroke(236, 138,82);
		strokeWeight(0.09);
		// the space and height of the end of the lines
		//change consistently with + and -
		var x = width - c
		var y = height/ 2 + c
		line(0, 0, x, y)
		pop();
	}

    //draw the green lighting from a point
    //the spread of the lines froms a curve
	for (var d = 0; d < 30; d += 1){
			push();
			stroke(133,152,221);
			strokeWeight(0.003);
			//by using exponential function, the end of the lines 
			//do not have to be a straight cut
			var x = Math.pow( d, 2);
			var y = height/ 2 + Math.pow(d,2);
			line( 3 * width / 4, 0, x, y)
			pop();
	}


}

I think it was very interesting testing out lerp. Playing around with line weight and color to create a foreground and background composition was fun. Although I did not carry that all the way. I did not aim to draw a certain image. I was deciding where the curves will be as the project develops. That’s why the composition is weird. If I would have to this again, I think I will try to sketch something first, then draw it.

Miranda-Luong-Project-04-String-Art

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-04-String-Art
*/

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

    //upper left curve
    for (var a = 150; a > 0; a -= 5){
        stroke(230);
        line (150,50+a,a,0)
    }
    //lower right curve
    for (var b = 150; b < height; b += 5){
        stroke(230);
        line (150,b-50,b,height);
    }

    push();
    translate(150,200)
    angleMode(DEGREES);
    rotate(360);

    //white bottom right curve
    for (var a = 150; a > 0; a -= 5){
        stroke(255);
        line (150,50+a,a,0)
    }
    pop();

    //white upper left curve
    for (var a = 150; a > 0; a -= 5){
        stroke(255);
        push();
        translate(150,200)
        angleMode(DEGREES);
        rotate(180);
        line (150,50+a,a,0);
        pop();
    }

    //background lines
    for (var c = 0; c < 300; c += 5){
        stroke(0);
        line (c, a, c, height);
    }
}

I found this assignment to be really challenging. For loops are definitely not easy to grasp. You would think you could easily manipulate positioning by just adding to x and y coordinates but it gets messy really fast.

Project 04 – Min Lee

sketch

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

    var x1 = 0;
	var y1 = 0;
	var x2 = 400;
	var y2 = 300 / 2 - 50;

	//blue strings
	for (var i = 0; i < 40; i++) {
		stroke(88 - (i * 10), 157 - (i * 7), 242 - (i * 5))
		line(x1, y1, x2, y2)
		x1 += 20
		y2 += 10
	}

	x1 = 400;
	y1 = 0;
	x2 = 0;
	y2 = 300 / 2 - 50;

	//white strings
	for (var i = 0; i < 40; i++) {
		stroke(88 + (i * 2), 157 + (i * 7), 242 + (i * 5))
		line(x1, y1, x2, y2)
		x1 -= 20
		y2 += 10
	}

	x1 = 0
	y1 = 8
	x2 = 400
	y2 = 300 / 2 - 60

	//filler strings between blue and white
	for (var i = 0; i < 9; i++) {
		stroke(88 + (i * 10), 157 + (i * 7), 242 + (i * 5))
		line(x1, y1, x2, y2)
		y1 += 10
		y2 -= 10
	}

	x1 = 400;
	y1 = 0;
	x2 = 0;
	y2 = 300 / 2 - 50;

	//pink strings
	for (var i = 0; i < 40; i++) {
		stroke(88 + (i * 10), 157 + (i * 7), 242 + (i * 5))
		line(x1, y1, x2, y2)
		x1 -= 20
		y2 += 10
	}

	x1 = 400
	y1 = 300
	x2 = 0
	y2 = 300 / 2 + 50

	//beige strings
	for (var i = 0; i < 40; i++) {
		stroke(195 - (i * 3), 149 - (i * 5), 167 - (i * 3))
		line(x1, y1, x2, y2)
		x1 -= 20
		y2 -= 10
	}

	x1 = 0
	y1 = 300
	x2 = 400
	y2 = 300 / 2 + 50

	for (var i = 0; i < 40; i++) {
		stroke(195 + (i * 3), 149 + (i * 5), 167 + (i * 3))
		line(x1, y1, x2, y2)
		x1 += 20
		y2 -= 10
	}

	x1 = 400
	y1 = height - 8
	x2 = 0
	y2 = 300 / 2 + 60

	//filler strings between pink and beige
	for (var i = 0; i < 9; i++) {
		stroke(195 + (i * 3), 149 + (i * 5), 167 + (i * 3))
		line(x1, y1, x2, y2)
		y1 -= 10
		y2 += 10
	}

	//eye-top
	x1 = width / 2 - 20
	y1 = height / 2 - 10
	x2 = width / 2 + 20
	y2 = height / 2 + 10

	for (var i = 0; i < 21; i++) {
		stroke(121 - (i * 5), 157 - (i * 3), 120 - (i * 3))
		line(x1, y1, x2, y2)
		x1 += 2
		y2 += 1
	}

	//eye-bottom 
	x1 = width / 2 + 20
	y1 = height / 2 + 30
	x2 = width / 2 - 20
	y2 = height / 2 + 10

	for (var i = 0; i < 21; i++) {
		stroke(121 + (i * 5), 157 + (i * 3), 120 + (i * 3))
		line(x1, y1, x2, y2)
		x1 -= 2
		y2 -= 1
	}
}

function draw() {
}

This project was the most challenging for me because of my lack of experience with string art, but I still wanted to challenge myself to draw something. This is my attempted drawing of an eye with gradient colors. The pupil looks a lot like the Pied Piper logo.

Miranda-Luong-Looking Outwards-04

http://soundleak.org/works/sounddam

View post on imgur.com

SoundDam (2011) is an aural investigation of spacial awareness by Keiko Uenishi. The installation runs along a 6km stretch of the Rio Paiva river. Children were asked to travel along the river but had to cross many invisible “sound dams” along the way. Unlike traditional dams and barriers, sound dams react to spaces and movements. I admire the idea of using sound to create a physical presence. I can only guess at what algorithms Uenishi is using to create this dynamic experience for the children. In addition to the physical presence that sound creates, the changing of the sound and adjusting to the environment around it. There is something purely breathtaking and warming about the idea that sound can be so well integrated into the environment. Uenishi writes that his installation had many “‘cross-communications’ as results from different parts of the river and the people living along it.” While the algorithms used are still a mystery to me, I feel like the applications are tremendous.

Jessica Timczyk – Project 4 String Art

line drawing

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-04-string art
function setup() {
    createCanvas(400, 300);   
}

function draw() {
    background(126, 25, 25);
    // variable set up
    var x1 = 0;
    var x2 = 0;
    var x3 = 0;
    var x4 = 0;
    var y1 = 0;
    var y2 = 0;
    var y3 = 0;
    var y4 = 0;

    // create a loop to draw many lines
    for( var i = 0; i <= 150; i ++) {
        // set new values for all the variables
        x1 += i;
        y1 += i;
        x2 += 2 * i;
        y2 += 2;
        x3 += 20;
        y3 -= i * 1/3;
        x4 = 2 * i;
        y4 = 2 * i;
        // orange lines
        stroke(246, 150, 14);
        strokeWeight(3 / 4);
        line(x1, y1, width, 70);
        // white lines
        stroke(255);
        strokeWeight(1/2);
        line(mouseX, y2, x2, height);
        // light brown lines
        stroke(142, 91, 53);
        strokeWeight(2);
        line(-mouseX + x3, y3, 400, 300);
        // dark brown lines
        stroke(49, 25, 7);
        strokeWeight(0.5);
        line(x4, y4, 210 - mouseX, 120);
        // grey lines
        stroke(68, 68, 68);
        strokeWeight(3/4);
        line(0, y2, x2, height);

    }
}

I really enjoyed this project because it allowed me to experiment with different parameters to see what would happen. As a result, my string art came about almost accidentally as I manipulated the parameters to see what they would do.

Jonathan Liang – Project 4 – String Art

sketch

//Jonathan Liang
//jliang2
//section A


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

function draw() {

	
//background
	background(200);
	for (var i = 1; i < 2400; i += 20) {
		strokeWeight(4);
		stroke('white');
		line((i * .25), 0, (i * .25), 300);
	}


//right eyebrow
	for (var i = 1; i < 65; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(0, -15);
		line((i) + 250, 60 - i / 4, (i * 1.1) + 250, 50 - i / 4);
		pop();
	}

	for (var i = 1; i < 45; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(15, -19);
		line((i) + 300, 38 + i / 1.5, (i * 1.25) + 300, 45 + i / 1.4);
		pop();
	}

//right eyelid
	for (var i = 1; i < 50; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(90, 50);
		scale(.7, .3);
		line((i) + 250, 60 - i / 4, (i * 1.1) + 250, 50 - i / 4);
		pop();
	}

	for (var i = 1; i < 50; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(90, 50);
		scale(.7, .3);
		line((i) + 300, 38 + i / 2, (i * 1.25) + 300, 45 + i / 2);
		pop();
	}

//left eyebrow
	for (var i = 1; i < 45; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(5, 0);
		line((i) + 50, 55 - i / 1.5, (i * 1.15) + 50, 54.5 - i / 1.75);
		pop();
	}

	for (var i = 1; i < 65; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(0, -15);
		line((i) + 100, 45 + i / 4, (i * 1.05) + 100, 35 + i / 4);
		pop();
	}

	

//left eyelid
	for (var i = 1; i < 40; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(10, 65);
		scale(.85, .3);
		line((i) + 50, 55 - i * 1.5, (i * 1.35) + 50, 53 - i * 1.5);
		pop();
	}

	for (var i = 1; i < 65; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(10, 50);
		scale(.85, .3);
		line((i) + 100, 45 + i / 4, (i * 1.05) + 100, 35 + i / 4);
		pop();
	}

	for (var i = 1; i < 40; i += 1) {
      line(i  * 1.1+ 115, 30, 1.5*i + 115, 60 + i/1.1);
    }

//right eye
	for (var i = 1; i < 35; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(50, 60);
		scale(.8, .65);
		line((i) + 250, 60 - i / 4, (i) + 250, 50 - i / 4);
		pop();
	}

	for (var i = 1; i < 75; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(35, 79);
		scale(.8,);
		line((i * 1.25) + 300, (i + 30) / 3, (i) + 300, (i + 38) / 2.5);
		pop();
	}	

	for (var i = 1; i < 35; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(50, 60);
		scale(.8, .65);
		line((i) + 250, 60 - i / 4, (i) + 250, 50 - i / 4);
		pop();
	}

	for (var i = 1; i < 20; i += 1) {
      push();
      translate(310, -25);
      line(1.5*i, 135, .25*i, 150);
      pop();
    }

//right eyeball
	for (var i = 1; i < 50; i += 1.05) {
		strokeWeight(1);
		stroke('black');
		line(i + 280, i * .25 + 95, i + 280, 110);
	}

	for (var i = 1; i < 25; i += 1) {
		strokeWeight(1);
		stroke('white');
		push();
		translate(138, 60);
		scale(.5, .5);
		line(i + 280, i * .25 + 95, i + 280, 110);
		pop();
	}

	strokeWeight(3);
	stroke('white');
	line(295, 100, 295, 100);

//left eye
	for (var i = 1; i < 45; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(20, 67);
		scale(.8);
		line((i) + 50, 55 - i / 1.25, (i * 1.15) + 50, 54.5 - i / 1.5);
		pop();
	}

	for (var i = 1; i < 65; i += 1) {
		strokeWeight(1);
		stroke('black');
		push();
		translate(10, 60);
		scale(.8, .65);
		line((i) + 100, 40 + i / 3, (i * 1.25) + 100, 34 + i / 3);
		pop();
	}

//left eyeball
	for (var i = 1; i < 50; i += 1.05) {
		strokeWeight(1);
		stroke('black');
		line(i + 80, 115 - i / 4, i + 80, 90);
	}

	strokeWeight(3);
	stroke('white');
	line(110, 100, 110, 100);

//mouth
	var mouthColor = mouseX / (400 / 225);

	for (var i = 1; i < 60; i += 1) {
      strokeWeight(1);
      stroke(255 - mouthColor, 25, 102);
      push();
      scale(.5, .5);
      translate(400, 350);
      line(i, 10, 3*i, 120);
      line(3*i, 120, 1.2*i, 240);
      pop();
     
    }

    for (var i = 1; i < 60; i += 1) {
      strokeWeight(1);
      stroke(255 - mouthColor, 25, 102);
      push();
      scale(.5, .5);
      translate(405, 601.5);
      rotate(PI, 3);
      line(i, 10, 3*i, 120);
      line(3*i, 120, 1.2*i, 240);
      pop();
  }

//pimple

	strokeWeight(6);
	stroke('black');
	line(300, 200, 300, 200);


}

My project was heavily influenced by the Michael Kalish and Oyler Wu Collaborative art installation reALIze. reALIze was a pop art portrait of boxing legend Muhammad Ali completely made of of cords and punching bags (so basically a line drawing with varying line thicknesses.) I thought I could apply a similar concept to make a line drawing of Marilyn Monroe. I thought that using the concept of cross hatching and increasing the number of lines could give thickness to an object. Although I deem my portrait to be unsuccessful, it was still a valuable opportunity to learn how to use loops.

Oyler Wu reALIze installation
initial conceptual sketches exploring how to hatch

looking outward 04

The Sonumbra de Vincy, Responsive Light Emitting Environment made in 2008 was the most interesting to me. I enjoyed how the digital structure that were made out of lines were formed almost like trees with a trunk at the bottom and wider structure of branches at the top. I also admire how the artists made this structure interact with sounds around it. The Sonumbra illustrates atmosphere of rhythms going on around it bring awareness to all of the patterns and the relationship between people, cars, and other things surrounding the area. The artists worked with electro-luminescent technology a unique lace technique (Lumilace) that creates architectural scale and animates fibre bases technology through hard and software.

LookingOutwards-04 SectionE

Cycling Wheel: The Orchestra – Reimagining Marcel’s bicycle wheel as a light+sound Instrument created by Keith Lam, Seth Hon, and Alex Lai created October 7,2017

The wheel in general is a soothing object as it follows the shape of the circle which is a strong geometric figure in the design world. A wheel/ shape of a circle is used in many different mechanisms allowing many machines to be invented and working. I was interested in how they took the wheel of a bicycle and decided to make it a sound.  A bicycle’s wheel is used mainly for movement, but it also a satisfying movement. It just kept me wondering in how they would change a subject like a wheel into sounds? The way they included the lights as they played with the sound is visually helpful. The algorithm that is used is primarily concerned with manipulating sound, lights, pitch, volume, and speed of sound all with the movement of the bicycle wheel. They used a combination of programs and tools, which focused on each variable. Due to the combination of the variables they were able to make the wheels act as instruments and with the inclusion of lights it caused it to become almost like a show, it was fitting that they called the project “the orchestra”

.

project 04

sketch.js

/*
Arden Wolf
Section B
ardenw@andrew.cmu.edu
Project-04
*/

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

function draw() {
//curves
for(var i=10; i <200; i+=15) {
    stroke(13,238,255);
    line(i,20,320, i);
}

for(var i=20; i <400; i+=15) {
    stroke(13,238,255);
    line(200,i,i, 300);
}

for(var i=20; i <400; i+=15) {
    stroke(13,238,255);
    line(25,i,i, 275);
}

for(var i=20; i <400; i+=15) {
    stroke(13,238,255);
    line(25,i,i, 275);
    }

for(var i=10; i <700; i+=15) {
    stroke(13,238,255);
    line(i,100, 300,i);
    }



  var x = 0;
//red beams
    for (var i = 0; i < 50; i++) { 
    //for loop allows me to control the width of the beam of lines starting from a certain point 
        stroke(255, 0, 0);
        strokeWeight(1);
        line(300, 300, x, mouseY); //moves on mouse Y
}

//blue beams
var j = 1;
       for (var i = 4; i < 100; i++) { 
        j += 10;
        stroke (0, 0, 255);
        strokeWeight(2);
        line(300, 300, mouseX, 0);// moves on mouse x 
    }
//green beams
var w = 100;
       for (var i = 4; i < 200; i++) {
        stroke (0,255,0);
        strokeWeight(.5);
        line(400, 0, w, mouseY);//moves on mouse Y
    }
//yellow beams
var g = 100;
       for (var i = 5; i < 20; i++) {
        stroke (255,255,0);
        strokeWeight(.5);
        line(0, 0, mouseX, 275);// moves on mouse x 
    }
//purple beams
var m = 100;
       for (var i = 5; i < 50; i++) {
        stroke (252,141,255);
        strokeWeight(.5);
        line(25, 275, mouseX, mouseY);//moves on mouse Y and X
    }

//rect border
noFill();
stroke(255);
rect(20,20,355,255)

stroke(0);
strokeWeight (4);
rect(0,0,400,300);



}

I made my work look like laser beams at a concert. I used for loops to create the beams of lines together as well as the series of lines that created curves.