Category: Project-08-Portrait

Project 08: Generative Portrait

For this project, I chose to render my brother. I originally had wanted to use particle systems to create a water-like simulation on top of the loaded pixels using a mutual repulsion force. In this sketch, however, I used a gaussian distribution to create a black hole in which the array of tiny pixel ellipses would form and disappear. The sketch did not turn out as I had hoped since I did not use a gradually added velocity and just layered the gaussian particles on top of the grid, and used too many ellipses in the for loops. This made the transition abrupt and the program slow.
Screen Shot 2015-12-18 at 6.28.11 AM

Screen Shot 2015-12-18 at 6.28.30 AM

Screen Shot 2015-12-18 at 6.29.13 AM

Screen Shot 2015-12-18 at 6.29.31 AM



Project 08 – Staff Picks

In Project 08, students from 15-104/60-212 produced some lovely computational portraits, involving all manner of play with (or based on) the constituent pixels of photographs of their friends, families, and selves.

Sydney Ayers & Samantha Mack produced one of the most technically ambitious investigations: a classic 15-piece puzzle made of images of their friends. Try it out!

Puzzle by Syd & Sam


John Sprong‘s project reveals a portrait through colored triangles, drawn by the viewer’s cursor, whose lengths are governed by the velocity of the viewer’s gestural drawing.


Aman Tiwari developed this unique radar-like display, by pre-processing an image of his friend beforehand in Matlab. Aman calculated local image gradients, using Sobel filters and related edge detectors, in order to guide the placement of the short lines shown here.


Antonia James created an interactive treatment in which the vertical movement of the cursor resamples an image in different ways, with lines of varying weight.


In Zain Islam-Hashmi‘s accretive treatment, dynamic spirals transduce the color of the underlying image as they grow.



Comments Off on Project 08 – Staff Picks Posted in

sayers and sdmack Project 08

We have created a slide puzzle using still images of Gidon Orelowitz and Ivan Weis-Palacios (our boyfriends). (The Ivan version is posted here- visit Sydney’s page to play the Gidon version!:  Creating this puzzle involved several smaller puzzles within the big puzzle (such as how to shuffle all the tiles, switching tiles, edge cases etc.) and a lot of caffeine and hard work.  The code allows for any imgur.jpg image to become the puzzle (400×400).  The work was divided evenly with collaborative brainstorming for each step.  This was definitely a challenge, but we are very happy with the result! Thank you so much to Gidon Orelowitz for helping us greatly with the logic of this puzzle (and knowing about group theory and the 15 puzzle and edge cases).

Go to the very end for a Spooky Surprise!



Screenshots (Ivan):

Screen Shot 2015-10-29 at 10.30.09 PM        Screen Shot 2015-10-29 at 10.30.40 PM

Screenshots (Gidon):

Screen Shot 2015-10-29 at 10.23.19 PM       Screen Shot 2015-10-29 at 10.23.04 PM

Project: (This is the Ivan version- visit Sydney’s page to play the Gidon version!) :)


Screen Shot 2015-10-29 at 10.47.40 PM Screen Shot 2015-10-29 at 10.48.00 PM





PS: The opening credits of The Shining are teal.  The scariest color.



Matthew Lin – Project 08


For this project, I chose to draw the portrait in a similar manner to a printer. The dots are enlarged circles at random y-values for each x-value. Each new line that moves across the canvas adds more detail to the image and adds more definition to facial features. In terms of viewer interaction, holding down the left or right arrow key will color the image with a different overall shade. Pressing the left arrow key will create a new line of dots that move left across the canvas, while pressing the right arrow key will produce the opposite result. The line of dots that move left have a green shade to them, and if held long enough, the overall image will take on a green color. Similarly, the dots created by pressing the right arrow key have a red shade. Having the three rgb values allows for multiple possibilities in terms of overall color.


