A question about looping through the pixels of an image

outisfun

Hey guys,

I've been trying to solve this for days now, and it's not working. So I'm trying to translate a sketch from Processing to p5.js, and in the sketch, I need to loop through the pixels of an image. Here's the code:

<

script> var img;

function preload() { img = loadImage("img/wa.jpg"); } function setup() { createCanvas(1900, 700); imageMode(); background(255); image(img,0,0); img.loadPixels(); }

function draw() {

stroke(255,0,0); /* for (var j=0; j<img.height; j++){ for (var i=0; i<img.width; i++){ var pixcol = img.get(i,j); } }*/ }

The part that's commented out, the loop, is not working. The image size is 1600x800, so it is inside the canvas entirely. When I try to run the loop, the browser crashes. If I just ask img.get(x,y) for a particular pixel, let's say img.get(500,500), it works just fine. I can't possibly guess what's wrong, I'm new to p5, please help?

Thank you!

outisfun

Forgot the say, what happens is Chrome says inspected target crashed, and in Mozilla, the console message is that it ran out of memory.

GoToLoop

http://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text
http://p5js.org/reference/#/p5/get

That get() double-loop seems fine to me. Have you tested it w/ other images?

outisfun

I did, the loop itself is fine, I think, but from what I saw so far, my best guess is that get() in such a heavy loop is too nasty on the browser, and it makes it crash - could that be the reason? Otherwise the loop itself works, and get works, but not together. I'm currently looking into pixels[], from what I've read, it should be quicker and lighter? But if you have any other suggestions, please tell me!

GoToLoop

Some pixels[] examples below:
http://forum.Processing.org/two/discussion/13114/why-does-using-color-have-such-bad-performance

And please don't forget to format your posted codes:
http://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text

blindfish

@outisfun said:

my best guess is that get() in such a heavy loop is too nasty on the browser, and it makes it crash - could that be the reason?

If Firefox tells you it ran out of memory then definitely: a 1600x800 image is pretty hefty. What are you hoping to do with it? Performance under p5js will seem somewhat underwhelming compared to Processing...