Category: SectionD

Project-04-String Art: Maryland Flag

sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;
var bx1;
var by1;
var bx2;
var by2;
var cx1;
var cy1;
var cx2;
var cy2;
var ax1;
var ay1;
var ax2;
var ay2;
var numLines = 20;

function setup() {
    createCanvas(400, 300);
    background(200);
    line(50, 50, 150, 300);
    line(300, 300, 350, 100);
    dx1 = (100-0)/numLines;
    dy1 = (50-50)/numLines;
    dx2 = (100-100)/numLines;
    dy2 = (0-50)/numLines;

    bx1 = (100-0)/numLines;
    by1 = (50-50)/numLines;
    bx2 = (100-100)/numLines;
    by2 = (100-50)/numLines;

    cx1 = (100-200)/numLines;
    cy1 = (50-50)/numLines;
    cx2 = (100-100)/numLines;
    cy2 = (100-50)/numLines;

    ax1 = (100-200)/numLines;
    ay1 = (50-50)/numLines;
    ax2 = (100-100)/numLines;
    ay2 = (0-50)/numLines;

}

function draw() {
	noStroke();
    fill(255,255,0);
    rect(0, 0, 400, 300);

//top left black lines
    stroke(0);
    for (var i = 2; i < width/2; i += 4) { 

      if (i < 80 || i > 130) { 
    
        line(i, i * .7 - 20, i, i - 400);
    }

      noLoop();
   
    }

    for (var i = 0; i < width/2; i += 4) {

    	if (i < 80 || i > 130) { 

          line(i, i + 400, i, i * .7 + 40);
      }
      noLoop();
  
    }

    for (var i = 0; i < width/2; i += 4) {

    	if (i > 80 & i < 130) { 

          line(i, i *.7 -20, i, i * .7 +40);
      }
      
      noLoop();
  
    }

//bottom right black lines
  for (var i = 200; i < width; i += 4) {

    	if (i < 280 || i > 330) { 

          line(i, i *.7 -20, i, i * .7 +40);
      }
      
      noLoop();
  
    }

  for (var i = 200; i < width; i += 4) { 

      if (i > 280 & i < 330) { 
    
        line(i, i * .7 - 20, i, i - 400);
    }

      noLoop();
   
    }

  for (var i = 200; i < width; i += 4) {

    	if (i > 280 & i < 330) { 

          line(i, i + 400, i, i * .7 + 40);
      }
      noLoop();

    }


 



    noStroke();

    fill(255, 0, 0); 
    rect(0, 150, 200, 150); //red rectangle bottom left
    rect(200, 0, 200,150); //red rectangle top right
    fill(255);
    rect(0, 150, 100, 75); //white rectangles bottom left 
    rect(100, 225, 100, 75);
    rect(200, 0, 100, 75);//white rectangles top right
    rect(300, 75, 100, 75);


    
    push();
    noFill();
    stroke(255);
//bottom right ellipses and arcs
    ellipse(107, 175, 15, 15);
    arc(100, 167, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
    
    ellipse(28, 233, 15, 15);
    arc(20, 225, 15, 15, radians(0), radians(180), CHORD);

    ellipse(92, 275, 15, 15);
    arc(100, 283, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(174, 217, 15, 15);
    arc(182, 225, 15, 15, radians(180), radians(0), CHORD);
    

    stroke(255,0,0);
    ellipse(92, 175, 15, 15);
    arc(100, 167, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(28, 217, 15, 15);
    arc(20, 225, 15, 15, radians(180), radians(0), CHORD);

    ellipse(107, 275, 15, 15);
    arc(100, 283, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);

    ellipse(174, 233, 15, 15);
    arc(182, 225, 15, 15, radians(0), radians(180), CHORD);
  
//top right elliplses and arcs
    push;
    noFill();
    stroke(255);
    translate(200, -150);
    ellipse(107, 175, 15, 15);
    arc(100, 167, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
    
    ellipse(28, 233, 15, 15);
    arc(20, 225, 15, 15, radians(0), radians(180), CHORD);

    ellipse(92, 275, 15, 15);
    arc(100, 283, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(174, 217, 15, 15);
    arc(182, 225, 15, 15, radians(180), radians(0), CHORD);
    

    stroke(255,0,0);
    ellipse(92, 175, 15, 15);
    arc(100, 167, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(28, 217, 15, 15);
    arc(20, 225, 15, 15, radians(180), radians(0), CHORD);

    ellipse(107, 275, 15, 15);
    arc(100, 283, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);

    ellipse(174, 233, 15, 15);
    arc(182, 225, 15, 15, radians(0), radians(180), CHORD);
    pop();



//bottom left red bend1
    push();
    translate(0, 175);
    stroke(255, 0, 0);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

    pop();


//bottom left white bend1
    push();
    translate(0, 175);
    stroke(255);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    noLoop();
    }
    pop();


//bottom left red bend2
    push();
    translate(0, 175);
    stroke(255, 0, 0);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    noLoop();
    }

    pop();


//bottom left white bend2
     push();
    translate(0, 175);
    stroke(255);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    noLoop();
    }

    pop();

    //next one


//top right red bend1
    push();
    translate(200, 25);
    stroke(255, 0, 0);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

    pop();


//top right white bend1
    push();
    translate(200, 25);
    stroke(255);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    noLoop();
    }
    pop();


//top right red bend2
    push();
    translate(200, 25);
    stroke(255, 0, 0);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    noLoop();
    }

    pop();


//top right white bend2
    push();
    translate(200, 25);
    stroke(255);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    noLoop();
    }

    pop();



    
}

