sketch

//Lauren Park
//ljpark@andrew.cmu.edu
//Section D
//Final Project

//initialize sound variables
var love;

//load sound file
function preload(){
love = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.wav");
}

function setup() {
  createCanvas(500, 400);
  love.loop();
  
  beat = new p5.Amplitude();
  beat.setInput(love);
}

function draw() {
  
  //abstract curves
  frameRate(1.65);
  background(50, 155, random(255), 140);
  //create the vertices curves
  var numCurvePoints = 10;
  beginShape();
  for (var i = 0; i < numCurvePoints; i++) {
    curveVertex(random(30, width - 20), random(100, height - 10));
  }
  endShape();

  stroke(random(215));
  strokeWeight(0);
  fill(254, 193, 255, 140); 
  var numCurvePoints = 12;
  beginShape();
  for (var i = 0; i < numCurvePoints; i++) {
    curveVertex(random(30, width - 20), random(95, height - 20));
  }
  endShape();

  //background lines
  for (var row = 0; row <= width; row = row + 70) {
    for (var col = 0; col <= height; col = col + 60) {
      fill(80);
      rect(random(row), random(col), 5, 45);
      fill(200);
      rect(random(row), random(col), 4, 30);
    }
  }
  
  //hoodie fill colors
  fill('#4BA680');
  ellipse(231, 300, 90, 200);
  ellipse(300, 305, 90, 200);
  ellipse(270, 390, 195, 180);
  ellipse(280, 265, 90, 100);

  //back hair
  fill('#8A4B21');
  ellipse(223, 147, 30, 30);
  ellipse(218, 160, 20, 30);
  ellipse(220, 205, 25, 30);
  ellipse(209, 227, 30, 31);
  ellipse(210, 221, 20, 30);
  strokeWeight(2);
  stroke('#4D2A12');
  fill('#8A4B21');
  curve(230, 100, 210, 137, 209, 170, 230, 150); 
  curve(230, 100, 213, 190, 187, 270, 300, 400); 

  //hoodie collar
  strokeWeight(3);
  stroke('#316E55');
  fill('#4BA680');
  beginShape();
  curveVertex(230, 215);
  curveVertex(256, 222);
  curveVertex(225, 209);
  curveVertex(245, 231);
  curveVertex(258, 191);
  endShape();
  
  //rightcollar
  beginShape();
  curveVertex(258, 171);
  curveVertex(252, 221);
  curveVertex(300, 205);
  curveVertex(371, 215);
  endShape();

  //hoodie left arm
  beginShape();
  curveVertex(271, 215);
  curveVertex(230, 218);
  curveVertex(193, 250);
  curveVertex(170, 400);
  curveVertex(193, 250);
  endShape();

  //right arm
  strokeWeight(3);
  stroke('#316E55');
  fill('#4BA680');
  beginShape();
  curveVertex(313, 223);
  curveVertex(300, 230);
  curveVertex(340, 250);
  curveVertex(370, 400);
  curveVertex(340, 250);
  endShape();

  //hood
  beginShape();
  curveVertex(205, 230);
  curveVertex(300, 205);
  curveVertex(333, 213);
  curveVertex(335, 241);
  curveVertex(300, 210);
  endShape();
  
  //inner arms shadow
  curve(230, 280, 215, 275, 205, 400, 150, 540); 
  curve(320, 250, 310, 280, 325, 400, 280, 200); 

  //face
  fill('#DAA67B');
  strokeWeight(1.5);
  stroke('#AD8361');
  ellipse(250, 175, 80, 88);

  //outer hair
  noStroke();
  fill('#8A4B21');
  ellipse(285, 200, 30, 175);
  ellipse(265, 167, 20, 40);
  ellipse(270, 190, 20, 60);
  ellipse(282, 280, 10, 30);
  strokeWeight(2);
  stroke('#4D2A12');
  fill('#8A4B21');
  
  beginShape();
  curveVertex(250, 463);
  curveVertex(290, 163);
  curveVertex(305, 270);
  curveVertex(280, 300);
  curveVertex(303, 300);
  endShape();

  beginShape();
  curveVertex(280, 300);
  curveVertex(280, 300);
  curveVertex(250, 146);
  curveVertex(200, 346);
  endShape();

  //hat
  fill(70);
  stroke(0);
  beginShape();
  curveVertex(210, 137);
  curveVertex(295, 163);
  curveVertex(210, 137);
  curveVertex(215, 125);
  curveVertex(295, 163);
  curveVertex(290, 147);
  curveVertex(215, 125);
  curveVertex(290, 147);
  endShape();

  beginShape();
  curveVertex(220, 214);
  curveVertex(215, 124);
  curveVertex(290, 110);
  curveVertex(296, 150);
  curveVertex(296, 150);
  endShape();

  //heart beat to song
  mood = beat.getLevel();
  fill(0);
  ellipse(260,300,25+mood*100, 30+mood*100);
  ellipse(280,300,25+mood*100, 30+mood*100);
  triangle(251, 309, 289, 309, 270, 330);
  ellipse(255, 317+mood*100, 3, 15);
  ellipse(277, 323+mood*100, 2, 12);
  ellipse(263, 337+mood*100, 2, 12);
  ellipse(281, 340+mood*100, 2, 14);
  ellipse(269, 353+mood*100, 2, 17);
  ellipse(261, 371+mood*100, 2, 17);
  ellipse(278, 390+mood*100, 2, 20);
  
  //ear
  stroke('#AD8361');
  fill('#DAA67B');
  curve(230, 197, 275, 170, 277, 182, 210, 230);  
  curve(260, 197, 275, 170, 277, 182, 300, 250);

  //earring
  stroke(210);
  curve(250, 87, 278, 178, 280, 179, 250, 230); 
  
  //hood string
  noStroke();
  fill(255);
  ellipse(245, 254, 3, 40);
  ellipse(247, 265, 4, 20);
  
  stroke(200);
  fill(255);
  ellipse(247, 235, 4.5, 4.5);
  curve(300, 180, 245, 235, 245, 275, 240, 300);
  curve(200, 300, 245, 275, 250, 275, 250, 250);
  curve(300, 180, 249.5, 235, 249.5, 275, 240, 300);

}

