– Final ICM project –

This project evolved to be an interactive portrait photo-booth like experience in which the face of the person who is using it deforms and dissolves with each click over time.  Eventually, if the person clicks enough times, the portrait will resemble all other portraits in it’s disintegration.

Every mouse click on the canvas takes a picture and the more clicks, the more pieces the portrait divides into. When hovering over the canvas, the pieces change and exposed pieces from the previous pictures. When pressing on the CONTROL key the sketch gets reload, and when pressing on the ENTER key the canvas is saved.

The sketch went through many iterations, from mixing preloaded images of many people (from the blog HONY) to different kinds of visual ways of mixing images together, and affecting the frame around it.

Screen Shot 2015-11-11 at 6.05.59 PMScreen Shot 2015-11-17 at 11.46.22 AMScreen Shot 2015-11-17 at 11.46.14 AMScreen Shot 2015-11-11 at 7.11.38 PM

Screen Shot 2015-11-18 at 2.32.06 PMScreen Shot 2015-11-18 at 2.31.17 PM

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Screen Shot 2015-11-20 at 12.13.13 AM Screen Shot 2015-11-28 at 12.49.24 PM

 

 

 

 

 

 

 

 

 

 

 

The face completely disintegrate through continuous clicks into pixels in spaces:
Screen Shot 2015-11-21 at 5.02.00 PM Screen Shot 2015-11-21 at 5.02.10 PM Screen Shot 2015-11-21 at 5.01.43 PM

 

 

 

 

 

I wanted to add color degradation, inspired from the changes in color through space by Yaakov Agam

Agam-2

Here are variations with color

Screen Shot 2015-11-28 at 5.44.29 PM Screen Shot 2015-11-28 at 6.42.45 PM

 

 

 

 

 

 

Screen Shot 2015-12-02 at 6.03.39 PMScreen Shot 2015-12-02 at 6.06.22 PM

 

 

 

 

 

 

 

David Szauder project Failed Memories was also inspiring

Lost fragments- Failed memories- davidszauder.de

failed memories- davidszauder.de

and while searching for references I came across the artist David Crooks who made these portraits:

Daniel Crooks portrait #23 self Daniel Crooks Portrait #7 (self with safety glasses), 2011 CrooksPortrait-12-Jasmin4

 

Here is the my code! Thank you Moon, Mark and the sweet ICM list 🙂

var imgMask;
var imgMaskIndex = 0;
var imageMasks = [];

var capture;
var pics = [];
var tiles = [];

var clicks = 0;
var init = true;

// global hue value
var gHueSpeed = 5;
var gHueMin = 0;
var gHueMax = 360;

var gHue = 0;
var gHueDirection = 1;

// canvas
var imageCount = 0;

function preload() {
for (var i = 0; i < 11; i++) {
imageMasks.push(loadImage(“assets/blackFrame” + i + “.png”));
}

}