Looking Outward-04

Since David Cope is a composer, he already had an interest and extensive knowledge in different genres of music which probably compelled him to make this and incorporate jazz, classical and chorale music. After doing some searching, I found that he learned LISP in college which is programming language for AI. I would guess that this (among other things probably) is what he used to make EMMY because EMMY makes music from artificial intelligence. I like that it keeps a consistent melody and harmony I was very surprised by that especially since it incorporates a number of different voices singing in different vocal ranges. It is very consistent and there are no jumps at all, so it is actually very calming to listen to. However, it is strange hearing the choir voices sing words that aren’t real. I’d be interested to hear how EMMY interprets jazz since there are so many instruments involved. I would be curious to see if it incorporates more random and unexpected elements of sound and rhythm since jazz doesn’t always follow a specific rhythm.

LO 4 – Sound Art

As a student who works in the IDEATE space at CMU, I have really come to appreciate some of the creativity around our own University. A sonic art piece that comes to mind is in the stairwell of the Hunt library. A search on the Internet renders not much more than the name of this installation – “Acrylic plastic Ambient auditory experience”, but this product is cooler than it sounds. Using hanging light fixtures that extends from the top of the stairwell to the bottom, it responds to the sound of footsteps on the stairs and lights up the piece of the fixture closest to the sound. I really enjoy this interaction, and I think it’s a creative way to make such a boring space feel exciting and alive. It was created to emphasize the area of the library where you are allowed to make sound. In the publishing of this blog post, I have found more information about the piece – it was created by Jaime Chu and Robert Rudolph. Using clear acrylic, the designers were able to achieve and interesting floating lightbulb effect. See here:

Project 04 – String Art

I chose to create a responsive string art project, since I still haven’t had my fill of mouseX and mouseY data use. I also used a mousePressed function to spice things up as well, ultimately changing the location of the pivot points of the string as well as the color.

sketchDownload
//PROJECT 04 STRING ART
//Julia Steinweh-Adler
//jsteinwe


var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 1;
var mode = 0;

function setup() {
    createCanvas(400, 400);
    background(0);
    
  
    //line initial variables
    dx1 = (width/1) / numLines;
    dy1 = (width/2) / numLines;
    dx2 = (width/3) / numLines;
    dy2 = (width/4) / numLines;
}

