HTTP/2 200 date: Sat, 11 Oct 2025 10:31:19 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=Pqvpg4BSfD3OchucTkOc%2Bt7yEYg1DhrPiZNPo8fHVIYmTr%2FdPVOUw2mCbrbi27QQYIrvgeb1j8DBNf6BWO05HbmIsnfRIBp38jWUTQ4%3D"}]} content-encoding: gzip cf-ray: 98cdafebfcbf3bd0-BOM alt-svc: h3=":443"; ma=86400

Processing.js

CreateImage

The createImage() function provides a fresh buffer of pixels to play with. This example creates an image gradient.

Original Processing.org Example: CreateImage

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
PImage img;
void setup() 
{
  size(200, 200);  
  img = createImage(120, 120, RGB);
  for(int i=0; i < img.pixels.length; i++) {
    img.pixels[i] = color(0, 90, 102, i%img.width * 2); 
  }
}
void draw() 
{
  background(204);
  image(img, 33, 33);
  image(img, mouseX-60, mouseY-60);
}