Tutorials

/

p5.js Tutorials

/

Images

/

Pixel Painter

Previous:

Images

Pixel Painter

November 11, 2021

This sketch turns an image into a digital painting. Every frame, it chooses a random pixel from the original image, and then draws a dot with that pixel’s color.

let img;

function preload() {
  img = loadImage('images/bee.jpg');
}
function setup() {
  createCanvas(600, 600);

  // Resize the image so it fits on the screen
  img.resize(width, height);

  noStroke();
}

function draw() {

  // Get the color of a random pixel.
  img.loadPixels();
  const pixelX = random(width);
  const pixelY = random(height);
  const pixelColor = img.get(pixelX, pixelY);

  // Paint that pixel with a circle.
  fill(pixelColor);
  ellipse(pixelX, pixelY, 20, 20);
}

Click here to edit this code in the p5 editor.

This is part of p5 spooky sketches printout I made for CC Fest in 2019. That printout contains a bunch of Halloween-themed examples of drawing and image manipulation. Feel free to use it on your own or in a classroom!

Remix Ideas

• Turn your own image into a painting, and post it on the Happy Coding forum!
• Draw squares or triangles instead of circles.
• Instead of using the exact color from the original image, add a bit of randomness to it.

Previous:

Images