function draw() {
    
    var x1 = mouseX;
    var y1 = mouseY;
    var ptOne = 400; // yarn pivot point, y value
    var ptTwo = 180; // yarn pivot point, x value
    
    stroke(0);
    strokeWeight(2);
   
     // Red and Blue Yarn
       if(mode == 0) {
          for (var i = 0; i < numLines; i += 1) {
       
             stroke(mouseX, 0, mouseY); // red blue color
             line(x1, y1, ptOne, ptTwo); //line 1
        
             stroke(mouseY, 0, mouseX); // red blue color
             line(y1, x1, ptTwo, ptOne); //line 2, inverted from line 1
        
             line(x1, y1, y1, x1); // line 3: connecting 1 and 2
          
            
            // incremental addition to coordinates
             x1 += dx1;
             y1 += dy1;
             ptOne += dx2;
             ptTwo += dy2;  
            
          }  
     
       
       } else {
          // Blue and Green Yarn
         
         
         // changing yarn pivot point
         let ptOne = 0 // yarn pivot point, x value
         let  ptTwo = 200 // yarn pivot point, y value
         
          for (i = 0; i < numLines; i += 1) {
         
          //change yarn color
             stroke(0, mouseX, mouseY); // green blue color
             line(y1, x1, ptTwo, ptOne); //line 1
  
      
             stroke(mouseY, 0, mouseX); //green blue color
             line(x1, y1, ptOne, ptTwo); //line 2, inverted line 1
        
             line(y1, x1, x1, y1) //line 3; connector line
       
            
              // incremental addition to coordinates 
             x1 += dx1;
             y1 += dy1;
             ptOne += dx2;
             ptTwo += dy2;  
             }  
       }
  }
  function mousePressed() {
    if (mode == 0) {
      mode = 1;
    } else {
      mode = 0;
    }
  }

The color, repetitive nature, string-like-ness, and “stretchy” behavior of this interaction remind me of the rainbow loom. Therefore, I have titled this piece “Rainbow Loom”.

Colorful Rainbow Loom Bracelet Rubber Bands Stock Photo, Picture And Royalty Free Image. Image 32648073.

Project 04 – String Art

sketch
/*
 * Eric Zhao
 * ezhao2@andrew.cmu.edu
 *
 * Project 4: String Art
 * A dynamic string art with four separate string shapes
 * that changes based on mouse position.
 */

var angle = 0;
var posX = 0;
var posY = 0;
var cursorX;
var cursorY;
var loopCount = 0;
var numLines = 30;
function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw(){
    stroke(255);
    strokeWeight(0.125);
    background(0);
    translate(width/2, height/2);

    push()
    cursorX = map(min(mouseX, width), -200, 200, 0, 400);
    for(let a = 0; a <= 360; a += 1){
        //rotates the canvas an increment of radians and adjusts canvas
        rotate(5);
        push();
        scale(4);
        posY = -a;
        line(-cursorX, posY, cursorX, cursorX);
        //draws lines normal to point offset after rotation
        pop();
    }
    pop();

    stroke(0, 255, 255);
    strokeWeight(0.75);


    //bottom right cyan string corner
    line(0, height/2, width/2, height/2);
    line(width/2, 0, width/2, height/2);
    numLines = int(map(constrain(mouseX, 0, 400), 0, 400, 0, 30));
    var dx1 = (0-width/2)/numLines;
    var dy1 = (height/2-height/2)/numLines;
    var dx2 = (width/2-width/2)/numLines;
    var dy2 = (height/2-0)/numLines;
    var x1 = 0;
    var y1 = height/2;
    var x2 = width/2;
    var y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //bottom left string corner
    line(0, height/2, -width/2, height/2);
    line(-width/2, 0, -width/2, height/2);
    dx1 = (0 + width/2)/numLines;
    dy1 = (height/2-height/2)/numLines;
    dx2 = (-width/2 - 0)/numLines;
    dy2 = (height/2-0)/numLines;
    x1 = 0;
    y1 = height/2;
    x2 = -width/2;
    y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    rotate(PI); //rotates canvas to draw top two string corners

    //top left string part
    line(0, height/2, width/2, height/2);
    line(width/2, 0, width/2, height/2);
    numLines = int(map(constrain(mouseX, 0, 400), 0, 400, 0, 30));
    dx1 = (0-width/2)/numLines;
    dy1 = (height/2-height/2)/numLines;
    dx2 = (width/2-width/2)/numLines;
    dy2 = (height/2-0)/numLines;
    x1 = 0;
    y1 = height/2;
    x2 = width/2;
    y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    //top right string part
    line(0, height/2, -width/2, height/2);
    line(-width/2, 0, -width/2, height/2);
    dx1 = (0 + width/2)/numLines;
    dy1 = (height/2-height/2)/numLines;
    dx2 = (-width/2 - 0)/numLines;
    dy2 = (height/2-0)/numLines;
    x1 = 0;
    y1 = height/2;
    x2 = -width/2;
    y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
}

