Examples / p5.js Examples / / Genuary 19

Genuary 19

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

    stroke(pixelColor);
    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.

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!