Grab Pixels Around Edges of an Irregular Image Shape

Processing Coding Questions
1

Hello Forum,

I am wondering if there is a simple way to grab the pixels around the edges of an irregular image that is accurate? I have been having a blast with the simplicity of color detection for moving collisions. It works great with simple Processing shapes. Now, I want to get this strategy going for imported images in the simplest way. I need a more accurate series of color detection points around the “player” image. (Mine are estimations and not consistent). I welcome any suggestions. Thank you!

badGuys buggy

PImage player;
PImage enemies;

//moving obstacle variable
int blackX1 = 200;

void setup(){
  size(400, 400);
  player = loadImage ("buggy.png");
  enemies = loadImage ("badGuys.png");
}

void draw(){
  rectMode (CENTER);
  imageMode (CENTER);
  background(255);

  //obstacles
  //enemy image has a 3 pixel black stroke for activating color detection
  image (enemies, blackX1,300,100,100);
  blackX1 = blackX1 + 6; //obstacle speed
  if (blackX1 > 500) { //reset
    blackX1 = -100;
  }
  
  image (player,mouseX,mouseY,100,100);
  
   //detect color on 8 points around the player image (NOT ACCURATE)
   int corner1 = get(-48+mouseX, 1+mouseY); 
   int corner2 = get(-27+mouseX, 22+mouseY);
   int corner3 = get(-18+mouseX, -48+mouseY);
   int corner4 = get (41+mouseX, -46+mouseY);
   int center1 = get (43+mouseX, -16+mouseY);
   int center2 = get (mouseX,50+mouseY);
   int center3 = get (41+mouseX,28+mouseY);
   int center4 = get (19+mouseX, 55+mouseY);
   

  //if any of the "gets" grab a black pixel (3 pt stroke around enemy image) then report collision
    if((corner1 == -16777216)||(corner2 == -16777216)||(corner3 == -16777216)||(corner4 == -16777216)
      || (center1 == -16777216) || (center2 == -16777216) || (center3 == -16777216)|| (center4 == -16777216)) {
    fill (0);
    textSize(24);
    text ("collision", 20,20);    
 } 

} //close draw
1 Like
2

Hi @mnoble
On my PC I couldn’t get a conclusion at all.
But I think you will find it interesting to play with the geomerative lib.

2 Likes
3

Are you trying to get the mouse to detect if it is over the fly or not?

Do you need to identify many different transparent-background objects, or just one, and do you need to be able to tell them apart from one another?

In general, a way of doing this is the “picking” algorithm, in which you paint the gif/png non-transparent silhouette onto an off-screen graphics buffer, then check the buffer at the mouse location to see if you are over the graphic or not. This works for any kind of irregular shape collision detection. However, the Picking library is designed for 3D – you can use it in P2D, but it can be a bit tricky. Manual implementation, on the other hand, is intermediate-advanced – not recommended for beginners.

Here is an example of how it is used, for reference. Rather than drawing circles, you could copy pixels to draw the bug shape instead.

import picking.*;
Picker picker;
int active;
PImage img;

void setup() {
  size(200, 200, P2D);
  picker = new Picker(this);
  stroke(0, 255, 0);

  img = loadImage("https://processing.org/img/processing3-logo.png");
  img.resize(50, 50);
}

void draw() {
  // draw your picking regions first
  noStroke();
  fill(255);
  picker.start(1);
  // draw circle regions where the circular graphics will be
  ellipse(10+25, 10+25, 50, 50);
  picker.start(2);
  ellipse(100+25, 100+25, 50, 50);  
  picker.stop();

  // now wipe surface -- regions are saved in buffer
  background(0);

  // what region is the mouse over?
  active = picker.get(mouseX, mouseY);
  // change background if it is over something
  if(active == 1) background(255,0,0);
  if(active == 2) background(0,0,255);

  // draw the canvas images
  image(img, 10, 10);
  image(img, 100, 100);
}
1 Like
4

I also believe that @phoebus did a p5.js version of picking recently

1 Like
5

Hi Jeremy,

I will definitely check out this other example. But, methinks it might be best for students (and me - ha ha) - if we stick to regular shapes with the dist() function for detection. :slight_smile: Or, the cool color detection you helped me with before.

Thanks again! Love the p5js, processing, openprocessing.org and the generous people who help us navigate these experiences!

1 Like