Pixel Sorter

Pixel Sorter

November 13, 2021

example p5.js javascript images 🎃

This sketch sorts the pixels in an image, so that lighter pixels float to the top and darker pixels sink to the bottom.

let img;

function preload() {
  img = loadImage("images/bee.jpg");

function setup() {
  createCanvas(400, 400);

  // Resize the image so it fits on the screen.
  // We make it 100x100 so we can see individual pixels.
  img.resize(100, 100);


function draw() {

  // Loop 100 times to speed up the animation.
  for (let i = 0; i < 100; i++) {


  image(img, 0, 0, width, height);

function sortPixels() {
  // Get a random pixel.
  const x = random(img.width);
  const y = random(img.height - 1);

  // Get the color of the pixel.
  const colorOne = img.get(x, y);

  // Get the color of the pixel below the first one.
  const colorTwo = img.get(x, y + 1);

  // Get the total R+G+B of both colors.
  const totalOne = red(colorOne) + green(colorOne) + blue(colorTwo);
  const totalTwo = red(colorTwo) + green(colorTwo) + blue(colorTwo);

  // If the first total is less than the second total, swap the pixels.
  // This causes darker colors to fall to the bottom,
  // and light pixels to rise to the top.
  if (totalOne < totalTwo) {
    img.set(x, y, colorTwo);
    img.set(x, y + 1, colorOne);

Click here to edit this code in the p5 editor.

pixel sorter

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

  • Sort the pixels in your own image, and post it on the Happy Coding forum!
  • Sort red pixels to the left, green pixels to the top, and blue pixels to the right.
  • Try implementing different sorting algorithms and applying them to the pixels in your image.

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!