Pixel Painter
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);
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.
Comments and Questions
Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!