Original picture
Possible Outcome
//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-09-A
var img;
var ImageW;
var ImageH;
function preload(){
img = loadImage("http://i.imgur.com/Iram3uO.jpg")
}
function setup() {
img.resize(800, 500);
ImageW = img.width;
ImageH = img.height;
createCanvas(ImageW, ImageH);
background(100);
img.loadPixels();
frameRate(10);
}
function draw() {
var px = random(ImageW);
var py = random(ImageH);
var ix = constrain(floor(px), 0, ImageW -1);
var iy = constrain(floor(py), 0, ImageH -1);
var pixel = img.get(ix, iy);
// image(img, 0, 0);
var b = brightness(pixel);
//layer 1 (brightest)
if (b > 80){
stroke(255);
strokeWeight(6);
textSize(6);
text("A", ix, iy);
frameRate(5000);
}//layer 2
if (b > 60 & b < 80){
stroke(191);
strokeWeight(6);
textSize(6);
text("G", ix, iy);
frameRate(5000);
}//layer 3
if (b > 40 & b < 60){
stroke(128);
strokeWeight(6);
textSize(6);
text("C", ix, iy);
frameRate(5000);
}//layer 4
if (b > 20 & b < 40){
stroke(64);
strokeWeight(6);
textSize(6);
text("T", ix, iy);
frameRate(5000);
}//layer 5 (darkest)
if (b > 0 & b < 20){
stroke(0);
strokeWeight(3);
textSize(3);
text(".", ix, iy);
frameRate(10000);
}
}
For this project I chose to use a picture of my sister. It is made up of 5 color tones to create a black to white gradient. In my code, I split up all the possible brightness values into just 5 categories resulting in a simplified gradient of value. My custom pixels were the letters A, C, G, and T. These letters represent the nucleotides that make up our DNA. Each value category corresponds to a specific letter and the darkest value (black) is just a square.