so I am stuck, not sure what is wrong with this sketch

keep getting an error, and not seeing my image materialize

heres the code


PImage img;


void setup (){
size(300,300);
 img = loadImage("BachataRoja_recordstore.jpg");
 background(0);
 //size(img.width, img.height);
 
}

void draw() {
 
 loadPixels();
 
 for(int x = 0; x < img.width; x++) {
   for(int y = 0; y < img.height; y++) {
     //calculate 1D pix position
     int loc = x + y*img.width;
     //get RGB from image
     float r = red (img.pixels[loc]);
     float g = green (img.pixels[loc]);
     float b = blue (img.pixels[loc]);
     //CALC an ammount to chg brightness
     //based on proximity to mouse
     
     float distance = dist(x,y,mouseX, mouseY);
     float adjustBrightness = (50-distance)/50;
    //float adjustBrightness = (distance);
     r *= adjustBrightness;
      g *= adjustBrightness;
       b *= adjustBrightness;
       
       //CONSTRAIN VALUES
       
       r = constrain(r,0,255);
       g = constrain(g,0,255);
       b = constrain(b,0,255);
       
       color c = color(r,g,b);
       pixels[loc] = c;
       
       //updatePixels();
   }
 }
 updatePixels();
}
     
     

You didn't do img.loadPixels(); to init the array.

You can have any canvas and image size. It depends on what you plan to use: display a small image somewhere in a larger canvas, scale up or down the image to fit to display, or display only the part of the larger image fitting on the frame.
The first case is the simplest: just make the canvas larger, perhaps add an offset to loc to set a margin (H and V).
For other cases, a possible solution is to create another PImage (of same size as img), set the pixels there, and use image() to display the result on screen, with or without scaling.

Offset: something like that, yes.
3D translate? We use 2D, no? Translate wouldn't work here because the script updates the canvas' pixels directly.
And yes, it is a slow method, but perhaps the algorithm can be optimized to update only pixels that change significantly. But Processing will still update all pixels each time.
But only the visible pixels.

that's correct. the distance statement produces a 50 pixel radius circle with a linear falloff from 1 (at the centre), to 0 at the radius and negative values further out.

the 3 constrain calls deal with the negatively scaled rgb values, although for clarity (and I expect performance, but I'm not clear on performance characteristics) it's better to constrain the scaling factor to the range 0,1. that way you replace 3 calls with 1.

does that help?

correct, because the term is 50 - distance.

let's work through an example: the distance of the pixel at mouseX,mouseY is 0 from the mouse cursor location (since it's the same position). in this case adjustBrightness = (50 - 0) / 50 = 1. so the pixel at the mouse cursor is unchanged.

as you inspect pixels further away from the cursor the distance increases, and correspondingly adjustBrightness falls.

if you wanted a dark center which then ramps up to normal at the edge of a 50 pixel radius circle then:

float adjustBrightness = distance / 50

hth