For this project, I really wanted to use a song file and have different elements and shapes move or change in rhythm to the song. I wanted to focus on the visuals and concept that also sync not only in beat but also in theme to the song. By incorporating this moody love song, I tried to capture the vibe of the music by creating a character and abstract forms in the background and by creating the dripping or bleeding black heart that beats to this song. For the color scheme and moving elements in the background, it is inspired by actual albums of the artists who sang this song. Overall, it was very challenging to properly load the sound and play around with the amplitude so that the heart beats, but it was a very fun piece that showcases some of my interests.

The artists both display abstract visuals for sounds and songs. For Julien Bayle’s “ALPHA”, I really appreciate the ragged line drawings that take on black and white visuals. Julien Bayle also seemed to have used algorithmic sequencing to construct not only the visual, but also the sounds. This artist seemed to successfully create very different, complex 2D and 3D shapes that match the beats of the sounds, but could have used these complex shapes to form a more interesting narrative that happens throughout the piece.

For Cody Courmier’s piece (“Abstract Visual Sound”), I appreciate the simple shapes and colors used for the song “Tangerines”. All these shapes and movements seem more animated and less randomized, compared to Julien Bayle’s work. There seems to be a clear beginning and finish to the piece, as if it was to visually act as an introduction to something, such as an ad, rather than to just provide visuals for the song. Overall, I think for this piece the theme could have been more specified to revolve around the mood of the song, but seemed to flow better in rhythm. 

For the final project, I wanted to find a way to somewhat visually create the mood or vibe of a moody love song I have been listening repeatedly recently. I plan to upload the sound file of this song and illustrate visuals such as abstract patterns/shapes that will move or change as this song plays throughout. There will also be a black heart that will beat according to the beat of the song by playing around with the amplifications of the sound. These objects will revolve around an illustration of a character, that represents me. Some of the objects like the lines in the background and the drips from the black heart will move as time passes. The overall visuals of this whole image is inspired by multiple different album covers of several songs that give off similar vibes. I wanted to incorporate similar shapes and forms I noticed from these albums into this project.

