09: Dynamic Self-Portrait

https://editor.p5js.org/ssahasra/sketches/iaWwhg-Q2

“The painting has a life of its own. I try to let it come through.It doesn’t make much difference how the paint is put on as long as something has been said. Technique is just a means of arriving at a statement.Every good painter paints what he is.”

– Jackson Pollock

While this quote from Jackson Pollock’s celebrates a dynamic and ad-hoc approach to painting, this week’s Project was about understanding the technique even though the motion of particles and elements seems random. However, it is enjoyable to see how the code breathes life into the composition.portrait.

The project this week was an opportunity to merge different techniques from the p5.js toolkit. Mainly the two topics that I combined was “Particles” and “Images”.

I started off by experimenting with different parts of the Particles code from the in-class examples, to see how the behavior of particles changes and affects the composition. For reference, I set the image in the backdrop so that I could see the relative positions of the image in the canvas.

I used Daniel Shiffman’s tutorials to guide my process and used the steps he proposes to create code that gradually reveals the image through the scattering and random motion of particles. I used 200 particles, to create a play of “hide” and “reveal in the image.

One important thing I learnt is scaling the image correctly so that its scale aligns with the canvas created in the setup function.

Also, constraining the size of the particles and choosing the right variations contributes to a good computational portrait. For example, I ensured that the size of my particles lies between 1, 20 – if they were too big it would be harder to see what image is being rendered, but at the same time, they also do create a dramatic effect.

function Particle(x, y) {
  this.x = x;
  this.y = y;
  this.r = random(1, 20);

• 

• 

• 

• 

• 

As you see in the images above, I played with color value, particle size and mouse Interactions to show different textures of grain, contrast and color value in the portrait. I also used mouse Interactions to change the background so a viewer can notice the particles and how the interact.

//code citation reference
//Daniel Shiffman's Painting with Pixels:
//https://www.youtube.com/watch?v=0V3uYA1hafk&ab_channel=TheCodingTrain

var p = 2000;

var particles = [];




function preload() {
  img = loadImage('https://i.imgur.com/yprs5DW.jpg');
}

function setup() {
  createCanvas(400, 400);
  pixelDensity(1);
  //image = createCapture(img); //??
  //image.size(width / vScale, height / vScale); //??
  for (var i = 0; i 



This portrait project taught me a lot, and I was able to strategize my process much better than before. With more time, I would like to experiment with this same image using Brownian motion and a random walk of a particle.