HTTP/2 200 date: Sat, 11 Oct 2025 10:31:04 GMT content-type: text/html server: cloudflare last-modified: Thu, 28 Oct 2010 14:02:44 GMT cf-cache-status: DYNAMIC vary: Accept-Encoding nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800} report-to: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=Oz%2FPWQMFitO2Sg8vGyyio5So%2BdQXZYi7g8R%2FBbHwTOgbr7cvK8PIpXUsuBYn7awTDtHk3hA3BTS6BnDp4PYrdsSeVBWonHRZfEUYN%2BU%3D"}]} content-encoding: gzip cf-ray: 98cdaf8e3fdf8371-BOM alt-svc: h3=":443"; ma=86400

Processing.js

Pointillism

by Daniel Shiffman. Mouse horizontal location controls size of dots. Creates a simple pointillist effect using ellipses colored according to pixels in an image.

Original Processing.org Example: Pointillism

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
PImage a;
void setup()
{
  a = loadImage("eames.jpg");
  size(200,200);
  noStroke();
  background(255);
  smooth();
}
void draw()
{ 
  float pointillize = map(mouseX, 0, width, 2, 18);
  int x = int(random(a.width));
  int y = int(random(a.height));
  color pix = a.get(x, y);
  fill(pix, 126);
  ellipse(x, y, pointillize, pointillize);
}