sketch

//Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project 11

var palms = [];

function setup() {
  createCanvas(480, 480);
  frameRate(10);
  //for loop to randomize
  for(i=0;i <10;i++) {
    var palmX = random(width);
    var palmY = random(20, 40);
    palms[i] = makePalm(palmX, palmY);
  }
}

function draw() {
  background("#00266E");
  //moon
  fill("#F7E979");
  ellipse(360, 80, 65, 65);
  noStroke();
  fill("#00266E");
  ellipse(340, 70, 45, 45);
  
  //beach
  fill("#AD9C5E");
  ellipse(240, 275, 580, 100);
  //ocean
  fill("#2D84BA");
  rect(0, 280, 480, 200);
  //ocean ripples
  noStroke(); 
  fill(103,202,221, 150); 
	for(var i = 0; i < 3; i ++){
		var wavex = random(-240, 250); 
		var wavey = random(8, 250); 
		var w = random(30, 60); 
		var h = random(3, 5); 

ellipse(width*0.7 + wavex, height * 0.7 + wavey, w, h);
  }
  
  fill(117, 223, 215, 150);
    for(var k = 0; k < 2; k ++){
		var w2x = random(-270, 170); 
		var w2y = random(-8, 170); 
		var w2 = random(30, 60); 
		var h2 = random(3, 5); 
ellipse(width*0.7+ w2x, height *0.7 +w2y, w2, h2);
  }
  
  updatePalm();
}

function updatePalm() {
  for(j=0;j<palms.length;j++){
    palms[j].move();
    palms[j].draw();
    
  }
}

function movePalm() {
  this.x += this.speed;
   if(this.x < -130) {
        this.x += width
  }
}

function drawPalm() {

  push();
  translate(this.x, this.y);
  stroke("#694000");
  fill("#884400"); 
  rect(150, 160, 13, 68);
  stroke("#3C5E00");
  fill("green");
  ellipse(150, 155, 40, 13);
  ellipse(140, 150, 43, 13);
  ellipse(170, 150, 43, 13);
  ellipse(140, 160, 43, 13);
  ellipse(170, 160, 43, 13);
  pop();
}

function makePalm(plocationX, plocationY) {
  var palmtree = {x:plocationX,
                  y:plocationY,
                  breadth:10, 
                  palmW:random(50, 80),
                  palmH: random(10, 15), 
                  speed:-15, 
                  move: movePalm,
                  draw: drawPalm}
  return palmtree;
}

I wows inspired by where I grew up, which is in California and thought of creating a landscape that displays palm trees, the beach, and ocean within a night scene. It was very challenging for me to properly randomize some of the objects at first, that made the whole scene flow when it was running. However, I did enjoy putting thought and colors into creating a new environment that allowed me to express something personal.

Camille Utterback’s “Abundance” is a commissioned artwork by ZER01 that was publicly installed in San Jose. This piece involves a setup video camera that takes the images and movements of people at the plaza, in order to translate these images and display it by projecting an animation. This animation shows silhouettes in color, of those walking in the plaza. These silhouettes are colored in cool tones unless if people are walking in groups, where then the silhouettes would be warm colored. I really admire how the artist aimed to create a piece that was ongoing and constantly changing by taking the whole environment of the plaza and transforming it into a digital piece. Different colored silhouettes seem to be highly significant, in how the public can easily view how many of those in the plaza came by themselves. Because of this, this project overall seems to create a conversation between strangers in a way. 

The artist Camille Utterback studied at Williams College and got her masters from NYU’s Tisch School Of The Arts. She currently works as an assistant professor of Art Practice at Stanford University. She is interested in creating interactions between technology and people, and so she continues to create digital artworks that connect computational softwares and human behavior.

For this project, because of the weather changes recently, I was inspired to have users interact with the image and listen to different sound effects of weather. When the user clicks on different images, they can expect to hear each sound, including sounds that relate to thunder, wind, rain, as well as sounds you can hear on sunny days. I enjoyed playing around with different sound files to match with images, but it was very challenging getting the sound files to load properly.

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/sunny.wav");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wind.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(600, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/4 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
}

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.mp3");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wind.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(500, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/5 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
} 

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.wav");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wind.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(500, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/5 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
} 

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/sunny.wav");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(500, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/5 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
} 

