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.”
getPixelRange()
function to create different effects.Increase the randomness of an image along the Y-axis.
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!