<p>I would have done it with a script and <a href="https://en.wikipedia.org/wiki/Netpbm" rel="nofollow noreferrer">NETPBM</a> like so:</p>

<p>1) reducing Image1 (the tiles) to size X by X -> Image1R </p>

<p>2) recording the mapping from pixel values of Image1R to coordinates (no need to worry about duplicates as an exact RGB match of two or more averaged pixels is unlikely)</p>

<p>3) remapping Image2 using Image1R as the color map -> Image2M</p>

<p>4) reading pixels of Image2M, consulting the map, and picking the tile corresponding to the coordinates</p>

<p>5) concatenating the selected tiles across and down</p>

<p>There is a separate tool for all the above image manipulations in NETPBM.</p>

<p>Any scripting language that allows spawning other processes and supports associative arrays, would do.</p>

CC BY-SA 3.0
2017-05-26T02:10:08.607Z
2017-05-26T03:15:06.213Z
2017-05-26T03:15:06.213Z
Leo B.
<p>So what I would like to achieve is this:</p>

<ol>
<li>User submits <em>Image 1</em> - this image is then broken down into X by X sized blocks</li>
<li>User submits <em>Image 2</em> - then the program/algorithm takes all the blocks generated in the above step, and reconstructs <em>Image 2</em> using them</li>
</ol>

<p>Example <em>Image 2</em>:</p>

<p><a href="https://i.sstatic.net/lbKpH.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/lbKpH.jpg" alt="enter image description here"></a></p>

<p>Example <em>Output</em>:</p>

<p><a href="https://i.sstatic.net/4w5qk.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/4w5qk.jpg" alt="enter image description here"></a></p>

<p>What I would like to know is, are there any libraries, or some easy way of doing this (ideally in Javascript, as I don't know any other languages) - or even some standalone software tool to accomplish this?</p>

CC BY-SA 3.0
2017-05-12T14:59:03.447Z
Is image 2 somehow broken? Or are you in fact trying to figure out disparity to then operate on the second image somehow. Like making colors uniform or something.
joojaa
CC BY-SA 3.0
2017-05-12T15:14:12.713Z
@joojaa, no, sorry for not being clearer. Image 2 is a perfect image/photo. What the aim of the algorithm is, is to take blocks of a totally different image (Image 1) - say for example comic book scans, and use that to re-draw image 2, purely for the artistic effect.
Joel Damien
CC BY-SA 3.0
2017-05-12T15:16:36.470Z
Added example images to clarify.
Joel Damien
CC BY-SA 3.0
2017-05-12T16:17:16.493Z
Not sure how much help this would be, but what you are after is, in effect, a version of [Vector Quantisation](https://en.wikipedia.org/wiki/Vector_quantization), i.e. VQ, except that the representative vectors aren't derived/synthesised from the source image but supplied separately. You thus don't have to do the training process.
Simon F
CC BY-SA 3.0
2017-05-12T16:21:05.967Z
...Or you could just grab Mosaic program (maybe from http://www.brighthub.com/multimedia/photography/articles/34691.aspx ). The only tedious part would be manufacturing a set of images to corresponding to your blocks.
Simon F
CC BY-SA 3.0
2017-05-18T22:09:42.617Z
For the case X=1 you might want to take a look here: https://codegolf.stackexchange.com/questions/33172/american-gothic-in-the-palette-of-mona-lisa-rearrange-the-pixels/33206#33206

One solution you could think of is reducing each X by X square to one colour (e.g. by averaging) and then using the algorithm presented in the linked challenge.
flawr
<algorithm><image-processing><javascript><image-comparison>
Image regeneration with nearest neighbor search
Joel Damien
# Image regeneration with nearest neighbor search

(Asked by: username_0 on 2017-05-12)

So what I would like to achieve is this:

1. User submits *Image 1* - this image is then broken down into X by X sized blocks
2. User submits *Image 2* - then the program/algorithm takes all the blocks generated in the above step, and reconstructs *Image 2* using them

Example *Image 2*:

[![enter image description here](https://i.sstatic.net/lbKpH.jpg)](https://i.sstatic.net/lbKpH.jpg)

Example *Output*:

[![enter image description here](https://i.sstatic.net/4w5qk.jpg)](https://i.sstatic.net/4w5qk.jpg)

What I would like to know is, are there any libraries, or some easy way of doing this (ideally in Javascript, as I don't know any other languages) - or even some standalone software tool to accomplish this?

**Tags:** algorithm, image-processing, javascript, image-comparison

> **Comments:**
> **username_1**: Is image 2 somehow broken? Or are you in fact trying to figure out disparity to then operate on the second image somehow. Like making colors uniform or something.  
> **username_0**: @username_1, no, sorry for not being clearer. Image 2 is a perfect image/photo. What the aim of the algorithm is, is to take blocks of a totally different image (Image 1) - say for example comic book scans, and use that to re-draw image 2, purely for the artistic effect.  
> **username_0**: Added example images to clarify.  
> **username_2**: Not sure how much help this would be, but what you are after is, in effect, a version of [Vector Quantisation](https://en.wikipedia.org/wiki/Vector_quantization), i.e. VQ, except that the representative vectors aren't derived/synthesised from the source image but supplied separately. You thus don't have to do the training process.  
> **username_2**: ...Or you could just grab Mosaic program (maybe from http://www.brighthub.com/multimedia/photography/articles/34691.aspx ). The only tedious part would be manufacturing a set of images to corresponding to your blocks.  
> **username_3**: For the case X=1 you might want to take a look here: https://codegolf.stackexchange.com/questions/33172/american-gothic-in-the-palette-of-mona-lisa-rearrange-the-pixels/33206#33206  One solution you could think of is reducing each X by X square to one colour (e.g. by averaging) and then using the algorithm presented in the linked challenge.  

---

## 1 answers

### Answer by username_4 on 2017-05-26. Score: 1

I would have done it with a script and [NETPBM](https://en.wikipedia.org/wiki/Netpbm) like so:

1) reducing Image1 (the tiles) to size X by X -> Image1R

2) recording the mapping from pixel values of Image1R to coordinates (no need to worry about duplicates as an exact RGB match of two or more averaged pixels is unlikely)

3) remapping Image2 using Image1R as the color map -> Image2M

4) reading pixels of Image2M, consulting the map, and picking the tile corresponding to the coordinates

5) concatenating the selected tiles across and down

There is a separate tool for all the above image manipulations in NETPBM.

Any scripting language that allows spawning other processes and supports associative arrays, would do.


---