I got the initial idea for this composition when trying to make the spiral example from a class lecture and accidentally rotating the canvas in radians instead of degrees.

Project 04 – String Art

I tried to visualize an image of eye through various shapes of string art.

sketch
//Stefanie Suk
//15-104 Section D

var ax1;
var ay1;
var ax2;
var ay2;      //variable for top left white strings 

var bx1;
var by1;
var bx2;
var by2;      //variable for top right white strings 

var cx1;
var cy1;
var cx2;
var cy2;      //variable for bottom right white strings 

var dx1;
var dy1;
var dx2;
var dy2;      //variable for bottom left white strings 

var fx1;
var fy1;
var fx2;
var fy2;      //variable for top bottom orange strings 

var gx1;
var gy1;
var gx2;
var gy2;      //variable for left right orange strings 

var numLines = 40;
var numLines2 = 50;

function setup() {
    createCanvas(400, 300);
    background(25, 44, 108);

    //base lines for top left white strings
    line(0, 300, 0, 0);
    line(0, 0, 400, 0);
    ax1 = (0-0)/numLines;
    ay1 = (0-300)/numLines;
    ax2 = (400-0)/numLines;
    ay2 = (0-0)/numLines;

    //base lines for top right white strings
    line(0, 0, 400, 0);
    line(400, 0, 400, 300);
    bx1 = (400-0)/numLines;
    by1 = (0-0)/numLines;
    bx2 = (400-400)/numLines;
    by2 = (300-0)/numLines;

    //base lines for bottom right white strings
    line(400, 0, 400, 300);
    line(400, 300, 0, 300);
    cx1 = (400-400)/numLines;
    cy1 = (300-0)/numLines;
    cx2 = (0-400)/numLines;
    cy2 = (300-300)/numLines;

    //base lines for bottom left white strings
    line(400, 300, 0, 300);
    line(0, 300, 0, 0);
    dx1 = (0-400)/numLines;
    dy1 = (300-300)/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (0-300)/numLines;

    //base lines for top bottom orange strings
    line(200, 0, 400, 0);
    line(200, 300, 0, 300);
    fx1 = (400-200)/numLines2;
    fy1 = (0-0)/numLines2;
    fx2 = (0-200)/numLines2;
    fy2 = (300-300)/numLines2;

    //base lines for left right orange strings
    line (0, 0, 0, 150);
    line(400, 300, 400, 150);
    gx1 = (0-0)/numLines2;
    gy1 = (150-0)/numLines2;
    gx2 = (400-400)/numLines2;
    gy2 = (150-300)/numLines2;
}

function draw() {

	//center pink strings
	for (var i = 0; i < 300; i += 8) {
		stroke(255, 161, 231); //pink
		strokeWeight(1);
		line (width/2, i + 0, i + width/2, height/2); //top right
		line(width/2, height - i, i + width/2, height/2); //bottom right
        line(width/2, i + 0, width/2 - i, height/2); //top left
        line(width/2, height - i, width/2 - i, height/2); //bottom left
	}

	//top left white strings
	var x1a = 0;
	var y1a = 300;
	var x2a = 0;
	var y2a = 0;
	for (var i = 0; i <= numLines; i +=1) {
		stroke(255);
		strokeWeight(1);
		line(x1a, y1a, x2a, y2a);
		x1a += ax1;
		y1a += ay1;
		x2a += ax2;
		y2a += ay2;
	}

	//top right white strings
	var x1b = 0;
	var y1b = 0;
	var x2b = 400;
	var y2b = 0;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1b, y1b, x2b, y2b);
		x1b += bx1;
		y1b += by1;
		x2b += bx2;
		y2b += by2;
	}

	//bottom right white strings
	var x1c = 400;
	var y1c = 0;
	var x2c = 400;
	var y2c = 300;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1c, y1c, x2c, y2c);
		x1c += cx1;
		y1c += cy1;
		x2c += cx2;
		y2c += cy2;
	}

	//bottom left white strings
	var x1d = 400;
	var y1d = 300;
	var x2d = 0;
	var y2d = 300;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1d, y1d, x2d, y2d);
		x1d += dx1;
		y1d += dy1;
		x2d += dx2;
		y2d += dy2;
	}

	//center circle yellow strings
	for (var e = 120; e <= 240; e++) {
		stroke(247, 241, 117);
		strokeWeight(1.5);
		noFill();
		ellipse(width/2, height/2, e, e);
		e += 4; //spacing
	}

	//top bottom orange strings
	var x1f = 200;
	var y1f = 0;
	var x2f = 200;
	var y2f = 300;
	for (var i = 0; i <= numLines2; i +=1) {
		stroke(255, 134, 4, 70);
		line(x1f, y1f, x2f, y2f);
		x1f += fx1;
		y1f += fy1;
		x2f += fx2;
		y2f += fy2;
	}

	//left right orange strings
	var x1g = 0;
	var y1g = 0;
	var x2g = 400;
	var y2g = 300;
	for (var i = 0; i <= numLines2; i +=1) {
		line(x1g, y1g, x2g, y2g);
		x1g += gx1;
		y1g += gy1;
		x2g += gx2;
		y2g += gy2;
	}

	noLoop();
}

