color of shape in next piece of image

CloseToSuccess

Here is my code:

PImage image;

int divideSize = 3;
Draggable[][] rects;
 
void setup() {  
  
  image = loadImage("DSC03509.JPG");
  
  size(image.width, image.height);  
  
  int widthDelta = (int)Math.floor(image.width/divideSize);  
  int heightDelta = (int)Math.floor(image.height/divideSize);
  
  rects = new Draggable[divideSize][divideSize];
  
  int x = 0, y = 0;
  
  for (int i=0; i < divideSize; i++) {
          
      x = (i == 0) ? 0 : x+widthDelta; 
      y = 0;   
    
    for (int j=0; j < divideSize; j++) {
      
      y = (j == 0) ? 0 : y+heightDelta; 
      rects[i][j] = new Draggable(x, y, image.get(x, y, widthDelta, heightDelta));      
      
    }
  }
}
 
void draw() {
 
  smooth();  
  noStroke(); 
 
  //Loop through the array and call drag() and displayPoint() methods defined in Draggable Class
  
    for (int i=0; i < divideSize; i++) {
             
    for (int j=0; j < divideSize; j++) {
      
      rects[i][j].rollover(mouseX,mouseY);
      //rects[i][j].drag(mouseX, mouseY);
      //rects[i][j].display();
      
      if (rects[i][j].isRollover())
         rects[i][j].displayPoint(mouseX, mouseY);       
    }
    }
}
  

 
// Daniel Shiffman
// Tutorial: http://www.learningprocessing.com/examples/chapter-5/draggable-shape/
// Based on class for a draggable thing
 
class Draggable {
  boolean rollover = false; // Is the mouse over the ellipse?
   
  float x,y, pointillizeX, pointillizeY;          // Location and size
  float offsetX, offsetY; // Mouseclick offset  
  int lx, ly; 
  PImage c; // shape image
 
  Draggable(float tempX, float tempY, PImage imageC) {
    x = tempX;
    y = tempY;
    offsetX = 0;
    offsetY = 0;
    c = imageC;
  }
  
  boolean isRollover() {
    return rollover;
  }
  
  void displayPoint(int mywidth, int myheight) {
  pointillizeX = map(mywidth, 0, c.width, 4, 15);
  
  lx = floor(random(x, (x+c.width)));
  ly = floor(random(y, (y+c.height)));
  
  color pix = c.get(lx,ly);
  fill(pix, 100); 
  ellipse(lx, ly, pointillizeX, pointillizeX);
}
 
  // Method to display
  void display() {
    image(c,x,y,c.width,c.height);   
  }
  
  // Is a point inside the rectangle (for rollover)
  void rollover(int mx, int my) {
    if (mx > x && mx < x + c.width && my > y && my < y + c.height) {
      rollover = true;
    } else {
      rollover = false;
    }
  }
 
}

And here is a result:

Pointillism effect only in first piece of picture. Color in another pieces is always black, why? I would be grateful for any help.

Sorry for my bad English ((

GoToLoop

http://forum.processing.org/two/discussion/8045/how-to-format-code-and-text

CloseToSuccess

formating is fixed

koogs

image = loadImage("DSC03509.JPG");

what is this? how big is the image? any other constraints?

CloseToSuccess

Nope. Image size 671x1024, but you can add your own. Image uzing for pointillist effect like here: https://processing.org/examples/pointillism.html

PhiLho

x = (i == 0) ? 0 : x+widthDelta; (and the y equivalent) feels wrong.
I think it should be x = x * widthDelta; (or, more simply, x *= widthDelta;) to cover the whole image.

CloseToSuccess

Definitely not. I suppose that pix = c.get(lx,ly);for some reason does not return correct color.

PhiLho

Indeed, because you have:

lx = floor(random(x, (x+c.width))); ly = floor(random(y, (y+c.height)));

Meaning that lx is a value between x and x + c.width, ie. that it can go way beyond the width of the image...

CloseToSuccess

Hmm.. x and y in class is always has top left coordinates of image segment in global 'image' coordinates, while c.height c.width has the same values as widthDelta and heightDelta (width and height of segment). I think everything is correct.

CloseToSuccess

Thank you all. Problem is solved: pix = image.get(lx,ly);

PhiLho

OK. I felt something fishy in this line... :-) Makes more sense now.