CODEWITHSUNDEEP
javascriptcanvasprocessingp5.js
Sam Chahine
Sam Chahine

Reputation: 620

loadPixels() not working with p5.js

I want to edit the pixels of an image (or just the canvas) using p5.js, and it is show on their website in the documentation:

var img;
function preload() {
  img = loadImage("assets/rockies.jpg");
}

function setup() {
  image(img, 0, 0);
  var d = pixelDensity();
  var halfImage = 4 * (img.width * d) *
      (img.height/2 * d);
  loadPixels();
  for (var i = 0; i < halfImage; i++) {
    pixels[i+halfImage] = pixels[i];
  }
  updatePixels();
}

So I tried that code exactly in codepen with the p5.js linked correctly, and it didn't work (with my own image of course).

The I made a version in the Processing IDE itself and it worked, so I tried to convert it to JS and I don't understand why it's not working?

var img;

function setup() {
  createCanvas(500, 400);
  img = loadImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/379903/image.png");  // Load the image

}

function draw() {
  background(255);

  image(img, 0, 0, 500, 400);



  loadPixels();

  for (var i = 0; i < pixels.length; i++) {
        pixels[i] = color(255, i, 0);
  }

  updatePixels();
}

I just want to be able to edit the pixels of the canvas, but it won't let me.

Here is the codepen I'm using.

The image loads fine, but I can't edit the pixels?

I was following Daniel Shiffman's tutorials on Youtube.

Any help is appreciated, thank you.

Upvotes: 1

Views: 4167

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42176

Images take a couple seconds to load. The setup() function and the first call to the draw() function are done in a few milliseconds. The image isn't done loading when you're trying to draw it. That's why you get a blank canvas.

To get around this problem, p5.js offers a preload() function:

Called directly before setup(), the preload() function is used to handle asynchronous loading of external files. If a preload function is defined, setup() will wait until any load calls within have finished. Nothing besides load calls should be inside preload (loadImage, loadJSON, loadFont, loadStrings, etc).

Load your image in preload() instead of in the setup() function:

var img;

function preload(){
  img = loadImage("https://graph.facebook.com/100001230751686/picture?type=large");  
}

function setup() {
  createCanvas(500, 400);
  noLoop();
}

function draw(){
  image(img, 0, 0, 500, 400);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>

I'm not exactly sure what you're trying to do with the pixels, as the rest of your code doesn't make a ton of sense. Think about what your i variable will be and what color(255, i, 0) is supposed to return. But hopefully that code was just a placeholder and you'll be able to continue now that you can load the image.

You might want to read up on the pixels[] array. Here's an example that shows your image but with every pixel intensity halved:

var img;
    
function preload(){
  img = loadImage("https://graph.facebook.com/100001230751686/picture?type=large");  
}

function setup() {
  createCanvas(500, 400);
  noLoop();
}

function draw() {
  background(0);
  image(img, 0, 0, 500, 400);
  loadPixels();

  for (var i = 0; i < pixels.length; i++) {
    pixels[i] = pixels[i]/2;
  }
  updatePixels();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>

Here is a CodePen of the above if you want to play around with it.

Upvotes: 1

Related Questions