Project 09: Computational Portrait

First reading the instructions for this project, I was reminded of mosaic effect on images.

I proceeded to work with square pixels, but I realized that using a rounded shape like an ellipse could create a more organic jittery effect on my animated portrait.

sketch
var p = 1000;
var particles = [];

function preload() {
    img = loadImage("https://i.imgur.com/30d3jx2.jpeg"); 
}

function setup() {
  createCanvas(480, 480);
  pixelDensity(5);
 
  for (var i = 0; i < p; i++) {
    particles[i] = new squareParticle(240, 240); //appending new square paricles to the array that will draw the shapes
  }
}

function draw() {
 
  for (var i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].show();
  }
}


function squareParticle(x, y) { 
  this.x = x;
  this.y = y;
  this.r = random(1, 5); //range of particle size

  this.update = function() { 
    this.x += random(-3, 3);
    this.y += random(-3, 3);

    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  };

  this.show = function() {
    stroke(250);
    strokeWeight(0.1);
    var c = img.get(this.x, this.y);
    fill(c); 
    ellipse(this.x, this.y, this.r, this.r+3);
  

  }
}

Leave a Reply