P5.JS first sketch – self portrait

For the first assignment I decided to create a self portrait. 

I thought a lot about what would be interesting for me to work on, and after a few Ideas were tossed around in my notebook I decided I want to abstract the self portrait and to try and break down a high resolution image and work with the 2d matrix.

A 2D image is based of pixels distributed in matrix of X and Y. every pixel has an X value and a Y value for its position, plus holds its color attribute, for example if we look at the smiley face below X = 0, Y=0, (255,255,255,1).

Initial mock

Every pixel has its own luminance attribute that ranges between 0 (absolute black) and 255 (absolute white).

Pixel luminance – graphic representation

In the above drawing there are 6 squares that illustrate 6 different representations of luminance (the brightness channels of an each pixel).

I wanted to create an abstraction of those 6 squares to simply illustrate a graphic representation of them with p5.js 2D Primitive shapes. if we constrain each shape inside a square (a representation of a pixel) we can see that each shape fills up the square and creates an array of different brightness values. 

Pixel luminance – graphic representation

  • Part 1 – Image processing:

I started with picking a picture I liked – me destroying a donut. This picture will be used as a map for the code to determine what primitive shape (rect, ellipse, dot line or point) it needs to put on each location of the 2D matrix – by its luminance value. For optimization purposes I did a little photoshop processing to the picture (scaling it down to 50 by 50 pixels and converting to greyscale values) in order to for the code to run faster.

Pre p5.js Image processing

Part 2 – writing the code:

First thing I did was to start with an example code that loads the image file witch I have uploaded to the internet. 


Second, I needed to scan and load all of the original picture data into an array to get the luminance attribute, witch was the tricky part. I did that by forming a ‘nested loop’ – one loop for all the width pixels and another loop for all the height pixels in the image. After that I stored that number into variable that I named pixel (with the kind help of Barak Chamo).

Third, I wrote a series of If statements that would draw different shapes for each color range. for instance, all of the most bright pixels will be big white squares and the most dark pixels would be just a dot.

And the final result:

Source code


Leave a Reply

Your email address will not be published. Required fields are marked *