getPixelPerf.pde

// Collect timings for use here: https://observablehq.com/@osteele/p5-js-pixel-manipulation-timings
// The p5.js version is here: https://openprocessing.org/sketch/1159872

PImage img;

int imgWidth = 1920;
int imgHeight = 1080;

float smoothFrameRate;
float smoothFrameTime;

void setup() {
  size(200, 100);
  img = createImage(imgWidth, imgHeight, RGB);
}

void draw() {
  boolean mode = mousePressed;
  String modeName = mode ? "set" : "pixels";
  
  float frameTime = -millis();
  if (mode) {
    setDraw();
  } else {
    pixelsDraw();
  }
  frameTime += millis();
  
  smoothFrameRate = lerp(smoothFrameRate, frameRate, 0.01);
  smoothFrameTime = lerp(smoothFrameTime, frameTime, 0.01);
  
  image(img, 0, 0, width, height);
  text("Mode: " + modeName, 10, 20);
  text(round(frameRate) + " fps", 10, 40);
  text(round(smoothFrameRate) + " fps", 10, 60);

  text(round(frameTime) + " ms/frame", 100, 40);
  text(round(smoothFrameTime) + " ms/frame", 100, 60);
}

void setDraw() {
  for (int x = 0; x < img.width; x++) {
    for (int y = 0; y < img.height; y++) {
      color c = color(map(x, 0, img.width, 0, 255), map(y, 0, img.height, 0, 255), frameCount & 255);
      img.set(x, y, c);
    }
  }
}

void pixelsDraw() {
  img.loadPixels();
  int size = img.pixels.length;
  for (int i = 0; i < size; i++) {
    int x = i % img.width;
    int y = i / img.width;
    color c = color(map(x, 0, img.width, 0, 255), map(y, 0, img.height, 0, 255), frameCount & 255);
    img.pixels[i] = c;
  } 
  img.updatePixels();
}