# Grab Pixels Around Edges of an Irregular Image Shape

**URL:** <https://discourse.processing.org/t/grab-pixels-around-edges-of-an-irregular-image-shape/20020>\
**Category:** Coding Questions\
**Created:** [April 22, 2020, 5:25am UTC](https://discourse.processing.org/t/grab-pixels-around-edges-of-an-irregular-image-shape/20020 "2020-04-22T05:25:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [April 22, 2020, 5:25am UTC](https://discourse.processing.org/t/grab-pixels-around-edges-of-an-irregular-image-shape/20020/1 "2020-04-22T05:25:43Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b98d013f391a2e83c352a31299fd56adc48a5f59.png) ![buggy](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/270b47be4a36facd97a75b3c5969596bd59b9d0d.png)

```auto
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

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [April 22, 2020, 9:40am UTC](https://discourse.processing.org/t/grab-pixels-around-edges-of-an-irregular-image-shape/20020/2 "2020-04-22T09:40:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 3, 2020, 6:16pm UTC](https://discourse.processing.org/t/grab-pixels-around-edges-of-an-irregular-image-shape/20020/3 "2020-05-03T18:16:27Z")

</div>

> [@mnoble](#):
>
> I am wondering if there is a simple way to grab the pixels around the edges of an irregular image that is accurate?

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.

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 3, 2020, 6:19pm UTC](https://discourse.processing.org/t/grab-pixels-around-edges-of-an-irregular-image-shape/20020/4 "2020-05-03T18:19:11Z")

</div>

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

> [@Only take the Top One](https://discourse.processing.org/t/only-take-the-top-one/17115):
>
> Hi there, long time no see slight_smile I want to make some sort of 2d picking on a 2D sketch: I made a test “isOver” on my objects, so my objects change color when mouse is over ( dist(mouseX…) So in my main I get the “mouseIsOver” for every instances of my object =\> but I want to make it so that, if I click, I activate ONLY THE TOP ONE I’m thinking of using an array and getting only the highest index of the “true” values but I sense there is a simple solution out there. Any Idea ? cod…

https://editor.p5js.org/rich-gg/sketches/JA2Qp4JFE

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [May 3, 2020, 6:22pm UTC](https://discourse.processing.org/t/grab-pixels-around-edges-of-an-irregular-image-shape/20020/5 "2020-05-03T18:22:05Z")

</div>

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. 🙂 Or, the cool color detection you helped me with before.

Thanks again! Love the p5js, processing, [openprocessing.org](http://openprocessing.org) and the generous people who help us navigate these experiences!