
Show HN: I open-sourced my web app alternative to Illustrator - artursapek
http://mondrian.io/contributing
======
daenz
Great work Artur. I think this has potential, with enough contributors, to be
a widely used tool. It's unfortunate that some people are getting really hung
up on a specific interpretation of the submission title (that it currently has
feature-parity with Illustrator), instead of talking about the seriously
impressive amount of work you've put into this thing, or actual constructive
criticism. Don't let it get to you, and keep up the great work :)

~~~
hamburglar
Agreed wholeheartedly, and this is as someone who's literally spent thousands
of hours using Illustrator. I played with it for a few minutes and found the
interaction to be very natural, and I only found a couple of bugs. I would
suggest that if you avoid a lot of the print-specific aspects of Illustrator
like color separations, supporting spot colors, screening options and a lot of
their more gimmicky features, this could actually end up replacing it for a
lot of people.

* one bug is here: [http://mondrian.io/?p=5xf0YH](http://mondrian.io/?p=5xf0YH) Somehow I created a piece of geometry that's a line segment that can't be filled or stroked. Hover around near the end of that arrow and you'll find it. It was created using the line tool.

edit: never mind, it turns out I just didn't completely grasp the selection
model. If I click on the line segment, the endpoints get selected and I can
move it, but the fill/stroke panels don't appear. However, if I drag-select it
so I get the line's bounding box, they do. The selection model is a bit
quirky, although I suppose you're probably trying to simplify Illustrator's
weird assortment of selection modes. Good luck with that. :)

~~~
artursapek
The selection model used to work the way you expected - clicking on a line
segment would select the whole shape.

I changed it to select only the two points that made up that line segment
because I thought it made more sense, and there's usually plenty of hit-area
on the inside of the shape for selecting the whole thing. In this case, I see
how it was confusing.

I suppose I could revert back to the old selection model, or add an edge case
where clicking on a line segment selects the whole shape if it consists of
only two points. The current system would make more sense if there were more
things you could do with selected points besides just moving them around with
the arrow keys.

Either way, thanks for reporting this. If you catch any more problems, please
log them in
[https://github.com/artursapek/mondrian/issues](https://github.com/artursapek/mondrian/issues).
:)

------
mjhoy
Wow. Love it. Love the visual history. It feels quite snappy. The UI
aesthetics are great. You've got most the pen tool features I used in
Illustrator, and managed to do it without having multiple kinds of arrows to
keep track of, which always bugged me.

~~~
artursapek
Thank you! Those are all things I focused on so it's a pleasure to hear that.

------
ygra
Played around a bit for a few minutes and threw a few of my usually
handwritten SVGs at it with disastrous results. View boxes don't seem to work,
dashed lines, symbols, any kind of shape reüse in general; groups are
ungrouped automatically, but apparently properties defined on groups are not
propagated to child elements when ungrouping. And it manages to lock up
Firefox and IE completely.

Not terribly impressed so far, but then again, I'm not a designer or an artist
and I manage to write SVGs that fail in various renderers due to
implementation deficiencies. But those I tested were not even complex or used
advanced features.

At the moment I'd guess this is aimed at the most trivial vector graphics
possible, i.e. only basic shapes, stroke and fill. It might work for that, but
that's well beyond what I use of SVG or Inkscape usually.

~~~
artursapek
You're right, it still chokes on a lot of SVG features. It is in no way spec-
complete. All I can say is hopefully people contribute and it works better for
everyone. The version I'm sharing is what I've been able to muster by myself
in a year between school and work.

That said, if you opened issues on Github describing how to lock it up in
Firefox and IE, and listing those SVG features that it doesn't render, that
would be very helpful. Cheers.

~~~
ygra
Apologies, if that came across too negative. It's just a bit frustrating when
you see »Oh, nice, it's based on SVG and compares itself to Illustrator and
Inkscape« and try various things you have written in the past years only to
notice that none of them work.

------
ropz
I think that it's terrific but does a disservice to Illustrator. It's terrific
because you've built it - and what's there, works, wonderfully - but does a
disservice to Illustrator because the devil is in the million details that
Illustrator has already implemented. But I know you want help to make and iron
out those details, so really well done!

------
hablahaha
Awesome! I'm really awful at drawing on my computer. Many failed attempts at
trying to learn Illustrator, Gimp, etc. What's really cool about a web app of
a drawing app is that you _could_ use all the open source product tour JS
libraries to create interactive tutorials... So impressive, thank you!

~~~
rfnslyr
If you failed at using Illustrator or Gimp effectively, then you didn't try
hard enough. Follow video tutorials and try to recreate graphics, in time
you'll get better.