function setup() {

canvas = createCanvas(800, 600);
canvas.position(windowWidth / 2 – width / 2, windowHeight / 2 – height / 2);

capture = createCapture(VIDEO);
capture.hide();

imgMask = loadImage(“assets/blackFrame0.png”);

noCursor();
}
function draw() {
if (init) {
image(capture, 0, 0, 800, 600);

}

if (clicks % 7 == 0 && clicks !== 0) {
console.log(‘clicked :’, clicks);
changeImgMask();
clicks++;
}

for (var y = 0; y < pics.length; y++) {
for (var x = 0; x < pics.length; x++) {
var i = x + y * pics.length;
var w = pics[0].width / pics.length;
var h = pics[0].height / pics.length;
// draw sliced images
copy(
pics[tiles[i].index],
x * w, y * h, w, h,
x * w, y * h, w, h
);

// check mouse-over and change the images
if (mouseX > x * w && mouseX < x * w + w &&
mouseY > y * h && mouseY < y * h + h) {
tiles[i].currState = true;

//if (tiles[i].prevState == false && tiles[i].currState == true) {
if (!tiles[i].prevState) {
// change the pic in the tile
tiles[i].index++;
if (tiles[i].index > pics.length – 1) {
tiles[i].index = 0;
}
}
push();
colorMode(HSB);
noStroke();
fill(tiles[i].h, tiles[i].s, tiles[i].b, 0.3);
rect(x * w – 1, y * h – 1, w, h);
pop();
} else {
tiles[i].currState = false;
}
tiles[i].prevState = tiles[i].currState;

// draw random color tiles
push();
colorMode(HSB);
noStroke();
fill(tiles[i].h, tiles[i].s, tiles[i].b, 0.2);
rect(x * w, y * h, w, h);
pop();
}
}

//setGradient(50, 0, width, height, c1, c2, Y_AXIS);

if (imgMaskIndex === 0) image(imageMasks[0], 0, 0, 800, 600);
else if (imgMaskIndex === 1) image(imageMasks[1], 0, 0, 800, 600);
else if (imgMaskIndex === 2) image(imageMasks[2], 0, 0, 800, 600);
else if (imgMaskIndex === 3) image(imageMasks[3], 0, 0, 800, 600);
else if (imgMaskIndex === 4) image(imageMasks[4], 0, 0, 800, 600);
else if (imgMaskIndex === 5) image(imageMasks[5], 0, 0, 800, 600);
else if (imgMaskIndex === 6) image(imageMasks[6], 0, 0, 800, 600);
else if (imgMaskIndex === 7) image(imageMasks[7], 0, 0, 800, 600);
else if (imgMaskIndex === 8) image(imageMasks[8], 0, 0, 800, 600);
else if (imgMaskIndex === 9) image(imageMasks[9], 0, 0, 800, 600);
else image(imageMasks[10], 0, 0, 800, 600);

}

function setGradient(x, y, w, h, c1, c2, axis) {
noFill();
if (axis == Y_AXIS) { // Top to bottom gradient
for (var i = y; i <= y + h; i++) {
var inter = map(i, y, y + h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x + w, i);

}
}
}

function changeImgMask() {
//imgMask.remove();

// image mask, limit number
imgMaskIndex++;
if (imgMaskIndex > 11) {
imgMaskIndex = 11;
}

imgMask = loadImage(“assets/blackFrame” + imgMaskIndex + “.png”);

}

function mousePressed() {
if (mouseX > windowWidth / 2 – width / 2 && mouseX < windowWidth / 2 – width / 2 + 800 && mouseY > windowHeight / 2 – height / 2 && mouseY < windowHeight / 2 – height / 2 + 600) {
init = false;
var snapshot = capture.get();
snapshot.resize(800, 600);

print(‘added snapshot’);
pics.push(snapshot);

var prevNum = pow(pics.length – 1, 2);
var currNum = pow(pics.length, 2);

var h = constrain(random(gHue – 20, gHue + 20), gHueMin, gHueMax);
var s = random(90, 100);
var b = random(90, 100);

for (var i = prevNum; i < currNum; i++) {
tiles.push(new Tile(h, s, b));
}
print(tiles.length);
}
clicks++;
// to change gHue
gHue = gHue + gHueSpeed * gHueDirection;
if (gHue < gHueMin) {
gHue = gHueMin;
gHueDirection = gHueDirection * -1;
} else if (gHue > gHueMax) {
gHue = gHueMax;
gHueDirection = gHueDirection * -1;
}

}
// reload page when control key is pressed
function keyPressed() {
if (keyCode == CONTROL) {
location.reload();
} else if (keyCode == ENTER) {
saveCanvas(canvas, ‘snapshot’ + imageCount, ‘jpg’);
imageCount++;
print(“Image Saved”);
}

}

function Tile(_h, _s, _b) {

this.h = _h;
this.s = _s;
this.b = _b;
this.index = floor(random(pics.length – 0.0001));
this.currState = false;
this.prevState = false;
}