LO-10

Badlands by Don Ritter is a sound art project that pairs sound with images of the Canadian Badlands. The image aspect of the project is controlled by live music; the speed at which the image moves is based on the tempo and pitch of the music being played. I was very interested in this project because the music controls the image, not the other way around. Most projects that I have looked at up to this point are based around the image first. In order to do this, Ritter uses a software called o8, which is based on Orpheus. The software is made to interpret and analyze the music that is being played in order to control the image. This also allows for artistic interpretation: Ritter (or anyone with the proper set up) could set the image to any music that he wanted and the project would be different than it would be with any other musical selection.

A link to a diagram that shows the technical requirements and setup, along with other information about Don Ritter’s Badlands project (2001)

Don Ritter’s website

Alien Abduction

This story began as an idea to create a city environment using ambient noise. Then I thought about making some kind of event occur to break that ambience, which ended up being an alien abduction. From there I developed the idea to create some kind of resolution, which became the superhero who flies off after the UFO. My sound effects were the city noise, ufo slowing down, ufo beam, ufo flying, singe scream, crowd scream, single shout, crowd cheer, and an outro theme.

Alien Abduction
var city;      
var scream;
var ufoSlow;
var ufoBeam;
var ufoFly;
var crowdscream;
var yell;
var cheer;

function preload (){
    city = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/busycity.wav");       //city noise
    scream = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/screams.mp3")       //abductee scream
    crowdscream = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/crowdscream.wav");       //crowd screaming
    ufoSlow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ufoslow.wav");       //ufo slowing down
    ufoFly = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ufowave.wav");       //ufo flying away
    ufoBeam = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ufowave.wav");       //ufo capture beam noise
    yell = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/hey.wav");        //superhero yell
    cheer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheer.wav");       //crowd cheering noise
    outro = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/outro.wav");       //outro music
}

function soundSetup(){

    city.setVolume(0.3);        //setting the volume for each noise
    scream.setVolume(1);
    ufoslow.setVolume(0.5);
    ufoBeam.setVolume(0.7);
    ufoFly.setVolume(2);
    crowdscream.setVolume(.3);
    yell.setVolume(1.5);
    cheer.setVolume(1);
    outro.setVolume(1);
}


var x = [];       //x position of given person
var y = [];       //y position of given person
var dx = [];        //speed of given person
var cx = [];        //x position of given car
var cy = [];        //y position of given car
var cdx = [];       //speed of given car
var skin = [];        //skin color of given person       
var shirt= [];        //shirt color
var pants = [];       //pants color
var carW = [];        //width of car
var carH = [];        //height of car
var h = [];           //height of person
var w = [];           //width of person
var ufoY = 0;         //y position of ufo
var ufoX = 0;         //x position of ufo
var aY = 300;         //abductee y position
var sX = 0;           //superhero x position
var sY = 170;          //superhero y position


function setup() {
    createCanvas(400, 300);
   
    for (var i = 0; i < 20; i++) {
        x[i] = random(25, width-25);
        y[i] = height-25
        dx[i] = random(-3, 3);
        shirt[i] = color(random(0,255), random(0,255),random(0,255))
        skin[i] = color(random(200,250),random(100,150),random(20,100))
        pants[i] = color(random(0,255), random(0,255),random(0,255))
        h[i] = random(15,20);
        w[i] = random(5,8);
        frameRate(10);
    }
     for (var c = 0; c < 5; c++) {
        cx[c] = random(25, width-25);
        cy[c] = height-15
        carW[c] = random(20,40);
        carH[c] = random(15,20);
        cdx[c] = random(-5, 5);
    }
}