Artist Cyrill Studer created a music video of “Baby Behold” for a band called Carvel’ on May 5, 2017. Because this song contained electronically and upbeat tunes, the artist decided to use different forms of an ellipse that match the rhythm of the song. I really admire how video making interacts with algorithm in this piece, where color, shifting and moving shapes can represent the overall vibe of the song and make it easy for listeners to be hooked by the beat of the music. I personally enjoyed this very simplistic visual concept of one ellipse going through different changes as the song progresses.  These visuals were created by translating code in the program called Processing. And then After Effects was used for video editing.

The artist  was aiming to create computer graphics that take on an older, vintage look. And the simple pattern of how the ellipse moves as well as the dark teal color does seem to remind us of an old-fashioned  reference to how older computers looked when it ran. This seems to be successful especially when the music has electronic elements that combines harmoniously with this visual theme. 

https://cyrillstuder.ch/carvel-baby-behold

This project seems very fascinating in ways that animation and software can be used to make very detailed graphics of the respiratory system. 

I agree with Danny that this animation is not a literal representation of the system, but that it abstracts from actual biological processes that happen in our bodies. I feel that the artist, Alexey Kashpersky did not have in mind how accurate this representation was, and that maybe it was not as important as the visual appeal of the inside of the respiratory system and to let the audience know how vast and unique our bodies are by using color and different forms interacting.

The zoom in and out effect throughout this piece really added a flow to this whole experience that made the system feel like viewers are being walked through a story. Because of this, I enjoyed what seemed like a virtual tour of the many wonders that take place in our bodies.

This overall experience also makes me curious about the software used to create this animation and has me realize how much this tool can be useful in our creative practice.

sketch

//Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Assignment-09
var selfportrait;

function preload() {
//load image
  var imageURL = "https://i.imgur.com/Z0Egws0.jpg";
  selfportrait = loadImage(imageURL);
}

function setup() {
  createCanvas(480, 480);
  background(0);
//load pixels at a rate
  frameRate(200);
  selfportrait.loadPixels();  
}

function draw() {
 var px = random(width);
 var py = random(height);
  
 var qx = constrain(floor(px), 0, width);
 var qy = constrain(floor(py), 0, height);
  
 var colorMylocation = selfportrait.get(qx, qy);
 var colorMymouse = selfportrait.get(mouseX, mouseY);
  
//fill and color pixels with text
 strokeWeight(3);
 fill(colorMylocation);
 text("Lauren", px, py);
  
//draw and color ellipse at my mouse location
 fill(colorMymouse);
 noStroke();
 ellipse(pmouseX, pmouseY, 8, 8);
}

For this project, I decided to make a computational self-portrait using my name in text to create and color the image. Adding my name I think adds another personal element that goes along with my self-portrait and I also wanted to incorporate using the mouse to load the pixels, using ellipses, in the picture faster.

Jake barton is the founder of a media design company called Local Projects, that is based in New York. Jake Barton  had attended college for performance studies. He focuses on making work that tells a story to wide audiences through an technological and emotional connection. 

What I really admire about Local Projects and when it comes to howJake Barton envisions the world through his works, is how he uses the technololgy around us and coding language to solve not only systematic issues that the world faces, but also allow for emotional satisfaction by allowing humans to interact with his projects. He helps produce designs that are not just visually appealing for commercial purposes, but emphasize emotional appeal. The designs seem to have a another layer that significantly helps give people a voice. I specifically admire the project called “A Museum of Collective Memory” because of how this piece has opened my mind in imaging solutions that algorithms can help build. This project used an algorithm that arranged names through personal relationships with the victims.

An effective strategy they use to present work is by prototyping products first before finalizing an idea. They test multiple times to make necessary improvements for a better product. I learned that before making a final submission, it is important to run and go through trials to factor out any problems when it comes to working with coding and design. One solution, small or big, can make a huge difference in the product. 

http://eyeofestival.com/2012/speaker/jake-barton/

https://localprojects.com/about