LO 04 – Sound Art

Sample visualizations that Milkdrop is capable of.

Milkdrop is a visualizing plugin created by Google employee Ryan Geiss for Winamp, a media player for Windows systems. Milkdrop turns input audio such as songs or movies into abstract, constantly-changing psychedelic compositions. Since its release in 2001, Geiss has added extra features into the plugin, such as pixel shaders that allow for more complex and layered visualization presets.

Milkdrop takes the wavelength of an audio file playing in Winamp and analyzes it to create a visualization based on a preset, which is like a template for the program to convert the wavelength into a visual. Milkdrop uses a grid system on screen in which it calculates a pixel’s value based on a preset and interpolates the other pixels based on these values. In other words, it will calculate the values of about 32 x 24 evenly spaced points on the screen and averages the others based on the calculated values.

I was drawn to Milkdrop from how different it looked from other audio visualizers and how unlimited the potential for creating visualizations based in the program could be. I also found it interesting that Geiss’s skillset translated over to his work at Google, where he currently works on AI software for Pixel phones to help it take better photos.

Looking Outwards 04 – Sound Art

Image of people with Urban Lights Contacts by Scenocosme

Urban Lights Contacts is an interactive sound and light installation by Scenocosme (Grégory Lasserre & Anaïs met den Ancxt). The installation is composed of a small interactive sphere. When a person puts his or her hand on the sphere, the body turns reactive and sensitive to other living bodies. When the person touching the sphere has a physical contact with another person, the installation starts emitting sounds. Each contact of each person generates varieties of different sounds. What this installation is doing is sensing the body’s electrostatic energy and emitting them as sounds. What’s interesting and unique about this installation is that it creates a sensory interactive experience with what we cannot detect in the eye. Encouraging people to have interactive contacts with other people they don’t know also gives a total unique experience. The interactive device generates a very sensitive approach of the body, recognizing different degrees of electrostatic contacts according to the proximates of living bodies. What I find interesting is that different people produce different electrostatic energy, which also makes the installation emit different sounds as well. The artists of this installation really focus on the interactive experience, an experience people cannot see but can hear and feel through the installation.

Video of Urban Lights Contacts

Project 04

sketch
var ndx1;
var ndy1;
var ndx2;
var ndy2;

var numLines = 100;
var r = 255;
var g = 20;
var b = 150;
var n1xstart = 0;   //shape u, first line, x value of first point, etc
var n1ystart = 0;   //just variables to make values easier to change
var n1xstop = 100;
var n1ystop = 400;

var n2xstart = 300;   //same but second line
var n2ystart = 400;
var n2xstop = 400;
var n2ystop = 0;

var u1xstart = 100;   //same variables but for u shape 
var u1ystart = 0;   
var u1xstop = 0;
var u1ystop = 400;

var u2xstart = 400;  
var u2ystart = 400;
var u2xstop = 300;
var u2ystop = 0;

var t1xstart = 100;  
var t1ystart = 0;   
var t1xstop = 150;
var t1ystop = 400;

