# Shape intersection (or a way to do raster)

**URL:** <https://discourse.processing.org/t/shape-intersection-or-a-way-to-do-raster/9741>\
**Category:** Coding Questions\
**Created:** [March 29, 2019, 1:30am UTC](https://discourse.processing.org/t/shape-intersection-or-a-way-to-do-raster/9741 "2019-03-29T01:30:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![igorguerrero](https://avatars.discourse-cdn.com/v4/letter/i/da6949/32.png) [@igorguerrero](https://discourse.processing.org/u/igorguerrero)\
**Post date:** [March 29, 2019, 1:30am UTC](https://discourse.processing.org/t/shape-intersection-or-a-way-to-do-raster/9741/1 "2019-03-29T01:30:03Z")

</div>

Hello!

I have a set of vectorial shapes (in processing, p5, inkscape…) that combined form a image. All shapes have solid colors and a layer ranking (I know which one is on top).

All I want to do is, setting a new (“random” like a square, or circle…) shape, discover the average color of the intersection (I can’t trust the monitor pixel size like in raster options).

I did an extensive researched and I have talked to everyone I know but i have no clue on how to solve this, can someone give me a hint?

Thank you

---

<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:** [March 30, 2019, 5:25pm UTC](https://discourse.processing.org/t/shape-intersection-or-a-way-to-do-raster/9741/2 "2019-03-30T17:25:09Z")

</div>

> [@igorguerrero](#):
>
> All shapes have solid colors and a layer ranking

Is this data in a p5 sketch, e.g. with PShapes, or is this in an SVG file, or something else?

> [@igorguerrero](#):
>
> discover the average color of the intersection

What intersection? Can you give a concrete example? You said you have layer ranking, so there are many shapes. If you add a random shape, won’t it have many intersections? Are you trying to find color for only the intersection(s) with the next shape down in the stack, or all intersections with all shapes?

---

<div class="post-metadata">

**Author:** ![igorguerrero](https://avatars.discourse-cdn.com/v4/letter/i/da6949/32.png) [@igorguerrero](https://discourse.processing.org/u/igorguerrero)\
**Post date:** [April 1, 2019, 6:12pm UTC](https://discourse.processing.org/t/shape-intersection-or-a-way-to-do-raster/9741/3 "2019-04-01T18:12:42Z")

</div>

Hello!  
Thank you for the reply.

I’ll add an image and try to explain it better.

Consider a vector image (represented by the yellow rectangle, blue circle and red star).  
I have the information for all the shapes in the figure (ideally an .svg file).

Consider 3 square regions of interest (ROI), A, B, and C.

Region A is filled only with the background color, so the average color is yellow.  
Region B is filled only with blue, and althought there is “yellow” under it, the average color “on top” is blue.  
Region C is in the intersection of 3 shapes. What I want is the average color based on the “percentage” filled by each color.

![example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7920d747ae2654d27c91221625e20739e0c65d25.png)

Now, imagine that instead of this vector image I have a really complex one with more than 1000 shapes and, instead of a square, the ROI were a circle, or a star…

My question is: How to code this?  
My only idea is to check all shapes superposition manually with the ROI, do several boolean operations to separate only the “visible on top” part, calculate each area and do the color average math manually.

I bet there is an easier way.

Thank you!

PS: The average color math is easy ([https://medium.com/@kevinsimper/how-to-average-rgb-colors-together-6cd3ef1ff1e5](https://medium.com/@kevinsimper/how-to-average-rgb-colors-together-6cd3ef1ff1e5))