# Drawing an image with icons

**URL:** <https://discourse.processing.org/t/drawing-an-image-with-icons/1828>\
**Category:** Processing\
**Created:** [July 16, 2018, 7:18pm UTC](https://discourse.processing.org/t/drawing-an-image-with-icons/1828 "2018-07-16T19:18:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Moe](https://avatars.discourse-cdn.com/v4/letter/m/ad7895/32.png) [@Moe](https://discourse.processing.org/u/Moe)\
**Post date:** [July 16, 2018, 7:18pm UTC](https://discourse.processing.org/t/drawing-an-image-with-icons/1828/1 "2018-07-16T19:18:26Z")

</div>

Hey Everyone, just a quick question… If I want to draw an image with a set of icons that I have, and I want the image to analize the colors in the icons and use the appropriate icon when it matches the color of the area that is being drawn.

Can someone please help?

Thanks a lot

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [July 16, 2018, 8:32pm UTC](https://discourse.processing.org/t/drawing-an-image-with-icons/1828/2 "2018-07-16T20:32:33Z")

</div>

Which part of this is giving you trouble?

Have you searched in [the reference](https://processing.org/reference/) for image functions? It sounds like you’re looking for the `loadImage()` and `image()` functions.

Shameless self-promotion: [here](http://happycoding.io/tutorials/processing/images.html) is a guide on using images in Processing.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 16, 2018, 8:42pm UTC](https://discourse.processing.org/t/drawing-an-image-with-icons/1828/3 "2018-07-16T20:42:45Z")

</div>

When you want to replace each pixel in the image with an icon (1) OR replace a small rectangle in the original image with an icon (2):

1. 

For loop over all the pixels in image

Use get() to get the color of pixel (see reference)

For loop over all pixels in icon and get average color of icon using get() - for speed consideration for loop over all icons first and store average color for each icon and then compare to pixel color

Choose icon with nearest color to pixel

1. 

Calculate the average color of rectangle using for loop with get

---

<div class="post-metadata">

**Author:** ![Moe](https://avatars.discourse-cdn.com/v4/letter/m/ad7895/32.png) [@Moe](https://discourse.processing.org/u/Moe)\
**Post date:** [July 16, 2018, 8:43pm UTC](https://discourse.processing.org/t/drawing-an-image-with-icons/1828/4 "2018-07-16T20:43:19Z")

</div>

@Kevin Thanks for your answer.  
I am looking for something like this  
 ![image mosaic](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/ae0f8357c4bc0b7801065811a13a35973bd7fb62.jpg)

> **[Photographic mosaic](https://en.wikipedia.org/wiki/Photographic_mosaic)**
>
> In the field of photographic imaging, a photographic mosaic, also known under the term Photomosaic, a portmanteau of photo and mosaic, is a picture (usually a photograph) that has been divided into (usually equal sized) tiled sections, each of which is replaced with another photograph that matches the target photo. When viewed at low magnifications, the individual pixels appear as the primary image, while close examination reveals that the image is in fact made up of many hundreds or thousand Th...

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [July 16, 2018, 8:47pm UTC](https://discourse.processing.org/t/drawing-an-image-with-icons/1828/5 "2018-07-16T20:47:48Z")

</div>

I’ve edited your post to remove the NSFW image, as many people here post from work and I don’t want anybody getting fired. If the image I chose is not quite correct, please edit in a safe for work version.

Anyway, which part of this are you stuck on? It’s hard to help with general “how do I do this” type questions. You’ll have much better luck if you [break your problem down into smaller steps](http://happycoding.io/tutorials/how-to/program) and take those steps on one at a time.

For example, can you create an algorithm that breaks your image down into a grid of colors? Don’t worry about breaking it down into smaller images yet. Just take each section of your image (for example, each section could be 100x100 pixels) and extract a representative color for that section.

There are a bunch of different ways to do that. Start your research there, and try to get just that step working. Then if you get stuck, you can post a [MCVE](https://stackoverflow.com/help/mcve/) along with a specific technical question. Good luck!