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

  }

}