Resize Image question

p5.js Beginners
1

Hi, I’m using the resize() function to resize my P5 image and want to loop through all the resized pixels, sample them and draw a circle with the color values to basically create a dot pattern style image.

It seems like the resize function isn’t working in the way I need to… Is there a different way to resize the image or am I just using the function incorrectly?

Thanks

Phil

let img;
let sizeSlider;
var dotSize;
var space;
var c;

function setup() {
  createCanvas(1024, 768);

  noStroke();

  colorMode(RGB);
  ellipseMode(CORNER);
  img = loadImage("will.jpg");
  img.resize(1024,0);
  sizeSlider = createSlider(4, 20, 6);
  sizeSlider.position(10, 10);
  sizeSlider.style('width', '200');
}

function draw() {
  background(255);
  dotSize = sizeSlider.value();
  space = dotSize /2;

  for (var x = 1; x < img.width; x = x + (dotSize+space)) {
    for (var y = 1; y < img.height; y = y + (dotSize+space)) {
      c = img.get(x, y);
      fill(c);
      circle(x, y, dotSize);
    } // end for y
  } // end for x
}
1 Like
2

Load the image in preload first
https://editor.p5js.org/zuvala/sketches/4QqPRO8TD

function preload() {
  img = loadImage('https://picsum.photos/800/800'); // Load the image
}
2 Likes
3

@philipplehmann that worked perfectly.

Thanks

Phil