Pixel Painter

Pixel Painter

November 11, 2021

example p5.js javascript images 🎃

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);


function draw() {

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

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

Click here to edit this code in the p5 editor.

pixel painter

cat butterfly city flower tree bee

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.

Images Examples


Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!