a portrait I made of
erin
i preprocessed the image of her in MATLAB, to extract out edge information & to compute the luminance gradients across the image.
the javascript portion of the program takes an luminance gradient image and an edge image and draws a portrait, using those to permute lines and squares.
next time, i may use the Retinex algorithm to separate the illuminant from the reflectance component of the image, so that i could draw the “true” shading of the underlying image using one set of lines and forms and the illumination using another.
/* Aman Tiwari
atiwari1@andrew.cmu.edu
60-212 A
Assignment-08-Project */
'use strict'
var edge_img;
var theta = 0;
var dir_img;
function preload() {
// images representing edges of image & gradients in image (canny, sobel methods used resp.)
edge_img = loadImage('http://i.imgur.com/VRDUpue.png');
dir_img = loadImage('http://i.imgur.com/RSpZkPy.png');
}
function setup() {
createCanvas(edge_img.width, edge_img.height);
translate(width/2,height/2);
edge_img.loadPixels();
dir_img.loadPixels();
colorMode(HSB);
strokeWeight(0.2);
}
function draw() {
theta = (theta + 0.01) % PI;
push();
translate(-100,0);
for(var r = -width/2 + 100; r < width/2 + 100; r = r + 10) {
var x = floor(r * cos(theta)); // polar to cartesian conversion var y = floor(r * sin(theta)); var col = dir_img.get(x,y)[0] + 50 //strength of gradient if(col[0] > 100) {
stroke(col) // line stroke based on gradient strength
} else {
// nice blue-green colours
stroke(noise(theta + frameCount/100 + 20) * 255, noise(frameCount/1000) * 255, noise(frameCount/100 + 50) * 255);
}
// if an edge is present in the image, draw a rectangle
// & rotate the gradient line by 90 degrees
if(edge_img.get(x+width/2- 50,y+width/2 - 150)[0] === 255) {
rect(x,y,4,4);
var lineOff = HALF_PI;
} else {
var lineOff = 0;
}
stroke('black');
// draws line, with slope perpendicular to image gradient at sample point
var line_r = dir_img.get(x + width/2 - 50,y + height/2 - 50)[0]; // from -180 to 180 deg
line_r = radians(map(line_r, 0, 255, 0, 360)) + HALF_PI +lineOff;
push();
translate(x,y);
line(0, 0, 10 * cos(line_r), 10 * sin(line_r));
pop();
}
}