**Accidentally submitted late because I waited to take a screenshot of it :(

For this project, I chose my brother as the subject. I wanted to explore the use of lines with different sizes and thicknesses in order to make up the portrait. The viewer can control the width of the middle lines based on their mouse position.

Screen Shot 2015-10-29 at 2.56.50 AM

Screen Shot 2015-10-30 at 12.12.32 AM





I made a computational self portrait that incorporates the curve function I used from one of the past project. I realized though that, waiting for this curve to fill the canvas would take too long and if the circles are too big it makes it hard to see the photo, so I made a spray can to see more details about the portrait.


Project-08-Portrait-Ben Snell

Multidimensional Image Extrusions

I chose to explore the visualization of color photography as a multidimensional form of data capture. Using the form of a tetrahedron, which is well suited for interfacing with four-dimensional data sets, I projected the individual R, G, and B channels from a single face outward onto their own separate faces. This can be thought of, in simple terms, as a three dimensional bar chart, where different colored bars originate at the same location but are extruded at different angles. The result is a particularly interesting form exhibiting crystal-like formations, that allows us to view and understand color photography in a whole new light.

The portrait is of myself, and has, strangely enough, turned my hair white. Could this be a manifestation of my future self living within a purely digital world?

Here are some of my process sketches and screengrabs:

IMG_5263 IMG_5264 IMG_5265 IMG_5266 IMG_5267

Screen Shot 2015-10-29 at 10.59.12 PM Screen Shot 2015-10-29 at 8.07.08 PM Screen Shot 2015-10-30 at 12.29.14 AM Screen Shot 2015-10-30 at 12.09.40 AM Screen Shot 2015-10-30 at 12.12.12 AM

And here is the final piece:

I used Three.js and a few functions written by the illustrious Mr.Doob. If the above visualization is not displaying correctly, try loading the page, or clicking / dragging on the image.

		Tetrahedron using Three.js revision 73




For this project I focused more on creating a piece that would draw the eye around, then developing the final image at the end. It took me a while to figure out how to make the paths change direction randomly and in the end it wasn’t exactly what I wanted. If I were to return to this project I would try and make it so that the pixels traveled up and down with no trail and continued to travel even when the next one was called. I also think that pixel size in that project would be the same in stead of random.

//Alex E. S. Reed
//15-104 MWF 12:30

var underlyingImage;
var size; //size of the pixels
var ix, iy;
var theColorAtLocationXY;
var spotX; // location on x
var spotY; // location on y
var count = 0; //number of clicks
var speed;
var speed2;

function preload() {
var myImageURL = ‘’;
underlyingImage = loadImage(myImageURL);

function setup() {
createCanvas(370, 320);

function draw() {

if (count % 2 == 0) { // if the count is even set the y speed
spotY = (spotY + speed) % 200;
spotX = spotX + speed2;
} else {
spotX = (spotX + speed) % 200; // if the count is odd set the x speed
spotY = spotY + speed2;

function spots () {
sizeA = random(6, 20);
sizeB = random(6, 20);
ix = constrain(floor(spotX), 0, width-1);
iy = constrain(floor(spotY), 0, height-1);
theColorAtLocationXY = underlyingImage.get(ix, iy);



if (count % 2 == 0) {
rect(spotX, spotY, sizeA, sizeB); // if the count is even draw a rect
} else {
ellipse(spotX, spotY, sizeA, sizeB); // odd draw a circle

function crossHairs() {
line(mouseX, 0, mouseX, height);
line(0, mouseY, width, mouseY);

function mousePressed () { // this function places a cross hair and a pixel at the correct place

spotX = mouseX;
spotY = mouseY;


var m = constrain(mouseX, 0, width); //x boundaries
var p = constrain(mouseY, 0, height); //y boundaries

if (mouseX == m && mouseY == p) { // if the mouse is clicked in here
count ++; //increase count

speed = floor(random()*3 – 1);
speed2 = floor(random()*3 – 1);

Johanna McAllister Project-08

This is blatantly a small adjustment to Golan’s notes. Instead of plain squares and circles, the pixels are the image itself, modified by the tint function.

Jo Project 08

After spending a good amount of time trying to debug the following code, this non-functional program below was my original idea. Inspired by Roy Liechtenstein’s layered works, I had planned to isolate shapes (or blobs), determined by whether or not the brightness of their pixels are in a given range of brightnesses. If I were to adjust the range of brightnesses, different shapes would appear. The prospective end result would have been a time-based series of these shapes. In rapid succession, these different frames would have been able to show my sister’s face.

Here is the code.