NodeZaicColumbia MO, Kansas City MO

  • 162 Commits
  • 131 Pushes
  • 146 Deploys
Launch Site

NodeZaic

By Chalupa Batman

Screencast
Quick Intro

Nodezaic creates an image mosaic by using crowdsourced images. Every image that someone uploads, we add to our image repository, and use it in someone else's mosaic.

Description

Nodezaic creates an image mosaic by using crowdsourced images. Every image that someone uploads, we add to our image repository, and use it in someone else's mosaic.

It uses HTML5 Canvas actions to create the mosaic client side, then sends the image data to the server. Where we store it in the image in the filesystem, and a path to the image in the database using node and mongodb. It stores a user cookie to allow a user to view her/his mosaics.

Judging Instructions

The application works best in Chrome and Firefox. It should work in IE10, we just couldn't test it.

The normal user

The app starts on the home page where you can upload/drag a file onto the page, take a picture with your web cam, or use an image from a social site. After processing is finished you will see your mosaic. From here you can either, keep adding more mosaics, or view others. When you're veiwing a mosaic, you can share it, download it, or view another by clicking "Random." Notice that you can view only your mosaics or everyone's.

Administrative abilities

There is also an admin side to the app, so we can manage pictures/mosaics that people are uploading, in case they are offensive or causing problems within the application. Since these instructions are public we're not going to put them on here, but if you want access to the admin side you can email one of us (thedustinsmith@gmail.com).

What they Used

Html5

NodeJS

ExpressJS

MongoDB with Mongoose

jQuery

Bootstrap

Font Awesome

FileReaderJS

jQuery Unveil

Who

Votes

Your Vote

Voting is now closed.

Other Votes

  • (42)
  • contestant
  • judge

    Joyent

    Neat, and good idea. I assume this gets better over time, as the pool of images increases (right now it looks like the same images are used at different brightness levels).

  • judge

    tableflip.io

    Works well. Created me some good mosaics from both webcam and uploaded images. Next year: animated gif mosaics!

  • judge

    Esri

    Tried multiple images of different types, consistently got errors. Sorry :/

  • judge

    sequoia

    Possibly an interesting digital art project if the site uses images from all of the previous images that people have uploaded over time.

    That said, there isn't a ton of "real timey" ness to this app, so it makes me wonder if you really took full advantage of what node has to offer to make this.

    Just the same, I could see people getting into this. Great work.

  • judge

    Neat idea but minimal usage. Its interesting to see how varied the clarity is between the various pictures based on the available images that have been uploaded.

  • contestant

    Learning Objects Inc.

    Very cool. I wonder what the first mosaic looked like

  • judge

    Definitely needs ability to zoom in and/or select the size of the pixels as the effect is kinda lost (can't see images, they just look like messed-up pixels) at the default size.

  • judge

    Nice work, and glad to see you made use of the media capture capabilities of modern browsers.

  • judge

    Walmart Labs

    It looks, and works really well. It was more complete than other entries I have seen, and seems to achieve the goals the team set out to achieve (making mosaics).

  • contestant
  • judge

    Pivotal Labs

    Neat idea! Would be cool if one could see all the images that make up the mosaic for the image they have uploaded.

  • judge

    GoodFit.co

    Very cool! I would use this product! It would be cool if you allowed me to generate a mosaic based only on the images I upload.

  • judge

    Browserling

    Fun!

  • contestant

    It's an effect I've seen before, but I've not exactly found a way to do it myself. I think that some people will have fun with it.

  • contestant

    Great work!

  • judge

    Zerosum Labs

    Very clever! Nicely done. Not sure what the next step is but this is a fun little stand alone utility that works nicely.

  • contestant

    Jotform

  • judge
  • contestant

    Pretty awesome! You've got so much accomplished this weekend. Great job you four!

  • judge
  • judge

    The Node Firm

    Slow UX response in uploading large image. Really cool though.

  • contestant

    Pretty cool! On Firefox, the file dialog didn't work, but I managed it using the drag and drop. On chorme it was the oposite. Maybe it was my setup? Congratulations anyway!

  • contestant

    routeFlags

    Cool works!

  • judge

    Sequoia Capital

    This was fun. I got an error message the first two times I tried to upload photos but it worked after that. Random button is a nice feature. I would have like to be able to drill into some of the component pictures and explore the mosaics that way.

  • judge

    CodePath

    Very cool use of HTML5 Canvas

  • contestant

    Focus the Web

    Nice app, well done guys. Maybe you deserved more than three stars at design but mosaic list is a little bit disaligned.

  • judge

    Nice job!

  • contestant

    Pretty cool!

  • contestant

    The Nerdery

    This is a really unique idea, and it's well executed.

  • contestant

    Mozilla

    it's cool!

  • contestant

    copyPastel

    Does as it says on the tin, and does it well!

    Next version: generate several mosaics and make a GIF of it.

  • contestant

    Mozilla

    NodeZaic is awesome! I like that as you get more data throughout the competition, the matching will get even better. I think the site design and UX is really quite good for such a short hackathon, and it feels really complete.

    Hope to see a further writeup about how you are doing the actual image manipulation.

    Biggest downside - I wish the 'random' button was above the images so that I could click it over and over without moving my mouse.

  • judge

    Applied Geographics

    worked well and was technically difficult

  • judge

    The Node Firm

    Uploading didn't work for me. Neither did camera (latest firefox version) I was still going to judge based on existing images since you did have a show reel, but all you had was the same picture over and over :(

    • thedustinsmith
      contestant

      Sorry it didn't work for you. It's possible that the site rejected your image, because it was too large. We only allow 3mb, but never got around to putting that message up. Not sure why the gallery didn't show the rest of the images. Thanks for judging anyways.

  • contestant

    I really like the idea. I'd like to see the high resolution versions when we download.

    • bigamil
      contestant

      Thanks for the feedback, we had hoped to allow the download of the hi-res version but we didn't have enough time.

IMPORTANT DATES

REGISTRATION
SEP 17
COMPETITION
NOV 9-11 UTC
JUDGING
NOV 11-17
WINNERS
NOV 18

Thank you to our Platinum Sponsors