function draw() {

  if(frameCount<100){
    city.play();    //play city sound until UFO comes
    }
  
  background(43,226,232);       //light blue

  push();
      rectMode(CORNER);
      fill(169,169,169,150);    //gray
          rect(width/2,height-height/4,100,height/4);       //buildings
          rect(width/6,height-height/4.5,75,height/4.5);
          rect(width/6-25,height-height/7,25,height/5);
  pop();

    for (var c = 0; c < 5; c++) {
        car(cx[c], cy[c],carW[c],carH[c],cdx[c],shirt[c]);        //call car function
            cx[c] += cdx[c];        //move car horizontally
                if (cx[c] > width-25 || cx[c] < 25){        //turn around if hits edge
                    cdx[c] = -cdx[c];
        }
    }

    for (var i = 0; i < 20; i++) {
        person(x[i], y[i], dx[i], skin[i],shirt[i],pants[i],h[i],w[i]);       //call person function
            x[i] += dx[i];
                if(frameCount>100){
                    x[i] += 2*dx[i];       //speed up in panic when UFO comes
    }
        if (x[i] > width-25 || x[i] < 25) {       //turn around if hit edge
            dx[i] = -dx[i];
        }
    }
   
  push();
      rectMode(CORNER);
      fill(169,169,169);    //gray
          rect(0,height/2,50,height/2);       //back buildings
          rect(width-75,height-height/3,75,height/3);
  pop();


   if(frameCount>50){
    push();
         translate(ufoX,ufoY);        //translate ufo shape
                 UFO(width/2,-300);     //call ufo function to draw 
         
    pop();

    ufoSlow.play();         //play ufo slow noise      
   }
    if(frameCount>100){
        city.stop();        //stop city noise
        scream.play();        //start scream   
        ufoBeam.play();       //start beam noise
                   
   }
   if(frameCount>100 & frameCount<115){
       fill(21,249,36,150)        //light green
            triangle(width/2,height/2,width/2-50,height,width/2+50,height)        //ufo beam
                abductee(width/2,aY);       //call function to draw person
         aY-=11;        //move abductee upwards
           
    }
   
   ufoY+=4;        //move ufo down

   if(frameCount>85){
       ufoY-=4;        //stop ufo
       ufoSlow.stop();        //stop ufo sound

    }

   if(frameCount>115){
       ufoY-=3;       //move ufo up and right
       ufoX+=10;
       ufoBeam.stop();       //stop beam noise
       scream.stop();       //stopscream noise
       ufoFly.play();       //play ufo sound
       crowdscream.play();        //play crowd scream noise
    }

   if(frameCount>135){
       ufoFly.stop();       //stop ufo sound
    }

   if(frameCount>150){
       push();
           rotate(radians(50));       //turn diagonally
               superhero(sX,sY);        //call superhero function to draw
       pop();

           sX += 15        //move superhero diagonally(adjusted for rotation)
           sY -=20
    }

   if(frameCount>152){
       crowdscream.stop()
    }

   if(frameCount>152 & frameCount<154){    //as superhero flies he yells
       yell.play();
    }

   if(frameCount>160){        //as superhero flies by, people cheer
       cheer.play();       //play cheering
    }

   if(frameCount>200){
       outro.play();       //play song
       cheer.stop();       //stop cheering

       push();
           rectMode(CORNER);
           fill(255,0,0);       //red
               rect(0,0,400,300);        //red background
           textSize(50);
       fill(0);        //black
           text("THE END",100,150);

    }
   if(frameCount>500){
       outro.stop();       //end song    
    }       

}

function person(x,y,dx,skin,shirt,pants,h,w) {
 
    fill(skin);       
        ellipse(x,y-5,5, 5);        //head
    rectMode(CENTER);
    fill(shirt);
        rect(x,y+10,w,h);       //body
    fill(pants);
        rect(x,y+25,w,h);       //legs
   
}

function abductee(x,y){

    fill(219,150,30);       //beige
        ellipse(x,y-5,5,5);       //head
    rectMode(CENTER);
    fill(0,255,0);        //green
        rect(x,y+10,5,15);        //shirt
    fill(0,0,255);        //blue
        rect(x,y+25,5,15);        //pants
}


