a port of the Processing Visualization Language


An image is recreated from its individual component colors. The many colors of the image are created through modulating the red, green, and blue values. This is an exageration of an LCD display.

Original Processing.org Example: Reading

// All Examples Written by Casey Reas and Ben Fry

// unless otherwise stated.

// @pjs preload must be used to preload the image so that it will be available when used in the sketch  

/* @pjs preload="data/cait.jpg"; */

size(200, 200);



// Load an image from the data directory

PImage c;

c = loadImage("data/cait.jpg");

int xoff = 0;

int yoff = 0;

int p = 2;

int pix = p*3;

for(int i = 0; i < c.width*c.height; i += 1) 


  int here = c.pixels[i];


  fill(red(here), 0, 0);

  rect(xoff, yoff, p, pix);


  fill(0, green(here), 0);

  rect(xoff+p, yoff, p, pix);


  fill(0, 0, blue(here));

  rect(xoff+p*2, yoff, p, pix);



  if(xoff >= width-pix) {

    xoff = 0;

    yoff += pix;


Fork me on GitHub