6 ms·

Show HN: I made a tool to generate photomosaics with your pictures

122 points by jakemanger 1y ago

Hi HN! I wanted to make some photomosaics for an anniversary gift, but I ended up building this tool and turning it into a website that anyone can use. For those who don’t know, a photomosaic is an image made up of many smaller tile images, arranged in a way that forms a larger, recognisable picture. The best part? Everything runs directly in your browser. No files are uploaded, and there’s no sign-up required.

cactusplant7374 1y ago
How hard is it to get something like this to work with HEIC?
- jakemanger 1y ago
  Are you on Mac? If you right click a file/s > Quick Actions > Convert Image then you should be able to convert to JPEG or PNG. Funnily enough I also made a universal file converter app which could do it for you on other platforms. Its at https://howtoconvert.co https://howtoconvert.co
pimlottc 1y ago
Small suggestion: in the "Try These Examples" section, the call-to-action is click a button that is not initially visible. Users have to hover over the image to see the "recreate" button, which is not obvious. You should add a dedicate "Recreate" button below each example so it's immediately clear what to do. Also it would a good idea to have a detail view of a sample image at 100% to show that the images are made up of other photos. Maybe even an interactive zoom window. At monitor resolutions, the full images mostly just look like smudgy photos, and not all users may be familiar with photomosiacs. Even the "view" option on the sample mosiacs does not let you see the detail of the individual tiles very well.
- jakemanger 1y ago
  Thank you for the feedback! I actually just did a quick change to add that recreate button CTA like you said. Much better and easy to understand. I'll work on that detailed sample image view too. That's a great idea - job for tomorrow.
bazzargh 1y ago
While this is nice enough, it bothers me that these don't look much like "art". If you look at real roman mosaics, they do not place points in a grid - they use a technique called "opus vermiculatum" https://en.wikipedia.org/wiki/Opus_vermiculatum https://en.wikipedia.org/wiki/Opus_vermiculatum ... snaking the tiles around so that there is a flow to it; the overall effect is much better. I think that'd be possible to automate too. I was doing something related over here: https://hachyderm.io/@bazzargh/112767548339559102 https://hachyderm.io/@bazzargh/112767548339559102 - in that I was trying to generate sketch-like renderings from photographs. What I did was to pick random points, look at the brightness gradient (taken from the Sobel operator, there are other ways to do this), move up the gradient a bit and sketch some parallel lines (and then various experiments with hatching for shading the flatter areas) In a similar way you could start with a grid of tiles _with some separation_, and allow them to move and align better with the gradient of the underlying picture, and not lie _on_ edges, if possible. If they overlap, allow the tessera to be cut, and only then choose images to colour-match the average on the tile, leaving some "grout" in the image (I'd probably speckle that a bit so it didn't look too uniform). Then the result might look more like real mosaics. I might give this a go...
- wvlia5 1y ago
  It could be better sometimes for tiles to lie over edges. For example, there might be an edge dividing red and green areas, and one of your tiles is mostly half red and half green.
- schwartzworld 1y ago
  > While this is nice enough, it bothers me that these don't look much like "art". The author didn't invent this style. The first thing I thought of was the poster for the Truman Show. https://artofthemovies.co.uk/products/the-truman-show-1998-mosaic-ds-os-01 https://artofthemovies.co.uk/products/the-truman-show-1998-m... The site seems to make that happen quite well.
- wang_li 1y ago
  There is a naive approach to making this kind of thing that reduces the component images to such a small size (2-3 pixels in large image) that turns this into more of a dithering exercise than looking for artifacts in each component image to match up lines. It's still a nice effect, but it's quite different when the component images are > 10% the size of the final image, instead of < 1% the size.
wvlia5 1y ago
Will you implement a recursive mosaic feature (some tiles bigger than others)?
- jakemanger 1y ago
  I could. That sounds like a great idea! Was thinking about uneven sized tiles. I just tried to make the basic photo mosaic with even sized tiles for now