function car(cx,cy,carW,carH,cdx,shirt){
    fill(shirt);        //same as shirt, so just to save a variable
        rect(cx,cy,carW,carH);        //body of car
    noStroke();
    
     if (cdx < 0) {         //if car turns around  
        rect(cx-17,cy+4,10,10);        //front of car on left
    } else {
        rect(cx+17,cy+4,10,10);        //front of car on right
    }

    fill(0);       //black
        ellipse(cx-10,cy+10,10,10);       //wheels
        ellipse(cx+10,cy+10,10,10);
    
}


function UFO(x,y){

    push();
        translate(x,y);
        scale(2);
        fill(152,152,152);  //gray
            ellipse(0,50,40,15);    //ufo body
            quad (-5,52,-15,60,-14,61,-4,53)    //left landing leg
            rect (-2,52,1.5,10)     //middle landing leg
            quad (1,52,11,61,12,60,4,53)    //right landing leg
        fill(175,238,170,200);  //opaque green-blue
            ellipse(0,45,25,15);    //window dome
        fill(255,0,0);      //red
            circle(-12,52,3);   //left light
            circle(12,52,3);    //right light
        fill(255,255,0);    //yellow
            circle(0,54.5,3);   //middle light

    pop();
}

function superhero(x,y){
    fill(255,0,0);        //red
        quad(x+5,y+2,x-5,y+2,x-15,y+30,x+15,y+30);        //cape
    fill(219,150,30);       //beige
        ellipse(x,y-5,10,10);       //head
    rectMode(CENTER);
    fill(0,0,255);        //blue
        rect(x,y+10,10,20);       //body
    fill(0,0,255)
        rect(x,y+25,10,20);       //legs
        quad(x+2,y+5,x+8,y-10,x+10,y-8,x+5,y+6);        //right arm
        quad(x-2,y+2,x-8,y+17,x-10,y+15,x-5,y+4);       //leftarm
    fill(255,0,0);        //red
        rect(x,y+35,10,5);        //boots
}

Looking Outwards 10 – Aphex Twin

https://www.bing.com/videos/search?q=aphex+twin+4&docid=608012986934038317&mid=85290F2AD34FFDF7115B85290F2AD34FFDF7115B&view=detail&FORM=VRAASM&ru=%2Fvideos%2Fsearch%3Fq%3Daphex%2Btwin%2B4%26qpvt%3Daphex%2Btwin%2B4%26FORM%3DVDRE

Aphex Twin – “4”

Eamonn Burke

This is one of my favorite electronic songs, because it seems to blur the line between repetition and randomness in rhythm.
The beat is entrancing to me, but the changes in frequency in speed also keep your attention as you listen, as well as the pauses
and extra sound effects.

There seems to be an oscillation in the background that ranges from a very high frequency to a middle range one. One top of this,
there are notes playing at a high but varying speed, which appear to slightly oscillate in amplitude themselves. The last layer is
the beat, which repeats at a high tempo, and at certain parts of the song it speeds up greatly, creating a sort of “stutter” effect.

As I said before, I think that Aphex Twin’s creative sensibilities come in using these tools to create a high energy and spontaneous
track that commands your attention and sounds different every time you hear it, because of the unpredictability of the changes in the
melodies and rhythm.

LO – 10

“Aura” by the Stanford Laptop Orchestra, who also go by SLOrk, is a wonderful work or art that is very harmonic and calming. Using ChucK, a programing language specifically for music creation, and SLOrk music lanterns about nine artists move the lanterns – “auras” – from side to side to communicate with ChucK via WiFi to create the music, lights, and colors. This piece starts with one voice, and gradually the rest join in to create harmony. The initial voice “calls” the other voices to join in and their auras all have the same light, thus creating “harmony”. However, as they all join the auras become unique in color though still in harmony. As the piece ends, the artist move apart leaving their auras behind. What makes this work so special is that it embodies the “why” qualities of humans. The idea was that as human relationships grow, their auras blend and harmonize, and remain as memories. It’s the positive light radiating off others that forms as we grow close with one another and share memories. Something that we see with our “third eye” as we interact and reminisce. A lot of SLOrk’s work explores and embodies humans through music and technology. This piece was such a wonderful embodiment and a light in some stressful times we are all going through right now. Even during these crazy times we all have relationships with people that are helping us through these times.

