Infinite Image

A reactive, collaborative SVG image editor

Comment

Inspiration

I once saw little children and their parents have a blast creating art together on a huge wall covered with paper

What it does

Allows remote teams to co-create art together.

How we built it

Meteor, SVG and lots of caffeine.

Meteor packages

autopublish                  1.0.4  (For prototyping only) Publish the e...
blaze-html-templates         1.0.1  Compile HTML templates into reactive...
ecmascript                   0.1.5  Compiler plugin that supports ES2015...
es5-shim                     4.1.13  Shims and polyfills to improve ECMA...
insecure                     1.0.4  (For prototyping only) Allow all dat...
jquery                       1.11.4  Manipulate the DOM using CSS selectors
meteor-base                  1.0.1  Packages that every Meteor app needs
mobile-experience            1.0.1  Packages for a great mobile user exp...
mongo                        1.1.2  Adaptor for using MongoDB and Minimo...
reactive-var                 1.0.6  Reactive variable
risul:bootstrap-colorpicker  2.2.0  Bootstrap Colorpicker: http://mjolni...
session                      1.1.1  Session variable
standard-minifiers           1.0.1  Standard minifiers used with Meteor ...
tracker                      1.0.9  Dependency tracker to allow reactive...
twbs:bootstrap               3.3.5  The most popular front-end framework...

Challenges we ran into

Our original plan was to allow user to drag an arbitrary multicolor SVG "brush", cloning it on every mousedrag. That produced beautiful pictures, but did not scale, as it created a huge DOM. In retrospect, we could have chosen a combined svg/canvass approach (SVG shapes drawn on canvass) to allow for both scalability and stunning visuals; but we also wanted the editor to be "infinite" on both large and small scale, i.e.

1) to zoom out and pan without limitations (the only limitation: not straying too far away from what's already drawn, expanding gradually), and

2) to zoom in, allowing for an infinite (or near infinite) level of detail. E.g. someone might draw the school, someone else might zoom in and draw a classroom, then a desk, then a book, then pictures in a book, etc.)

That did not materialize during this hackathon, but I intend to continue. Anyone wants to help?

Accomplishments that I'm proud of

Portability! The thing just worked on mobile without any effort at all, and worked very fast.

What we learned

  • Touch

  • SVG (both of us learned it just today!)

  • How far you can push a DOM

  • how not to bite more than you can swallow :-)

  • Simplicity. I started developing multiple drawing tools (pencil, polygon, ellipse, with an intent to create a flexible design allowing for 3rd party drawing tools); had to delete all but pencil halfway.

What's next for Infinite Image

  • Infinity! Infinite zoom in and out. Think Google Maps for artists.

  • Transparency

  • There is no reason not to drag and drop (i.e. fully CRUD) individual components of vector graphics.

  • Custom 3rd party drawing tools - maybe.

  • Would anyone like parts of it on atmospherejs.com? Let us know.

About me

Founder of Apex Software in Seattle. We develop Meteor apps for our clients. Yes, we are hiring Meteor devs, and we are looking for new clients! Contact me at hello@apexsft.com for more info.

Built With

Share this project:

Updates