Picozu - the HTML5 Adobe Photoshop clone | Hacker News Reader

Picozu - the HTML5 Adobe Photoshop clone

picozu.com

92 pointssozen34 comments

All these tools are cute, but I haven’t yet seen one which was as anywhere close to as capable as versions of Photoshop from, say, 1998. They always copy the gimmicky toys, while ignoring the features that professionals actually use to get their work done: curves (or at least levels, come on), calculations/apply image, a full set of blend modes (esp. the ones separating color/contrast), adjustment layers, masks, color management, CMYK/CIELAB modes, sophisticated selection tools, layer styles, scripting, recordable macros, unlimited undo w/ a visible history stack, &c. &c., not to mention all the thoughtful little touches of mouse behavior, keyboard shortcuts, etc. which let a pro navigate around Photoshop with blazing speed.

It’s like producing a plastic tricycle, and announcing: “A new automobile clone! It has cup holders, and I even painted flames on the side!”

Used the brush tool. Sorry this is not the best online tool.

This is a Photoshop clone: http://pixlr.com/editor/ Even opens PSD's.

For anyone curious about exactly why the brush tool comes up short:

http://i.imgur.com/E0LdU.png

It relies on a stamp-like drawing method of copying the brush at time intervals, and simply can't do it fast enough for even moderately quick drawing.

Odd. I thought the general algorithm was to record a number points where the user traced, interpolate between them (so you don't end up with giant discontinuities), and THEN rubber stamp on the full list. That drawing looks like my attempt a pencil tool when I was using BASIC back in the day.

Of course, if the program can't keep up with that, then the drawing would appear to lag behind the pen.

If I had to guess, I'd say that the pencil uses solid brushes and the "right" algorithm because it performs acceptably in that case, while the brush tool stamps instead because it can't keep up using that algorithm with an antialiased brush.

Interestingly, the pencil tool doesn't have this limitation. Even when turning the size up.

I can see what they're trying to do, but they're both unusably horrible on this machine (dual quad Xeon Dell T5500 running Fedora, Chrome 17). The pen / path tool just didn't work for me in Picozu, and the smudge tool in pixlr stutters and locks up the whole interface (presumably while it pushes pixels around).

I can't say I'm convinced by web paint programs. Maybe OK for a trivial "fix-my-redeye" case on something you've already uploaded. I also wish these things would stop claiming to be Photoshop clones, when they're really just MS Paint++. I used to use PS professionally (ie. I've earned money with it to easily justify the initial outlay and upgrades from 6 thru CS5) and there really is nothing to compare it with.

Pixlr is Flash, though, not HTML.

I love pixlr, it works wonderfully. I used to run contests for a team at work and I would make odd and funny custom wallpapers for the winner. My department doesn't have access to any fancy image editing software, so I would use pixlr.

That said, this is impressive, and different given it uses HTML5

You can use this : http://pinta-project.com/ on Windows/Linux/OSX (if you don't like GIMP) and there's also Paint.NET for Windows.

I'm sure your department can use Gimp ;-)

nobody can use gimp

what are you even saying

It doesnt support PSD neither other advanced image file formats, so it's more clone of MS Paint than Adobe Photoshop.

Exactly my impression - a MS Paint clone with layers and filters. This lacks the most rudimentary stuff like select tools, calling it a Photoshop clone is just dishonest.

Well, that's a bit harsh. It seems much more capable than MS Paint when it comes to functions. But yeah, comparing it Adobe Photoshop isn't right either.

It's not a bad start, but a clone of Photoshop it ain't.

Used the color selector. Drew a circle, so far so good. Duplicated the layer, tried to slide the circle across using Shift to fix the axis but seemed to select all UI elements in the browser (like I was selecting text). Duplicated shape was misaligned so hit Undo and ended up jumping back 2-3 operations - my second duplicated layer was gone and the first layer, while still existing, did not appear to contain any information.

Tried to draw an ellipse but the circle tool seems to use a fixed radius. Erased shape using eraser, difficult to see brush size as it's a crosshair that does not indicate the size. Had the idea of drawing a circle on a new layer and scaling the layer horizontally, but it does not appear to be possible to transform a layer. Dragged layer to Delete but it did not delete. Deleting layer from Layer menu did work though.

Drew another shape and tried fill tool to fill in with color, but it did not detect the polygon boundaries and filled the full screen. Looked for a "Filled polygon" option but the Shapes box seems to only allow selection of one option ("Polygon").

Interesting proof of concept, don't think I'll be able to use it for real work any time soon though.

(Chrome, OS/X)

It's a nice editor. I'm impressed. I wrote a similar HTML5 editor[0], so I can definitely relate to the effort it took.

Undo/redo doesn't seem to work correctly. At most I can only get it to completely undo to an empty image, at worst I can't seem to get it to undo at all. This is with Chrome on Snow Leopard.

[0]http://www.lovetopixel.com

Same issue, on the latest firefox nightly on Debian testing.

This is pretty cool, with this app (and a lot of other HTML5 apps) I often have an issue where it acts as if I'm trying to select text as if I was going to copy and paste. The result is the entire app gets the 'text-selected' blue overlay. Anyone know of way to prevent this? I'm not sure that e.preventDefaut() stops it.

When building desktop-like apps I'm using following snippet to disable text selection everywhere:

  body * {
    -webkit-user-select: none;
    -moz-user-select:    none;
    -ms-user-select:     none;
    user-select:         none;
  }

Then I whitelist any elements that should be selectable:

  textarea,
  input,
  [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select:    text;
    -ms-user-select:     text;
    user-select:         text;
  }

You can use CSS user-select:none; on the elements you want to prevent selection on.

Holy jesus crap! I am incredibly impressed. I'm also very interested in seeing any blog posts etc on how this app was developed. Usually large apps like these have creative ways of organizing code and building architecture.

I'm curious, what are the functionalities of photoshop that are giving you the most trouble reproducing in HTML5? Obviously HTML5 is not powerful enough, but it can do the basics. For instance, your spray tool is a clever hack, but it doesn't give nearly the same power as photoshop. I'd also consider using things like gaussian distributed sprays, which shouldn't be difficult.

Great job and I think many of us here would be interested to know the details.

I think the first thing a serious Photoshopper will do is start jamming on the keyboard shortcuts... none of which seemed to work for me. So, keep at it :)

The first one of these to use WebGL is going to win.

Why? WebGL won't give you too much of a benefit when you're dealing with 2D textures.

A common misconception, but completely false. OpenGL, and by extension WebGL, is not just for 3D; it's perfectly suited to 2D image manipulation. With programmable shaders you can perform practically any image processing operation (interactive brushes, resizing, compositing, filters; really any of the tools in the Photoshop palette) at hundreds of times the speed of JavaScript.

Without being 100% sure (not having played with WebGL too much), I'd guess it would enable you to perform a large amount of expensive image processing on the GPU, using shaders. For certain things (eg. blur), this would be a huge performance boost.

Tried it in both Firefox for Android and the native browser it's completely unstable and unusable on both.

Seems more like a Gimp clone. Not even close to Photoshop.

Nah. Gimp maybe isn't exactly as good as Photoshop (even though some tools were in Gimp much earlier than in Photoshop) but there is a huge difference between this website and Gimp. I appreciate the effort, but the functionalities of this website are way far from being anywhere near Gimp.

Why can't we just say "a generic image editor"? It's not really a faithful clone of anything in particular.

I love this idea. A few more features (like curves/masks) and a faster UI and I can see using this a lot.

Now if only I could upload a font... This is cool, keep up the good work :)

Reply on news.ycombinator.com