If you want to see more of their work check out their website:

http://slork.stanford.edu

To see this specific piece:

http://slork.stanford.edu/works/aura/

And here’s the video:

Portrait – Painting

Painting

var strokeX = 7		//horizontal size of dots
var strokeY = 7		//vertical size of dots
var size = 7		//space between dots
var portrait;		//my image
var painted = [];		//the painted 
var erased = [];		//the erased area
var erasing;		//boolen for whether or not erasing has been activated
var brushSize = 20		//defines what is "near mouse"

function preload(){
	portrait = loadImage("https://i.imgur.com/iJq4Jtv.jpg")		//loading imgur image into variable
}

function paint(){			//draw function for paint object
    fill(portrait.get(this.x,this.y))		//calling the color at the certain image coordinate
		ellipse(this.x,this.y,strokeX,strokeY)		//drawing an ellipse at that coordinate
}

function erase(){
	fill(255,241,175)
		ellipse(this.x,this.y,strokeX,strokeY)
}

function makePaint(px,py){		//constructor for paint object
p = {x:px,y:py,		
	drawfunction:paint
}
return p;
}

function makeErase(ex,ey){		//constructor for erase objecg
e = {x:ex,y:ey,
	drawfunction:erase
}
return e;
}


function setup() {

createCanvas(300, 400);
   background(255,241,175);		//beige
   noStroke();
   ellipseMode(CORNER);		//ellipses defined by "corner"

}


function draw() {

	background(255,241,175)		//beige

	for(i=0;i<painted.length;i++){		//display function for paint object
		painted[i].drawfunction()		//calling the draw function for the array of objects
}


if(mouseIsPressed){
	 for(x=0;x<=width;x+=size){		//for loop to set up dots
		for(y=0;y<=height;y+=size){
			if (nearMouse(x,y) == true){
				if(erasing == false){
					var p = makePaint(x,y)
			        	painted.push(p)
			        brush(mouseX,mouseY)
			    }
			        if(erasing == true){
			        	var e = makeErase(x,y)
			        		painted.push(e)
			        	eraser(mouseX,mouseY)
			    }
			}
		}
	}
}


	fill(128,88,43);	//brown
		rect(0,0,width,20);		//drawing the border
		rect(0,0,20,height);
		rect(0,380,width,20);
		rect(280,0,20,height)

	fill(255);		
		textSize(7);
		text('Press P and Drag to Paint',20,13);		//instructions
		text('Press E and Drag to Erase', 195,13);
		text('Press A to paint abstractly',20,391);
		text('Press R to paint realistically',190,391);
		text('b for smaller brush',120,8);
		text("B for bigger brush", 120,15);
}

function nearMouse(x,y){
	if (dist(x,y,mouseX,mouseY)<brushSize){		//if the mouse is within "brush size" of given x and y coordinates
		return true;
	}
	return false;
}

function brush(x,y){		//drawing the paintbrush
	
	push();
		rectMode(CENTER);
			fill(222,184,142);		//light brown
				rect(x,y+20,15,70);		//the handle
		ellipseMode(CENTER);
			
	if(mouseIsPressed){
		fill(portrait.get(x,y))		//fill with color of image coordinate that it is above
		}else{
			fill(0)		//fill black is not pressing
}
		ellipse(x,y-5,20,12)		//the brush
		triangle(x,y-25,x-10,y-5,x+10,y-5)
	pop();
}