the_arun 1y ago
If we combine this with canvas printing, we have an art business.
- jakemanger 1y ago
  I suppose you could make an art business. Or at least do what a few camera stores do
- benbojangles 1y ago
  it's hardly a David Hockney
  - dotancohen 1y ago
    Even less so a Harley Davidson.
- codingdave 1y ago
  There are a plethora of print shops with API access to set this kind of thing up. The problem these days is pricing, specifically shipping. While people may be willing to pay for the work itself, shipping canvasses or framed prints gets expensive fast. This is why so many artists and photographers who sell their photos just sell posters... they are cheap to ship and don't give people sticker shock.
jnovacho 1y ago
How exactly does this work? The example I chose is a mosaic of photos, over which is overlayed the original image with alpha set to 50%. So it does not use the submitted photos as tiles, right?
- jakemanger 1y ago
  If you adjust the overlay alpha to 0% you'll see it does use the submitted photos as tiles. Click the "Create Mosaic" button and you should see it arrange the tiles live in the best possible way to reproduce the image. The overlay is a common technique people use to make the main image more visible. It's a personal preference thing. Generally, the more diverse or colours you select for your tile images, the more clear and "good" the main mosaic image will be
ColinEberhardt 1y ago
Very cool. I actually created a shareware application that rendered Photomosaics 25 years ago! Here is a link to "Mosaic Magic" from the Wayback Engine: https://web.archive.org/web/20010405175706/http://fishsoft.co.uk/mosaic_magic.shtml https://web.archive.org/web/20010405175706/http://fishsoft.c... I managed to make a decent amount of spending money from that application during my University years. One interesting lesson I learnt was about enterprise pricing. I think I charged ~$20 for Mosaic Magic, however, I started to get emails from organisations asking about pricing for commercial use. Nothing on my pricing page suggested that commercial use was prohibited, I guess they just thought $20 was rather cheap. From there-on, I charged $150 for "commercial use". Basically, anyone who thought they should be paying more, did! Finally, Robert Silvers filed a patent and trademark for Photomosaics in ~2000, and was, for a while aggressively pursuing organisations that he felt was infringing. I assume this has all died down now.
- jakemanger 1y ago
  Thanks for sharing! Both the link and the story. As a University student and someone that has here also made a photomosaic app, that is super relatable. That's good to know about the pricing. It's free for now. Honestly didn't expect this level of interest (there's 307 people on the site right now according to analytics). With that interest, I may add some plans - potentially for the commercial use in particular
- verelo 1y ago
  I just read up on Robert Silvers based on this. He had an interesting career. Really unfortunate he was a patent troll...
- bryanthompson 1y ago
  I used Mosaic Magic back in my high school journalism class to design a yearbook cover 20+ years ago! Turned out great - it won some kind of award iirc.
  - jakemanger 1y ago
    That is so funny - after all these years you were sitting at your computer at the same time and clicked on the same post as the creator
