xxxxxxxxxx
49
/*******************************************************************
source https://editor.p5js.org/brendansullivanshea/sketches/RDaPStHQF
ChatGPT to P5
by brendansullivanshea
Write a code in P5.js to sample the colors of an image and generate a pixelated, animated, and colorful output
*******************************************************************/
//CHAT GPT to P5JS
// Prompt : Write a code in P5.js to sample the colors of an image and generate a pixelated, animated, and colorful output.
let img;
let pixelSize = 10; // adjust this value to change the pixel size
let colors = []; // array to store color values
function preload() {
img = loadImage('sample.jpg');
}
function setup() {
createCanvas(img.width, img.height);
noStroke();
// sample colors from the image and store them in the colors array
for (let x = 0; x < img.width; x += pixelSize) {
for (let y = 0; y < img.height; y += pixelSize) {
let c = img.get(x, y);
colors.push(c);
}
}
}
function draw() {
background(0);
// draw rectangles for each pixel
for (let i = 0; i < colors.length; i++) {
let x = (i % (img.width / pixelSize)) * pixelSize;
let y = floor(i / (img.width / pixelSize)) * pixelSize;
let c = colors[i];
fill(c);
rect(x, y, pixelSize, pixelSize);
// animate the rectangles by adjusting their position and size
x += sin(frameCount * 0.1 + i) * 5;
y += cos(frameCount * 0.1 + i) * 5;
let newSize = map(sin(frameCount * 0.2 + i), -1, 1, pixelSize / 2, pixelSize * 2);
rect(x, y, newSize, newSize);
}
}