function eraser(x,y){
	
	push();
		rectMode(CENTER);
			fill(245,116,240)		//pink
				rect(x,y,30,40)		//eraser shape
	pop();
}

function keyPressed (){

	if(key=="a"){
		strokeX = random(5,100)		//pick random shape of the dots, and random seperation
		strokeY = random(5,100)
		size = random(0,5)
	}

	if(key=="r"){		//shrink the dots and space between
		strokeX = 2
		strokeY = 2
		size = 2
	}

	if(key == "B"){
		brushSize +=5		//increase the brush size (more dots included in nearmouse function)
	}

	if(key == "b"){			//decrease brush size (less dots included)
		brushSize -=5
	}

	if(key == "p"){
		erasing = false		//not erasing (painting)
	}

	if(key =="e"){
		erasing = true		//erasing (not painting)
	}
}




LO – Digital Grotesque

As a fellow studier of architecture, I also admired this piece’s structural qualities. However, it seems my peer and I are taking two different scopes when admiring the project. He remarked on the delicate ornate detailing, while I find myself inspired differently. To me this project ponders a larger idea, that at one point in our future not only products, but entire environments will be digitally fabricated. I agree with my peer that the intricate detail is astounding and impressive, but I would disagree that it is the “main idea” of the work. I think that it’s actually the opposite: I see this project as attempting to ponder a massive, and extremely scary question: can an environment be digitally manufactured with a level of detail that actually makes it impossible to distinguish from a “natural environment”. Like a simulation, the detail is there not to draw attention, but to dismiss attention that might expose the environment as “fake”. For example, someone standing in an empty room knows it’s man made, because no natural environment really looks like it. In the middle of a forest, however, we don’t even consider that the environment is fake, because of the sheer amount of detail.

https://www.bing.com/videos/search?q=digital+grotesque+vimeo&&view=detail&mid=87EF57FBFB7556D6E77787EF57FBFB7556D6E777&&FORM=VRDGAR&ru=%2Fvideos%2Fsearch%3Fq%3Ddigital%2Bgrotesque%2Bvimeo%26FORM%3DHDRSC4

LO-09

This week, I looked at Shaun’s post about Ariel Waldman. It is crazy that she got a job with NASA right out of art school by cold calling them! I think that this background makes her perfect for the project that Shaun talks about in his blog: she seems to be all about making space exploration (and all of her other projects) more accessible to the average person. I wonder if this is because she did not have as much of a science background coming out of school, and therefore she is able to articulate concepts in ways that average people understand.
When I looked through her website, I saw that she also wrote a book titled “What’s It Like in Space?: Stories from Astronauts Who’ve Been There.” This is another project that, like Spaceprob.es that Shaun talked about in his post, gives everyone a look into what going to space is like. Right now, few people can actually go to space; significantly more people can read her book or visit her website.

Shaun’s original LO-08 post

Ariel Waldman’s website

Ariel Waldman’s book: What’s It Like in Space?: Stories from Astronauts Who’ve Been There (2016)

Project 09: Computational Portrait

This whole portrait is a picture of me sitting on a ledge outside of CFA, comprised of tinted covers of some of my favorite albums of music. It really took some experimentation to get the number of blocks correct, since with too many it would crash the program and with too few you couldn’t really notice the image. Tint() also wasn’t very happy with the original covers, so I had to edit them to make sure the colors would appear correctly. Finally, I added a random component to their generation just to add something interesting as they loaded in.

portrait

var pic;
var pixel = []
var covers = []