btbuildem 1y ago
A friend of mine made this in the late 90s -- we were in highschool at the time. Of course he used it to make renditions of scantily-clad ladies out of thousands of pictures of, you guessed it.
- jakemanger 1y ago
  haha there's a few similar stories coming on here now. Great to hear. Hey, if you want to do that with this software, I can't see any files you upload (it's all local processing in your web browser), so go for it.
talkingtab 1y ago
An alternative: http://imagequilts.com/ http://imagequilts.com/ The link comes from Edward Tufte's web site. These are at least related to Edward Tufte. If you scroll to the bottom there is information about installing a Chrome Extension (disclaimer: I do not use Chrome) that will generate an image quilt. The author of the Extension is given as Adam Schwartz. [edit: Chrome store link is https://chromewebstore.google.com/detail/imagequilts/ceebcpbapdnfnkhfogkbhbgknhgnaoee?pli=1 https://chromewebstore.google.com/detail/imagequilts/ceebcpb... ]
mentalgear 1y ago
Nice! Almost 20 years ago I paid good money to get this done. I see that your method also uses a lot of tinting and even overlaying the original image. Would be great though if this was adjustable via sliders! Thank You for making this available local-/privacy-first & in-browser!
- jakemanger 1y ago
  No worries! This is adjustable via sliders (in the bottom left area) Thanks for the kind words!
aosaigh 1y ago
Excited to check this out. Did you write your own library for this or use something like OpenSeaDragon behind-the-scenes?
- jakemanger 1y ago
  This is completely my own library running in the cloud. Started as a little experiment for myself and now it's blown out into this
  - aosaigh 1y ago
    I would potentially pay a licensing fee for the library if it could be used in other apps (and commercial settings).
processorx 1y ago
[dead]
darod 1y ago
why does this require uploading my photos? can't something like this run native?
- waltbosz 1y ago
  The website says it runs locally. In browser JavaScript , you can import a file from local file system to JavaScript's local scope without sending it to a server. I'm guessing that's how this app works. If you want to know for sure, open your browser's dev tools, switch to the network tab, import a file and watch to see if a network request is made.
  - jakemanger 1y ago
    Yes, that's exactly right. All your images are processed locally and don't leave your device. They are all processed in the web browser with javascript and your dev tools like you say should show that.
    - wvlia5 1y ago
      I think he means "why does it have to upload to the browser, can't it just read from the filesystem?" it should work, but browsers make it more complicated.
ElCapitanMarkla 1y ago
This looks cool, I will check it out. I spent a heap of time about 15 years ago playing with various mosaic software before landing on https://www.andreaplanet.com/andreamosaic/ https://www.andreaplanet.com/andreamosaic/ - I built an endlessly zooming mosiac for a museum - https://www.youtube.com/watch?v=UdC8sk08Vc4 https://www.youtube.com/watch?v=UdC8sk08Vc4 It was supposed to run for 3 years but last time I was there it was still playing on the big projector.
- jakemanger 1y ago
  oh wow that is a beautiful photo mosaic. Well done.
raydenvm 1y ago
Awesome stuff! It would also be nice to add Opus Spicatum method when tiles are set at angles to form a “herringbone” zigzag pattern. It should be quite easy to implement: https://en.wikipedia.org/wiki/Opus_spicatum https://en.wikipedia.org/wiki/Opus_spicatum

122 points by jakemanger 1y ago

cactusplant7374 1y ago

How hard is it to get something like this to work with HEIC?

jakemanger 1y ago
Are you on Mac? If you right click a file/s > Quick Actions > Convert Image then you should be able to convert to JPEG or PNG. Funnily enough I also made a universal file converter app which could do it for you on other platforms. Its at https://howtoconvert.co https://howtoconvert.co

pimlottc 1y ago

Small suggestion: in the "Try These Examples" section, the call-to-action is click a button that is not initially visible. Users have to hover over the image to see the "recreate" button, which is not obvious. You should add a dedicate "Recreate" button below each example so it's immediately clear what to do. Also it would a good idea to have a detail view of a sample image at 100% to show that the images are made up of other photos. Maybe even an interactive zoom window. At monitor resolutions, the full images mostly just look like smudgy photos, and not all users may be familiar with photomosiacs. Even the "view" option on the sample mosiacs does not let you see the detail of the individual tiles very well.

jakemanger 1y ago
Thank you for the feedback! I actually just did a quick change to add that recreate button CTA like you said. Much better and easy to understand. I'll work on that detailed sample image view too. That's a great idea - job for tomorrow.

bazzargh 1y ago

While this is nice enough, it bothers me that these don't look much like "art". If you look at real roman mosaics, they do not place points in a grid - they use a technique called "opus vermiculatum" https://en.wikipedia.org/wiki/Opus_vermiculatum https://en.wikipedia.org/wiki/Opus_vermiculatum ... snaking the tiles around so that there is a flow to it; the overall effect is much better. I think that'd be possible to automate too. I was doing something related over here: https://hachyderm.io/@bazzargh/112767548339559102 https://hachyderm.io/@bazzargh/112767548339559102 - in that I was trying to generate sketch-like renderings from photographs. What I did was to pick random points, look at the brightness gradient (taken from the Sobel operator, there are other ways to do this), move up the gradient a bit and sketch some parallel lines (and then various experiments with hatching for shading the flatter areas) In a similar way you could start with a grid of tiles _with some separation_, and allow them to move and align better with the gradient of the underlying picture, and not lie _on_ edges, if possible. If they overlap, allow the tessera to be cut, and only then choose images to colour-match the average on the tile, leaving some "grout" in the image (I'd probably speckle that a bit so it didn't look too uniform). Then the result might look more like real mosaics. I might give this a go...

wvlia5 1y ago
It could be better sometimes for tiles to lie over edges. For example, there might be an edge dividing red and green areas, and one of your tiles is mostly half red and half green.
schwartzworld 1y ago
> While this is nice enough, it bothers me that these don't look much like "art". The author didn't invent this style. The first thing I thought of was the poster for the Truman Show. https://artofthemovies.co.uk/products/the-truman-show-1998-mosaic-ds-os-01 https://artofthemovies.co.uk/products/the-truman-show-1998-m... The site seems to make that happen quite well.
wang_li 1y ago
There is a naive approach to making this kind of thing that reduces the component images to such a small size (2-3 pixels in large image) that turns this into more of a dithering exercise than looking for artifacts in each component image to match up lines. It's still a nice effect, but it's quite different when the component images are > 10% the size of the final image, instead of < 1% the size.

wvlia5 1y ago

Will you implement a recursive mosaic feature (some tiles bigger than others)?

jakemanger 1y ago
I could. That sounds like a great idea! Was thinking about uneven sized tiles. I just tried to make the basic photo mosaic with even sized tiles for now

the_arun 1y ago

If we combine this with canvas printing, we have an art business.

jakemanger 1y ago
I suppose you could make an art business. Or at least do what a few camera stores do
benbojangles 1y ago
it's hardly a David Hockney
- dotancohen 1y ago
  Even less so a Harley Davidson.
codingdave 1y ago
There are a plethora of print shops with API access to set this kind of thing up. The problem these days is pricing, specifically shipping. While people may be willing to pay for the work itself, shipping canvasses or framed prints gets expensive fast. This is why so many artists and photographers who sell their photos just sell posters... they are cheap to ship and don't give people sticker shock.

jnovacho 1y ago

How exactly does this work? The example I chose is a mosaic of photos, over which is overlayed the original image with alpha set to 50%. So it does not use the submitted photos as tiles, right?

jakemanger 1y ago
If you adjust the overlay alpha to 0% you'll see it does use the submitted photos as tiles. Click the "Create Mosaic" button and you should see it arrange the tiles live in the best possible way to reproduce the image. The overlay is a common technique people use to make the main image more visible. It's a personal preference thing. Generally, the more diverse or colours you select for your tile images, the more clear and "good" the main mosaic image will be

ColinEberhardt 1y ago

Very cool. I actually created a shareware application that rendered Photomosaics 25 years ago! Here is a link to "Mosaic Magic" from the Wayback Engine: https://web.archive.org/web/20010405175706/http://fishsoft.co.uk/mosaic_magic.shtml https://web.archive.org/web/20010405175706/http://fishsoft.c... I managed to make a decent amount of spending money from that application during my University years. One interesting lesson I learnt was about enterprise pricing. I think I charged ~$20 for Mosaic Magic, however, I started to get emails from organisations asking about pricing for commercial use. Nothing on my pricing page suggested that commercial use was prohibited, I guess they just thought $20 was rather cheap. From there-on, I charged $150 for "commercial use". Basically, anyone who thought they should be paying more, did! Finally, Robert Silvers filed a patent and trademark for Photomosaics in ~2000, and was, for a while aggressively pursuing organisations that he felt was infringing. I assume this has all died down now.

jakemanger 1y ago
Thanks for sharing! Both the link and the story. As a University student and someone that has here also made a photomosaic app, that is super relatable. That's good to know about the pricing. It's free for now. Honestly didn't expect this level of interest (there's 307 people on the site right now according to analytics). With that interest, I may add some plans - potentially for the commercial use in particular
verelo 1y ago
I just read up on Robert Silvers based on this. He had an interesting career. Really unfortunate he was a patent troll...
bryanthompson 1y ago
I used Mosaic Magic back in my high school journalism class to design a yearbook cover 20+ years ago! Turned out great - it won some kind of award iirc.
- jakemanger 1y ago
  That is so funny - after all these years you were sitting at your computer at the same time and clicked on the same post as the creator

