Images / Emoji (many) - OpenProcessing

mySketch
xxxxxxxxxx
 
var img;
var emoji_0, emoji_64, emoji_128, emoji_192;
​
function preload() {
  img = loadImage("nasa_buzz.jpg");
  emoji_192 = loadImage("Twemoji_1f611.png");
  emoji_128 = loadImage("MOREmoji_hot.png");
  emoji_64 = loadImage("Twemoji_1f621.png");
  emoji_0 = loadImage("Twemoji12_1f318.png");
}
​
function setup() { 
  createCanvas(512, 512);
  noLoop();
}
​
function draw() {
  //image(img, 0, 0);
  background(0);
  
  img.loadPixels();
  
  var grid = 20;
  var diameter = 15;
  
  for (var y=0; y<img.height; y+=grid)
  {
    for (var x=0; x<img.width; x+=grid)
    {
      var pix = red(img.get(x, y));
      
      if (pix <= 64)
      {
        image(emoji_0, x, y, diameter, diameter);
      }
      else if (pix > 64 && pix <= 128)
      {
        image(emoji_64, x, y, diameter, diameter);
      }
      else if (pix > 128 && pix <= 192)
      {
        image(emoji_128, x, y, diameter, diameter);
      }
      else if (pix >192 && pix <= 255)
      {
        image(emoji_192, x, y, diameter, diameter);
      }
    }
  }
}