[HN Gopher] Ship Shape
___________________________________________________________________
Ship Shape
Author : SerCe
Score : 260 points
Date : 2023-11-13 11:51 UTC (11 hours ago)
(HTM) web link (www.canva.dev)
(TXT) w3m dump (www.canva.dev)
| freedomben wrote:
| Great article, and very interesting work.
|
| I'm surely in the minority, but I oddly find myself enjoying the
| hand-drawn "shaky scribble" versions more than the "sleek vector
| graphic." I'm sure even my preference would be context dependent
| though, so even in my case it's a cool feature. But in a world of
| artificial perfection, there's something innately attractive in a
| genuine hand-drawn production.
| a3w wrote:
| A pentagram and a sparkly star are not the same thing. Is this an
| example of underfitting?
| highwind wrote:
| https://en.wikipedia.org/wiki/Star_polygon
| rozenmd wrote:
| The library Canva use for drawing lines may be of interest:
| https://github.com/steveruizok/perfect-freehand
| candiddevmike wrote:
| Doesn't look like Canva is a sponsor...
| hobofan wrote:
| They are a one-time sponsor: https://twitter.com/steveruizok/
| status/1641348310886670336?t...
| aCoreyJ wrote:
| After being called out lol
| replwoacause wrote:
| Is 5K for this is a good amount? It seems generous to me
| but I'm also sure it's only a drop in the bucket for
| Canva.
| lucgagan wrote:
| If I was the creator of the project, I'd be happy with
| it. Most companies would not have donated anything.
| hk__2 wrote:
| If this seems generous then it's a good amount. That it's
| only a drop in the bucket for Canva is not relevant.
| danproductman wrote:
| This makes me wonder how they pulled off something similar in
| Macromedia Flash (RIP) well over 20 years ago. I vividly remember
| being amazed by how it smoothed out curves when drawing freehand,
| with such limited processing power compared to today's CPUs.
| danjc wrote:
| Irrelevant - you must use machine learning for everything now.
| just_boost_it wrote:
| These GPUs aren't going to heat themselves!
| yuvalkarmi wrote:
| I lol'd
| mbb70 wrote:
| LeCun et al. got 99%+ handwritten digit accuracy in 1995, which
| is pretty analogous to shape identification.
|
| Having it run trivially and performantly in the browser is
| still an accomplishment. As always, the experience for the user
| is what counts.
| Damogran6 wrote:
| It was core funtionality for The Apple Newton in 1993 with a 20
| MHz ARM processor
|
| https://en.wikipedia.org/wiki/MessagePad#User_interface
| wes-k wrote:
| Smoothing is a different operation where you are simplifying
| the bezier curve by removing redundant(ish) points. So if you
| draw an almost straight line, you may have created 100 control
| points, and then the software simplifies it down to 4 points.
| londons_explore wrote:
| I suspect it took mouse events, and initially drew straight
| lines between them. That's necessary on 1990's hardware because
| drawing straight lines is fast, and you need to do it fast.
|
| Then, when you are done drawing, it redraws the line, using the
| same points as before, but this time as input to a spline curve
| algorithm.
|
| Drawing splines isn't much harder computationally, but notably
| if you add one more point to the end of a spline curve, then
| part of the line that you have already drawn changes. That in
| itself is _very_ computationally heavy, since everything behind
| that line now needs to be redrawn - certainly not something you
| can be sure can be done at 60 fps!
| jmiskovic wrote:
| IMO the RNN is overkill of this problem, compared to a simple and
| elegant algorithm called "$1 unistroke recognizer". That one
| works beautifully even when trained with just a single sample of
| each gesture.
|
| I hope $1 unistroke gets more recognition because it can be
| integrated in an afternoon into any project to add gesture
| recognition and make the UI more friendly.
|
| It works quite reliably for palm style "Graffiti" text entry, as
| long as each letter is just a single stroke. The original paper
| also makes great effort to be readable and understandable.
|
| https://depts.washington.edu/acelab/proj/dollar/index.html
| gurgunday wrote:
| Agreed, it really works too well for how simple it is!
|
| We implemented it in ES6 as part of a uni project if anyone's
| interested: https://github.com/gurgunday/onedollar-unistroke-
| es6
| entropie wrote:
| I tried 4 different shapes (circle, rectangle, triangle and
| heart) and it always said "Ellipse with score ...".
| yathern wrote:
| From the README:
|
| > By default, it recognizes three shapes: Arrow, Check
| mark, and Ellipse.
|
| > You can add more templates by drawing them and clicking
| on the Add Template button.
|
| It worked well for the three - except a clockwise circle
| wouldn't work, only a counter-clockwise.
| harunurhan wrote:
| it works really well if all you are drawing is an eclipse
| -\\_(tsu)_/-. Could be a bug in the client or your
| implementation of $1.
| ajnin wrote:
| A big issue with the $1 recognizer is that it requires strokes
| to be drawn in a specific way, for example to draw a circle you
| need to go counterclockwise, if you go clockwise (as seems more
| natural to me) it gets recognized as a caret. This makes it not
| really usable in a context of free drawing were the users are
| not aware of the details of your implementation.
| 1-more wrote:
| it thinks everything I draw is a caret.
| mcphage wrote:
| > ^^ ^^^^^^ ^^^^^^^^^ ^ ^^^^ ^^ ^ ^^^^^^
|
| I don't understand what you're trying to say here.
| jmiskovic wrote:
| Not an issue, just invert each recorded gesture and add it to
| the same symbol.
| dist-epoch wrote:
| I've just tried it, and it's pretty bad, without training at
| least.
|
| My rectangle is recognized as a caret, my zigzag as curly
| bracket.
|
| And it doesn't support drawing a shape in two strokes, like the
| arrow for example.
| DragonStrength wrote:
| I played with this for a bit and found it too simple. If you
| don't draw the example shapes exactly, it confuses them. I
| recommend playing with "delete" versus "x" from the example
| shapes to see just how poorly this does. I could not get it to
| consistently differentiate between different drawing
| techniques.
|
| This would certainly get you started for gesture interfaces,
| where drawing a shape the same way every time is expected. It
| would not be a good fit for the use case here of diagramming.
| foobiekr wrote:
| it does not work as well.
|
| I have this deep seated fear that NNs will be the death of the
| lessons learned from 1970-2010. After all, if you can use
| massive amounts of compute to materialize what seems to be a
| good enough function approximator, why do advanced algorithms
| at all?
|
| Obviously the reason we should is that approximators like the
| NNs have explainability issues and corner case unpredictability
| issues plus they are bad at real world complexity (which is why
| self driving efforts continue to struggle even when exposed to
| a narrow subset of the real world).
| hospadar wrote:
| I think you're right on about explainability and unexpected
| handling of corner cases - but I think one of the lessons
| from GOFAI is that handcrafted algorithms might look good in
| a lab, but rarely handle real-world complexity well at all.
| Folks worked for decades to try to make systems that did even
| a tiny fraction of what chatgpt or SD do and basically all
| failed.
|
| For safety stuff, justice-related decision-making, etc I
| think explainability is critical, but on the other hand for
| something like "match doodle to controlled vocabulary of
| shapes" (and tons of other very-simple-for-humans-but-
| annoyingly-hard-for-computers problems), why not just use the
| tiny model?
|
| Maybe if we get really good at making ML models we can make
| models that invent comprehensible algorithms that solve
| complex problems and can be tweaked by hand. Maybe if we
| discover that a problem can be reasonably well solved by a
| very tiny model, that's a good indication that there is in
| fact a decent algorithm for solving that problem (and it's
| worth trying to find the human-comprehensible algorithm).
| vipermu wrote:
| exactly
| soamv wrote:
| People here testing out the example on this page and reporting
| errors seem to be missing the fact that this demo is "trained"
| on _one_ example. The linked paper[0] goes into error rates,
| and they get better pretty quickly with a few more examples.
|
| [0]https://faculty.washington.edu/wobbrock/pubs/uist-07.01.pdf
| , page 8
| biosboiii wrote:
| The engineers of ASML, TSMC and others wake up every day, shoot
| lasers on liquid lead to generate light with extreme short
| wavelenghts, to make smaller and more performant chips.
|
| And web developers wake up every day so that no one notices their
| work.
| ilovecurl wrote:
| nitpick: TSMC's EUV process uses lasers to vaporize tin, not
| lead, into EUV emitting plasma.
| londons_explore wrote:
| Does the tin itself lase? Is the radiation given off from the
| tin single-frequency and phase coherent?
| foobiekr wrote:
| No. And it doesn't matter for their use case.
| londons_explore wrote:
| seems like a recipe for fragility... The mixtures of
| wavelengths will make optimizing other parts of the
| process very hard. And even keeping a consistent mix of
| wavelengths isn't easy.
| dist-epoch wrote:
| Wouldn't it be hilarious if some ASML/TSMC engineers used Canva
| internally? I bet it happens in some corner.
| biosboiii wrote:
| They certainly do, somewhere.
|
| It's not against web devs in general, but this "give a man a
| hammer and every problem looks like a nail" approach to
| things. Apps like Canva are unusable for me on my old PC.
| Many websites too. I have only about 15GB of mobile data,
| some websites take like 20 megabytes of my monthly without
| any fancy video/imagery.
|
| Related article: https://www.theolognion.com/unreal-
| engine-5-is-meant-to-ridi...
| shepherdjerred wrote:
| More performant chips mean you can have more software
| abstraction and build things quickly. The increase in chip
| speed does not correspond to faster program execution but
| rather faster program authorship.
|
| It's easier to train an army of web developers to build React
| applications than to teach them PHP + JS, Ruby + JS, etc. Those
| React developers can also (on average; many people are insanely
| productive in "uncool" languages) write applications more
| quickly.
|
| For example, a company could write their app for macOS +
| Windows + Linux using native frameworks, or they could write
| their app once in JS + Electron.
|
| A native app would certainly be much more performant, but that
| comes at the cost of being much more difficult to build, and
| most likely, Linux would not be supported at all.
| ljlolel wrote:
| Faster or just cheaper web devs that won't unionize?
| shepherdjerred wrote:
| Both, probably.
|
| If you can teach more people how to write web apps, that
| skill becomes less valuable.
| h2odragon wrote:
| followed the "Draw" link and played with the thing there, but
| didn't see a way to demonstrate this functionality? Is it a paid
| feature or something?
| singularity2001 wrote:
| same, after 1h of technical descriptions of how they did it, I
| didn't find out WHERE / HOW we as users can use this feature!!
| robinhouston wrote:
| It triggers if you keep the mouse button down for a couple of
| seconds after finishing the stroke.
| visrut7 wrote:
| if model is on client side itself why not make it open source?
| simlevesque wrote:
| To keep a competitive advantage and get value out of your
| investment.
| infocollector wrote:
| It would be nice if this was open source :) Recently, there have
| been various models that have become small in size (This one is
| 250kb. There are other simple tasks that have seen models of size
| 50kb or so for finetuning large models). I am looking forward to
| when we can actually get back to small models for useful
| applications :)
| SonOfLilit wrote:
| They trained it to recognize nine predefined shapes?
|
| Come on, if you're going to train a model, make it a generic
| smoother/DWIM for drawing shapes!
|
| You will also get more "analog"/never-identical shapes, which
| will feel much more stylish in the way drums feel warmer than
| drum samples even when played by an expert at hitting the notes
| identically and on time.
| jcparkyn wrote:
| I agree, all the examples in TFA feel lifeless compared to the
| originals (except the circle). I could see the utility if they
| went for "proper" vector shapes, but here it feels like the
| worst of both worlds.
| spondylosaurus wrote:
| The iPad drawing app Procreate has a smoothing tool that sounds
| kinda like what you're describing--you basically draw a line
| freehand, and then Procreate smooths it afterwards.
|
| Most other drawing apps (like Clip Studio Paint, which is what
| I primarily use) have a comparable ability to smooth the lines
| _as_ you 're drawing by stabilizing the actual brush tool--
| basically slowing down the responsiveness of the brush to
| reduce jitter.
| rrherr wrote:
| "We developed a variation on the Ramer-Douglas-Peucker (RDP)
| algorithm, which is a curve simplification algorithm that reduces
| the number of points in a curve while preserving its important
| details. It achieves this by recursively removing points that
| deviate insignificantly from the simplified version of the
| curve."
|
| This reminded me of an old side project, which others may be
| interested in. I applied Douglas-Peucker to Picasso for a talk at
| Strange Loop 2018:
|
| Picasso's Bulls: Deconstructing his design process with Python
| https://rrherr.github.io/picasso/
| tlrobinson wrote:
| If you implement a feature like this, please, make it optional
| and obvious when it's enabled. It's maddening when tools try to
| be too smart and don't get it perfect (I have been guilty of this
| too)
| karaterobot wrote:
| > However, if you're anything like us, even a simple straight
| line drawn with a mouse or a trackpad can end up looking like a
| path trod by a tipsy squirrel. Don't even get us started on
| circles and rectangles.
|
| But who needs to draw shapes with their mouse in Canva? Years
| ago, Miro had a feature that converted your flailing attempts at
| drawing a star with a mouse into a geometrically precise star (or
| circle, or triangle, or whatever). I thought it was super cool,
| but then I never, ever needed to use it. I never need to do line
| drawing with my mouse: if I'm making diagrams, I just use pre-
| made shapes, which are faster. If I am making icons, I use a
| whole different process centered around Boolean operations and
| nudging points and the Pen tool--and I am probably using a
| dedicated program, like Illustrator, to do it. And if I am
| actually illustrating something (rarer these days than in times
| past) I have a tablet I will pull out. I am sure the tech here is
| cool, but what's the use case?
| tobyjsullivan wrote:
| Canva is not a diagraming tool. It's a visual design tool with
| a very different user base.
|
| Their asset library is massive with millions, maybe tens of
| millions, of images including both photos and vector graphics.
|
| One of the more annoying parts of the tool - in my limited
| experience - is searching through an endless library for simple
| shapes when I already know exactly what I want. Presumably this
| tool aims to solve that pain point.
|
| Disclosure: worked there a few years ago.
|
| Edit: I suspect (zero inside info) this use case is important
| because they want to be a competitive diagraming tool _as
| well_. However, they'll be constrained in that they cannot
| fundamentally change the design experience for the other 99% of
| their current users.
| pc86 wrote:
| > but what's the use case?
|
| Designers/marketers who don't learn keyboard shortcuts, for
| whom the comparison is "drawing the shape with my mouth"
| (quick) vs. "going through upwards of a half dozen menus to
| pick the right shape, place it, then resize it" (slower). Even
| if the shape is available w/o going to any menus, drawing the
| entire thing with your mouth using a single cursor is going to
| be faster than placing and resizing a bunch of icons, switching
| to the arrow feature and adding the arrows in.
| karaterobot wrote:
| Every designer I know (including myself) uses keyboard
| shortcuts like crazy. That's why Photoshop, Illustrator,
| Sketch, and Figma all have a very robust set of keyboard
| shortcuts. I assume marketers are the same--anyone who uses
| an application every day, really.
| pc86 wrote:
| Which is why I specified those who don't :)
| karaterobot wrote:
| But I'm saying I don't know any designers who don't use
| hotkeys, and while that's anecdotal, I can't imagine they
| are more than a slice of a slice of Canva's target
| market.
| lancesells wrote:
| There's an odd feeling about the writing in this article. Maybe
| I'm seeing things but it does not feel like it's written or
| composed entirely by a person.
| vipermu wrote:
| how will this change with ai though?
| simlevesque wrote:
| It already uses AI so I'm not sure what you mean.
___________________________________________________________________
(page generated 2023-11-13 23:00 UTC)