btbuildem 1y ago

A friend of mine made this in the late 90s -- we were in highschool at the time. Of course he used it to make renditions of scantily-clad ladies out of thousands of pictures of, you guessed it.

jakemanger 1y ago
haha there's a few similar stories coming on here now. Great to hear. Hey, if you want to do that with this software, I can't see any files you upload (it's all local processing in your web browser), so go for it.

talkingtab 1y ago

An alternative: http://imagequilts.com/ http://imagequilts.com/ The link comes from Edward Tufte's web site. These are at least related to Edward Tufte. If you scroll to the bottom there is information about installing a Chrome Extension (disclaimer: I do not use Chrome) that will generate an image quilt. The author of the Extension is given as Adam Schwartz. [edit: Chrome store link is https://chromewebstore.google.com/detail/imagequilts/ceebcpbapdnfnkhfogkbhbgknhgnaoee?pli=1 https://chromewebstore.google.com/detail/imagequilts/ceebcpb... ]

mentalgear 1y ago

Nice! Almost 20 years ago I paid good money to get this done. I see that your method also uses a lot of tinting and even overlaying the original image. Would be great though if this was adjustable via sliders! Thank You for making this available local-/privacy-first & in-browser!

jakemanger 1y ago
No worries! This is adjustable via sliders (in the bottom left area) Thanks for the kind words!

aosaigh 1y ago

Excited to check this out. Did you write your own library for this or use something like OpenSeaDragon behind-the-scenes?

jakemanger 1y ago
This is completely my own library running in the cloud. Started as a little experiment for myself and now it's blown out into this
- aosaigh 1y ago
  I would potentially pay a licensing fee for the library if it could be used in other apps (and commercial settings).

processorx 1y ago

[dead]

darod 1y ago

why does this require uploading my photos? can't something like this run native?

waltbosz 1y ago
The website says it runs locally. In browser JavaScript , you can import a file from local file system to JavaScript's local scope without sending it to a server. I'm guessing that's how this app works. If you want to know for sure, open your browser's dev tools, switch to the network tab, import a file and watch to see if a network request is made.
- jakemanger 1y ago
  Yes, that's exactly right. All your images are processed locally and don't leave your device. They are all processed in the web browser with javascript and your dev tools like you say should show that.
  - wvlia5 1y ago
    I think he means "why does it have to upload to the browser, can't it just read from the filesystem?" it should work, but browsers make it more complicated.

ElCapitanMarkla 1y ago

This looks cool, I will check it out. I spent a heap of time about 15 years ago playing with various mosaic software before landing on https://www.andreaplanet.com/andreamosaic/ https://www.andreaplanet.com/andreamosaic/ - I built an endlessly zooming mosiac for a museum - https://www.youtube.com/watch?v=UdC8sk08Vc4 https://www.youtube.com/watch?v=UdC8sk08Vc4 It was supposed to run for 3 years but last time I was there it was still playing on the big projector.

jakemanger 1y ago
oh wow that is a beautiful photo mosaic. Well done.

raydenvm 1y ago

Awesome stuff! It would also be nice to add Opus Spicatum method when tiles are set at angles to form a “herringbone” zigzag pattern. It should be quite easy to implement: https://en.wikipedia.org/wiki/Opus_spicatum https://en.wikipedia.org/wiki/Opus_spicatum