Vanessa Kim&Chaeyun Lee – project -08- portrait

For Project 8, we produced a project that creates a computational portrait that has been pixelated by pointillism. Unlike other projects, we embedded an image that shows our side profiles. We tried to illustrate the language barrier through the white interactive mouseX function and the combination of Korean and English characters scattered in the centre of the canvas. The two figures facing each other are speaking different languages to each other and we tried to to convey the theme of cultural difference through this image.

When starting the project, we first started off with trying to capture an image that shows both of our faces then brainstormed ideas on how to convey bilingualism and language/culture issues. Then, we referenced pointillism codes to abstract the photograph we took and made it interactive in a restricted rectangle where the characters have been scattered.

Screen Shot 2015-10-27 at 오후 11.02.18

sketch

//Sophie Lee and Vanessa Kim
//15-104
//chaeyunl@andrew.cmu.edu & yookyunk@andrew.cmu.edu
//Project-08

var ourImage;
var textK = []; //korean characters
var textE = []; //alphabet

function preload() {
  var myImageURL = "http://i.imgur.com/1YYH9WT.jpg";
  ourImage = loadImage(myImageURL);
}

function setup() {
  createCanvas(800, 560); //image size equals canvas size;
  background(0);
  ourImage.loadPixels();

  var textK = ["ㄱ", "ㄴ", "ㄷ", "ㄹ", "ㅁ", "ㅂ", 
  "ㅅ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ", "ㅛ", 
  "ㅐ", "ㅗ", "ㅜ", "ㅕ", "ㅠ", "ㅑ"];
  var textE = ["A", "b", "d", "C", "E", "f", "g", 
  "H", "i", "J", "k", "L", "m", "N", "o", "p", "Q", "r",
  "S", "T", "u", "V", "W", "X", "y", "z"];

 for (var i = 0; i < textK.length; i++) {
    textSize(20);
    fill(219, 113, 101);
    text(textK[i], random(270, 370), random(100, 400));
  };

 for (var i = 0; i < textE.length; i++) {
    textSize(20);
    textFont("Georgia");
    fill(139, 163, 78);
    text(textE[i], random(410, 530), random(100, 400));
  };  
}

function draw() {
  var px = random(width); //x-coordinate for small cirlces
  var py = random(height); //y-coordinate for small circles 
  var qx = constrain(floor(px), 0, width);
  var qy = constrain(floor(py), 0, height);
  var colourAtXY = ourImage.get(qx, qy);
  
  noStroke();
  fill(colourAtXY);
  rect (px, py, 10, 10);
  
  var SophieFace = 270; //where Sophie's face ends (x-value)
  var VanessaFace = 530; //where Vanessa's face starts (x-value)

  //box where the characters are 
  var xMovement = constrain(mouseX, SophieFace, VanessaFace);
  var yMovement = constrain(mouseY, 100, 400); 
  
  var colourAtM = ourImage.get(mouseX, mouseY); //colour of image where the mouse is
  
  fill(colourAtM);
  noStroke;
  rect (xMovement, yMovement, 10, 10);
}