17 ms·
Show HN: I open-sourced my web app alternative to Illustrator
- mjhoy 13y agoWow. 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 13y agoThank you! Those are all things I focused on so it's a pleasure to hear that.
- rattray 13y agoFWIW, I actually much preferred Illustrator's v/a distinction to the 'click on a point' / 'drag over line' distinction here.
- thebiglebrewski 13y agoThis is awesome! I'm going to encourage my students to use this in my web design class to draw basic mockups.
- Edmond 13y agothey could also try http://schoolnotez.com/ http://schoolnotez.com/ :) it is also downloadable: http://schoolnotez.com/schoolnotez.zip http://schoolnotez.com/schoolnotez.zip
- vrajpal24 13y agoArtur this is pretty super dope wedep. Good job homey.
- hablahaha 13y agoAwesome! 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 13y agoIf 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.
- hablahaha 13y agoCoffeescript is way easier to learn than Illustrator.
- KaoruAoiShiho 13y agoI learned coffeescript in literally 30 minutes. I have a hard time taking any js dev seriously who sees coffeescript as hard.
- blowski 13y agoI think the OP is not saying "it was impossible to learn", but "the amount of effort required to learn wasn't worth the return I would get from it". The latter may well be a sensible decision. And it's great when someone tries to makes the learning process easier, and even better when they open source it.
- hablahaha 13y agoYeah, exactly. I also don't have a need to use any of those heavy weight apps more than a few times a year, so every time I go back, I have to start over again from scratch. Something appealing, lightweight, with good tutorials would be such a boon for web developers who don't have time to learn all the subtleties of Illustrator.
- camus2 13y ago> Ugh, this entire thing is in coffeescript too You mean the entire thing is noise free an easily readable, I agree.
- 13y ago
- Edmond 13y agodon'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.
- felics 13y agoThis is awesome, thanks for this!
- krmmalik 13y agoThank you for doing this. This may seem like an ignorant question but can your app open .ai files?
- artursapek 13y agoNot 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.
- Michael-XCIX 13y agoThis 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!
- jnardiello 13y agoNot much to say other than: Wow. Great Job.
- ygra 13y agoPlayed 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 13y agoYou'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 13y agoApologies, 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.
- danabramov 13y agoPardon the meta-comment, but “reüse” is just so comically HN.
- ics 13y agoAssuming ygra is German he/she probably just hit the [separate] ü key. That being said, until their follow up above I thought the comment was intended to be a parody of HN negativity.
- kriro 13y agoVery cool, thanks.
- mosselman 13y agoThis is pretty awesome!
- Sir_Cmpwn 13y agoDidn't work at all for the MediaCrush logo. https://mediacru.sh/static/mediacrush_logo.svg https://mediacru.sh/static/mediacrush_logo.svg
- stevenleeg 13y agoIs 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.
- Sir_Cmpwn 13y agoI meant to be more useful than negative, by offering a test file that didn't work so they could try it themselves and perhaps fix the problem. I'm sick of people being sick of this stuff.
- mikegreen 13y agoIt is not negativity, it is the real world. The author put up his wares and someone reviewed it and shared his thoughts. Hopefully, maybe, someone will come along and say "hey I checked in a fix for it!".
- sergiotapia 13y agoDon'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_ 13y agoWow, saying that he "lacks tact" is a bit of an understatement.
- coulix 13y agoReally really impressive, you roxx PS: http://tutorsbox.com http://tutorsbox.com creator
- Edmond 13y agoare 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.
- ricardobeat 13y agoArtur, 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 13y agoLooks fine for me both in Canary and Stable on Snow Leopard.
- glazskunrukitis 13y agoSame here.
- tarellel 13y agoLooks fine for me as well
- auganov 13y agoIs 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 13y agoFor fun
- thekingshorses 13y agoNice. 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.
- davidy123 13y agoNice 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.
- ii 13y agoCan 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.
- rattray 13y agoThis 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?)
- seanlinehan 13y agoGreat job. One request: Make the CMD shortcuts work for the CTRL key too. They don't seem to fire.
- Kequc 13y agoAs someone who struggles in general with javascript this is phenomenal and makes me feel like a programming goof. Good job.
- SippinLean 13y agoCool, but I need separate object and direct selection arrows like Illustrator. And rulers and draggable guides and a square grid.
- ye 13y agoThis 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 13y agoRotation is possible. Activate the (rotate indicating) tool and move the resize/move/rotate handles.
- ye 13y agoAh, sorry. It works in such a non-obvious way, I missed it.
- hamburglar 13y agoThe rotation tool works exactly the way Illustrator's does.
- ye 13y agoIn, it doesn't.
- jbeja 13y agoYou don't get the point of this, do you?
- hamburglar 13y ago1) 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.
- ropz 13y agoI 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!
- jpincheira 13y agoBeautiful code. Love it.
- cashmonkey85 13y agoThe is also http://vectorpaint.yaks.co.nz http://vectorpaint.yaks.co.nz an online vector editor
- neovive 13y agoVery 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?
- daenz 13y agoGreat 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 13y agoAgreed 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 13y agoThe 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. :)
- elwell 13y agoCondition of source code got my upvote.
- elwell 13y agoSo did you just make this for fun?
- Fede_V 13y agoFantastic 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.
- watwut 13y agoGreat job! Hope you find success with it and thank you for open sourcing it.
- pvnick 13y agoCongratulations! 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!
- ajaymehta 13y agoThis is so sweet, Artur!
- dangayle 13y agoCool. It seems very responsive, which is great.
- dclara 13y agoNice try. What type of OSFS license are you using?
- webwanderings 13y agoPixlr 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 13y agoPixl 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.
- jbeja 13y agoI 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.
- varkson 13y agoIt's unusable on IE but looks interesting none the less.
- nXqd 13y agoCongrats ! This looks great :D
- lukaseder 13y agoThere 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 13y agoI recommend "Rietveld".
- noaheverett 13y agoYou really did put a lot of work into this, great job.
- borplk 13y agoGreat job!
- 3838 13y agoyou could check out http://paperjs.org/ http://paperjs.org/ too, was originally a plugin for ai
- ehosca 13y agoyeah ... just like Illustrator .. hardly any noticeable difference in in features ...
- niels_olson 13y agoThis 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...
- JungleNavigator 13y agoReally nice. I like it works with Dropbox
- johncoltrane 13y agoSince when did an alternative to something stop needing to do at least as much as that something?