HTTP/2 200 date: Sat, 11 Oct 2025 10:30:58 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=O58sL0dvzgHGd25mkid8xBCgr9UikN%2BXi0UThB7ODO6pDA7Ko5kfEYTHMN2jpAi6MLjvSCaG20LohiaU9zmZjCS878LQeFUmh%2Bo%2FOio%3D"}]} content-encoding: gzip cf-ray: 98cdaf656ee747c7-BOM alt-svc: h3=":443"; ma=86400

Processing.js

Histogram

Calculates the histogram of an image. A histogram is the frequency distribution of the gray levels with the number of pure black values displayed on the left and number of pure white values on the right.

Original Processing.org Example: Histogram

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
size(200, 200);
colorMode(RGB, width);
int[] hist = new int[width];
// Load an image from the data directory
// Load a different image by modifying the comments
PImage a;
a = loadImage("cdi01_g.jpg");
image(a, 0, 0);
// Calculate the histogram
for (int i=0; i<width; i++) {
  for (int j=0; j<height; j++) {
    hist[int(red(get(i, j)))]++; 
  }
} 
// Find the largest value in the histogram
float maxval = 0;
for (int i=0; i<width; i++) {
  if(hist[i] > maxval) {
    maxval = hist[i];
  }  
}
// Normalize the histogram to values between 0 and "height"
for (int i=0; i<width; i++) {
  hist[i] = int(hist[i]/maxval * height);
}
// Draw half of the histogram (skip every second value)
stroke(width);
for (int i=0; i<width; i+=2) {
  line(i, height, i, height-hist[i]);
}