Re-scaling image by pixel: why is r NaN?

p5.js Beginners
1

I want to eventually re-scale my imported image while skewing it. Right now, I’m trying to get per pixel info but my variable “r” here is undefined in console. What am I missing? Thanks

var img;
var vScale = 4;

function preload(){
   
       img = loadImage('image.jpeg');   
       }

function setup() {
    createCanvas(500, 550);
    pixelDensity(1);
    background(51);

    image(img, width/2- 200, height-300, 400, 300);
    
}

function draw(){
   

    loadPixels();
    
    //cycle through the loop of pixels per row
    for(var y = 0; y < img.height; y++){
       for (var x = 0; x < img.width; x++){
           //find the pixels: every pixel has 4 values
                var index = (x + y * img.width) * 4;
                   
                   var r = img.pixels[index+0];
                   var g =  img.pixels[index+1];
                   var b =  img.pixels[index+2];


                   console.log(r);
          
     }
    }
    

    
   // updatePixels();
    
    
}
2

Perhaps you miss a call to method p5.Image::loadPixels() before accessing p5.Image::pixels[]: img.loadPixels();

2 Likes