function preload(){ ///loads the album covers from the imgur posts
  var coverFile = []
  pic = loadImage("https://i.imgur.com/9if5OBK.jpg") ////some of my favorite albums to play on guitar and listen to
  coverFile[0] = "https://i.imgur.com/vh9pN9D.png"
  coverFile[1] = "https://i.imgur.com/ojxUjeG.png"
  coverFile[2] = "https://i.imgur.com/udq9ixk.png"
  coverFile[3] = "https://i.imgur.com/CgaJ3WV.png"
  coverFile[4] = "https://i.imgur.com/JjaAoNi.png"
  coverFile[5] = "https://i.imgur.com/BBocb2g.jpg"
  coverFile[6] = "https://i.imgur.com/qx4C4pJ.jpg"
  coverFile[7] = "https://i.imgur.com/hrqxmIj.jpg"
  for (var e = 0; e < coverFile.length; e++) {
        covers[e] = loadImage(coverFile[e]);
    }
}


function drawPixel(){ ///draws and colors each album cover
  tint(pic.get(this.x, this.y))
  image(covers[this.selection], this.x, this.y, 20, 20)
}




function makePixel(pixSelect, pixX, pixY){ ///creates the individual pieces of the portrait
  p = {x: pixX, y: pixY, selection: pixSelect,
    drawFunction: drawPixel
  } 
  return p
}



function setup(){ ///loads each pixel of the image, creates a square, and sends it to an array
  createCanvas(480, 480)
  frameRate(100)
  pic.loadPixels()
  noStroke()
  for (i = 0; i <= 24; i++){
      for (k = 0; k <= 24; k++){
          var p = makePixel(round(random(0, 7)), i * 20, k * 20, )
          pixel.push(p)
          }
      }
}

function draw(){  ///draws in squares randomly, up to 448, total number of the image
  var p = pixel[round(random(0, 448))]
  p.drawFunction() 
}





LO 09: On Looking Outwards

https://www.moma.org/interactives/exhibitions/2011/talktome/objects/145525/

I read a post by Shaun Murray about Stefanie Posavec and Greg McIrney’s (En)tangled Word Bank. I think his assessment of Posavec’s style in her use of color is accurate and I also feel like she is an artist who values organized complexity. Each section features well-sorted data on each of Darwin’s revisions, and while it doesn’t fall into some sort of obvious pattern it is clearly thought out and built to be visually cohesive. It is easy to see what has been changed due to the color coding of each circle, and while they are different, they all share the same structure to convey clarity and allow viewers to really understand and make good use of her work. I think McIrney’s contributions and style also share that same creative space of controlled, thought out design and balance of color to create interest and dynamism but also present material in an easy to understand manner.

Project-09-Portrait

sketchDownload
// Isabel Xu
//Section A
//yuexu@andrew.cmu.edu
//Project-09


var underlyingImage;
var ix;
var iy;
var px;
var py;

function preload(){
	var myIMG = "https://i.imgur.com/Kks4pC9.jpg"
	underlyingImage = loadImage(myIMG);
}
function setup() {
    createCanvas(735, 595);
    background(255);
    imageMode(CENTER);
    underlyingImage.loadPixels();////get pixels from the picturev
    frameRate(99999999);
}

function draw() {
	var px = random(width); //x position of the storke
    var py = random(height); //y postotion of the stroke
    var ix = constrain(floor(px), 0, width-1); //x position of each pixel
    var iy = constrain(floor(py), 0, height-1); //y position of each pixel
    var theColorAtLocationXY = underlyingImage.get(ix, iy);//get the color of each pixel

    noStroke();
    fill(theColorAtLocationXY);
    drawStar(px,py);

}
//star shape
function drawStar(px,py){
	beginShape();
	vertex(px-4,py-15);
	vertex(px-3.5,py-19);
	vertex(px-6,py-22);
	vertex(px-2,py-22);
	vertex(px,py-26);
	vertex(px+2,py-22);
	vertex(px+6,py-22);
	vertex(px+3.5,py-19);
	vertex(px+4,py-15);
	vertex(px,py-17);
	endShape();
}
programs runs for 1 min
more completed result
The portrait is a collage of myself.
Medium: Photography and oil paint

In the self-portrait, I want to bring in the gentleness and floating elements of water and the dreamy stars effect to the scene.