Take an image and recreate it with greyscale circles

analyze-image.pde

// Declaring a variable of type PImage
PImage img;

// Define a function to turn an X and Y value into a one-dimensional
// array index, for use with acquiring individual pixels from the image
int getPixelIndex( int x, int y ) {
  // Images are a set width: for each increase in y, we've
  // effectively gone one width to the right and then wrapped
  // around to the next line. Multiply the width by the number
  // of times that wrapping has occurred (which line we are on,
  // per "y"), then add x
  return y * width + x;
}
  
  

// No draw method: my computer was about to light on fire, so I just
// do this crazy madness once. I think my framerate was too high maybe.
void setup() {
  size(640, 480);

  // Make a new instance of a PImage by loading an image file
  img = loadImage("snow-house.jpg");
  
  // Black bg
  background(0);
  
  // Draw the image to the screen at coordinate (0,0)
  //  image(img, 0, 0);
  // (looks cooler if the image isn't there in the BG)
  
  // Tell Processing we want to inspect the image's pixels directly
  // (Via https://processing.org/tutorials/pixels/ )
  img.loadPixels();
  
  // Go columns first, then rows: we count "x" from 0 to width,
  //  for each row from 0 to height
  for ( int y = 5; y < height; y += 10 ) {
    for ( int x = 5; x < width; x += 10 ) {
      // Check the pixel coordinates at that point. The pixels
      // in an image are not an array: they go sequentially, e.g.
      //   0, 1, 2, 3,
      //   4, 5, 6, 7
      // so we have to convert our x-y position to a single index.
      int pixIndex = getPixelIndex( x, y );

      // Sample the image color at this x-y point: convert to a
      // greyscale brightness value ( 0 - 255 )
      float c = brightness( img.pixels[ pixIndex ] );

      fill( c );

      // Draw a circle with that brightness value
      ellipse( x, y, 10, 10 );
    }
  }
}