DotGrid

let img;

const cols = 22;

const rows = 13;

const lightColor = [255, 247, 240];  // warm light color

const darkColor = [20, 30, 40];      // dark blue-ish color

​

function preload() {

  // Load your image through the assets manager in OpenProcessing

  img = loadImage('assets/your-image.jpg');

}

​

function setup() {

  createCanvas(880, 520);

  background(255);

  // Resize image to match our grid

  img.resize(cols, rows);

  noStroke();

}

​

function draw() {

  background(255);

  const cellWidth = width / cols;

  const cellHeight = height / rows;

  // Analyze each cell of the grid

  for (let y = 0; y < rows; y++) {

    for (let x = 0; x < cols; x++) {

      // Get the color of the pixel

      let c = img.get(x, y);

      // Calculate brightness (0-1)

      let brightness = brightness(c) / 255.0;

      // Calculate circle size based on brightness

      let diameter = map(brightness, 0, 1, cellWidth * 0.9, cellWidth * 0.1);

      // Interpolate between colors

      let circleColor = lerpColor(

        color(darkColor[0], darkColor[1], darkColor[2]),

        color(lightColor[0], lightColor[1], lightColor[2]),

        brightness

      );

      // Draw the circle

      fill(circleColor);

      let xPos = x * cellWidth + cellWidth/2;

      let yPos = y * cellHeight + cellHeight/2;

      circle(xPos, yPos, diameter);

    }

  }

  // Only draw once

  noLoop();

}

​

function mousePressed() {

  saveCanvas('duotone-circles', 'png');

}

​