var t2xstart = 250;  
var t2ystart = 400;
var t2xstop = 300;
var t2ystop = 0;

var s1xstart = 175;  
var s1ystart = 0;   
var s1xstop = 100;
var s1ystop = 400;

var s2xstart = 300;  
var s2ystart = 400;
var s2xstop = 225;
var s2ystop = 0;


function setup() {
    createCanvas(400, 400);
    background(0);
    stroke(r, g, b);
    //line(n1xstart, n1ystart, n1xstop, n1ystop);
    //line(n2xstart, n2ystart, n2xstop, n2ystop);
    
  
    ndx1 = (n1xstop-n1xstart)/numLines;    // n shape distance
    ndy1 = (n1ystop-n1ystart)/numLines;
    ndx2 = (n2xstop-n2xstart)/numLines;
    ndy2 = (n2ystop-n2ystart)/numLines;
    
    udx1 = (u1xstop-u1xstart)/numLines;    // u shape distance
    udy1 = (u1ystop-u1ystart)/numLines;
    udx2 = (u2xstop-u2xstart)/numLines;
    udy2 = (u2ystop-u2ystart)/numLines;

    tdx1 = (t1xstop-t1xstart)/numLines;    // t shape distance
    tdy1 = (t1ystop-t1ystart)/numLines;
    tdx2 = (t2xstop-t2xstart)/numLines;
    tdy2 = (t2ystop-t2ystart)/numLines;

    sdx1 = (s1xstop-s1xstart)/numLines;    // s shape distance
    sdy1 = (s1ystop-s1ystart)/numLines;
    sdx2 = (s2xstop-s2xstart)/numLines;
    sdy2 = (s2ystop-s2ystart)/numLines;
}

function draw() {
        var nx1 = n1xstart;
        var ny1 = n1ystart;
        var nx2 = n2xstart;
        var ny2 = n2ystart;
       
        var ux1 = u1xstart;
        var uy1 = u1ystart;
        var ux2 = u2xstart;
        var uy2 = u2ystart;

        var tx1 = t1xstart;
        var ty1 = t1ystart;
        var tx2 = t2xstart;
        var ty2 = t2ystart;

        var sx1 = s1xstart;
        var sy1 = s1ystart;
        var sx2 = s2xstart;
        var sy2 = s2ystart;
    
    for (var i = 0; i <= numLines; i += 1) {   //shape u
          
          stroke(r, g, b);
          line(ux1, uy1, ux2, uy2);
          ux1 += udx1;
          uy1 += udy1;
          ux2 += udx2;
          uy2 += udy2;
          r -= 2;        //color changes as lines progress
          g += 1;
          b += 3;
    }
    r = 25;
    g = 50;
    b = 220;
    for (var i = 0; i <= numLines; i += 1) {   //shape n
        
        stroke(r, g, b);
        line(nx1, ny1, nx2, ny2);
        nx1 += ndx1;
        ny1 += ndy1;
        nx2 += ndx2;
        ny2 += ndy2;
        r += 4;
        g += 2;
        b -= 3;
    }
    for (var i = 0; i <= numLines; i += 1) {   //shape t
        
        stroke(255);
        line(tx1, ty1, tx2, ty2);
        tx1 += tdx1;
        ty1 += tdy1;
        tx2 += tdx2;
        ty2 += tdy2;
        
    }
    for (var i = 0; i <= numLines; i += 1) {   //shape s
        
        stroke(255);
        line(sx1, sy1, sx2, sy2);
        sx1 += sdx1;
        sy1 += sdy1;
        sx2 += sdx2;
        sy2 += sdy2;
        
    }
    
    noLoop();
}

LO 04 – What do machines sing of?

“What do machines sing of?” is an art piece by Martin Backes, an artist, technologist, and self-described hacker. The piece consists of a microphone placed in front of a standing computer monitor that uses a computer program to reproduce popular ballads from the 1990s. It was created in 2015.

I chose this piece because it deals with voice and language in an interesting way. The piece raises questions about the increasing capability of technology to perform inherently human tasks, but it also says something about our capacity to personify technology. While the program works to imitate a human voice through blatantly digital sounds, our perceptions work to interpret those sounds as such; thus, the program and the viewer work together to create the music.