Genuary 19

Genuary 19

January 19, 2021

example p5.js javascript images genuary

Click here to view this code in the p5 editor.

Click here to view the result by itself.

let img;

function preload() {
  img = loadImage('bee.jpg');

function setup() {
  createCanvas(400, 400);
  img.resize(width, height);
  image(img, 0, 0);

function draw() {
  const y = frameCount % height;
  const range = getPixelRange(y);

  for (let x = 0; x < width; x++) {
    const leftX = constrain(x - range, 0, width);
    const rightX = constrain(x + range, 0, width);
    let sampleX = random(leftX, rightX);

    const topY = constrain(y - range, 0, height);
    const bottomY = constrain(y + range, 0, height);
    let sampleY = random(topY, bottomY);

    const pixelColor = img.get(sampleX, sampleY);

    point(x, y);

function getPixelRange(y) {
  return map(pow(y, 3),
    0, pow(height, 3),
    0, 50);

Click here to view this code in the p5 editor.

Click here to view the result by itself.

This sketch increases the randomness of an image along the Y axis.

I created this for the 19th day of Genuary which had a prompt of “Increase the randomness along the Y-axis.”

randomized flower randomized bee randomized city randomized city randomized city randomized butterfly

Remix Ideas

  • Apply this filter to different images.
  • Modify the getPixelRange() function to create different effects.
  • Instead of picking a random pixel, add randomness to the color of the pixel.

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!