Ugh, this entire thing is in coffeescript too, now I have to learn
coffeescript to make sense of this library.

~~~
jashkenas
You might be shocked (shocked!) at how clean and readable some of the
CoffeeScript source is. To pick an example at random:

[https://github.com/artursapek/mondrian/blob/master/src/geome...](https://github.com/artursapek/mondrian/blob/master/src/geometry/line-
segment.coffee)

Artur really did a nice job with structuring this project...

~~~
rfnslyr
Vanilla JS is easier for me. I don't have time to learn the workings of
coffeescript just to read a library casually.

~~~
mikkel
'The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles
one-to-one into the equivalent JS, and there is no interpretation at runtime'

There really is very little magic with coffeescript. Most of it is syntactic
sugar which can be learned at a glance of:
[http://coffeescript.org/](http://coffeescript.org/) .

Don't mean to come off as pushy but I think it's well worth learning what
coffeescript is. Especially if you are familiar with javascript, as it's a
straight upgrade in your toolkit.

~~~
pyromine
As an additional testimony, I've actually been learning coffeescript without
really knowing JavasScript, and it has actually gone fairly well. For the most
part it's intuitive, and if you're willing to be a little frustrated figuring
out some of the syntax changes it can be rewarding.

------
rattray
This is terrific. Been fiddling around with the pen tool. So far, not much
worse than Illustrator!

A few feature requests: having the shift-c tool (convert anchor point, I
think) and being able to delete anchor points would be great. Much harder to
work without that. Saving also didn't work the first several times I tried
(but great to see auto-saving to ¿localStorage?)

------
pvnick
Congratulations! I know how difficult this kind of stuff can be - I tried
something similar a few years back and ended up dropping the project before it
got too far; although I learned a lot about object oriented programming. Great
work!

------
neovive
Very nice. Have you considered contacting the SVGEdit
([https://code.google.com/p/svg-edit/](https://code.google.com/p/svg-edit/))
team to see if there are some synergies?

------
auganov
Is there a specific reason why you choose to implement most (all?) of the
functionality yourself without building it on top of any existing libraries?

~~~
artursapek
For fun

------
jnardiello
Not much to say other than: Wow. Great Job.

------
ii
Can it be used to resurrect Aldus/Macromedia/Adobe FreeHand? I still can't use
anything but it and I keep a windows VM on my Mac almost only for it.

------
Michael-XCIX
This is amazing. I could have really used something simple like this in the
past, and really appreciate the ability to use it in the future. Seriously,
thank you!

------
ricardobeat
Artur, the linked page is almost unreadable here (Chrome OSX):

[http://cl.ly/image/0F212f3X2h07](http://cl.ly/image/0F212f3X2h07)

The Maven Pro font appears to be infinitely thin at weight 300, it only starts
being readable at 120px+. It doesn't have a version for that weight, so the
browser is [failing at] simulating that.

~~~
kruipen
Looks fine for me both in Canary and Stable on Snow Leopard.

------
Kequc
As someone who struggles in general with javascript this is phenomenal and
makes me feel like a programming goof. Good job.

------
davidy123
Nice simple editor web based editor, though I'd still use the fuller featured
SVGEdit in most cases.

One thing that would really stand out would be an 'infinite zoom' I've seen
implemented elsewhere.

------
lukaseder
There is already a database product called Pentaho Mondrian. You may want to
think about chosing another name, there are still 1-2 alternative famous
artists left :-)

~~~
jrockway
I recommend "Rietveld".

------
niels_olson
This is really beautiful. A few questions:

\- how do I add and delete points on a path?

\- how do I change the node type? Eg, if there are no handles, how do I get
handles (antlers I think you call them in the code).

\- How do I go from colinear handles to "broken" handles: handles that form an
angle at the node, so I can have two different curves joined at an acute angle
at one node?

\- How do I do intersections, unions, groups, layers, etc?

But I gotta say it again, it's really beautiful...

------
cashmonkey85
The is also [http://vectorpaint.yaks.co.nz](http://vectorpaint.yaks.co.nz) an
online vector editor

------
thebiglebrewski
This is awesome! I'm going to encourage my students to use this in my web
design class to draw basic mockups.

~~~
Edmond
they could also try [http://schoolnotez.com/](http://schoolnotez.com/) :) it
is also downloadable:
[http://schoolnotez.com/schoolnotez.zip](http://schoolnotez.com/schoolnotez.zip)

------
seanlinehan
Great job. One request: Make the CMD shortcuts work for the CTRL key too. They
don't seem to fire.

------
thekingshorses
Nice. I have been thinking about building a web app similar to sketch
([http://www.bohemiancoding.com/sketch/](http://www.bohemiancoding.com/sketch/)).
This is pretty good.

------
watwut
Great job! Hope you find success with it and thank you for open sourcing it.

------
webwanderings
Pixlr is very popular among young crowd. This one pales in comparison in the
same category (free). I don't know about open-sourced though.

~~~
jakejake
Pixl is definitely cool. I don't think it's a really fair comparison for one
thing Pixl is more like Photoshop rather than Illustrator. Pixl is a Flash app
which probably makes a difference to some people as well.

Both are really cool online tools though.

------
Fede_V
Fantastic effort, I'll play around with it as much as I can. I am not exactly
a coffee script expert, but I might poke around internals.

------
jbeja
I love how this app is lay as a component base system, really great work. I
think i will learn many thing through reading the source code.

------
SippinLean
Cool, but I need separate object and direct selection arrows like Illustrator.
And rulers and draggable guides and a square grid.

------
coulix
Really really impressive, you roxx PS:
[http://tutorsbox.com](http://tutorsbox.com) creator

~~~
Edmond
are you actually making money off that? check my profile for a link to an open
source project of mine that has similar functionality with a lot more content
management features.

~~~
coulix
A little

~~~
dclara
Cool. Looks like every class room needs it.

Do users draw or write using figure or e-pen?

------
johncoltrane
Since when did an alternative to something stop needing to do _at least_ as
much as that something?

------
krmmalik
Thank you for doing this. This may seem like an ignorant question but can your
app open .ai files?

~~~
artursapek
Not yet.

AI, like PSD, is proprietary and unfriendly to developers because Adobe's
software is really complex (and they don't want to share the market). I want
to write a small backend that uses one of several AI->SVG converters out there
so people can use AI files in Mondrian. Unfortunately I haven't had time yet.

------
felics
This is awesome, thanks for this!

------
jpincheira
Beautiful code. Love it.

------
mosselman
This is pretty awesome!

------
varkson
It's unusable on IE but looks interesting none the less.

------
Edmond
don't know if you are interested in edtech but check out appynotebook.com ...
it is an open source LMS with a vector graphics drawing layer and a lot more.

------
noaheverett
You really did put a lot of work into this, great job.

------
vrajpal24
Artur this is pretty super dope wedep. Good job homey.

------
3838
you could check out [http://paperjs.org/](http://paperjs.org/) too, was
originally a plugin for ai

------
dclara
Nice try. What type of OSFS license are you using?

------
kriro
Very cool, thanks.

------
dangayle
Cool. It seems very responsive, which is great.

------
Sir_Cmpwn
Didn't work at all for the MediaCrush logo.

[https://mediacru.sh/static/mediacrush_logo.svg](https://mediacru.sh/static/mediacrush_logo.svg)

~~~
stevenleeg
Is this negativity really necessary? If you're going to leave a comment about
something not working at least say what went wrong and what could fix the
issues you had.

I'm sick of comments like this constantly polluting HN's community with
negativity.

~~~
sergiotapia
Don't bother. Parent commenter is your stereotypical programmer. Just take a
look at:
[https://github.com/Imdsm/AutoGfy/issues/5](https://github.com/Imdsm/AutoGfy/issues/5)

Some people just lack tact.

~~~
jw_
Wow, saying that he "lacks tact" is a bit of an understatement.

------
elwell
Condition of source code got my upvote.

------
elwell
So did you just make this for fun?

------
nXqd
Congrats ! This looks great :D

------
ajaymehta
This is so sweet, Artur!

------
JungleNavigator
Really nice.

I like it works with Dropbox

------
borplk
Great job!

------
ehosca
yeah ... just like Illustrator .. hardly any noticeable difference in in
features ...

------
ye
This is not an alternative to Illustrator.

It's a very very basic vector editor that doesn't even let you rotate things,
import any standard vector formats (SVG, EPS, AI, PDF), have dotted outlines,
distort, curve the text, etc etc etc.

I understand it was a lot of work, and you did a great job, but let's not
pretend this implements even 1% of Illustrator.

~~~
PaulFreund
Rotation is possible. Activate the (rotate indicating) tool and move the
resize/move/rotate handles.

~~~
ye
Ah, sorry. It works in such a non-obvious way, I missed it.

~~~
hamburglar
The rotation tool works exactly the way Illustrator's does.

~~~
ye
In, it doesn't.

~~~
hamburglar
1) Select an object

2) Select the rotate tool (whose icon is the universal symbol for "rotate"
that can't possibly be confused with anything else)

3) Click once to define an origin

4) Click and drag to interactively rotate about that origin.

This is how the Illustrator rotate tool has worked since, literally,
Illustrator 1.0.

~~~
ye
In Illustrator you don't have to do step 1 or 3.

