Comments on: Javascript Beziers

By: learn to draw animation, without all that moving stuff

learn to draw animation, without all that moving stuff — Mon, 16 Jun 2008 01:06:05 +0000

This was quite refreshing after spending a dull sunday afternoon watching nonsense on youtube. I am trying to get my programming chops up to snuff, but i am terrible

By: jbj

jbj — Tue, 18 Mar 2008 13:07:58 +0000

I’m really impressed with that! Thanks for sharing.

By: Oliver

Oliver — Wed, 22 Mar 2006 01:44:09 +0000

I just sped bezier.atT() up by 20%. It’s now around 35ms on my MacBook (in power saving mode), in Firefox 1.5 and Safari 2.0.1. It was 45ms in Safari and 55ms in Firefox.

(Yahoo has an implementation to0, but it’s around 150/300ms, or 110ms/460ms if you leave in the calls to parseInt.)

If you’re calling bezier.atT() directly, the next optimization would be to inline that so that you can evaluated multiple points at once. That will save one function call per point.

If you’re using the path interface, you could stub out the call to bezier.atT() to see if searching for the relevant segment is appreciable. That could use a binary search.

By: Jason Jobe

Jason Jobe — Mon, 13 Mar 2006 18:56:59 +0000

Wow, this is great. I did something similar with polygons (no curves). Performance, however, is an issue. I’m running a continuous animation with around 50 points.

Is this just going to be slow or is there something I can do to speed it up?

Thanks,
Jason

By: Max Carlson

Max Carlson — Sat, 11 Mar 2006 03:18:04 +0000

Drat - wordpress (quite reasonably) stripped the LZX out of my example - I’ll try again:

this.beginPath();
this.moveTo(75,40);
this.bezierCurveTo(75,37,70,25,50,25);
this.bezierCurveTo(20,25,20,62.5,20,62.5);
this.bezierCurveTo(20,80,40,102,75,120);
this.bezierCurveTo(110,102,130,80,130,62.5);
this.bezierCurveTo(130,62.5,130,25,100,25);
this.bezierCurveTo(85,25,75,37,75,40);
this.fill();

By: Max Carlson

Max Carlson — Sat, 11 Mar 2006 03:15:33 +0000

Oliver, this is fabulous stuff! I’m integrating it into the platform now. I borrowed a testcase from http://developer.mozilla.org/samples/canvas-tutorial/2_6_canvas_beziercurveto.html

Two of the curves are drawn as lines because the intersection method thinks they’re collinear. Any idea why? Thanks!

Regards,
Max Carlson
OpenLaszlo.org

By: Languages of the real and artificial · Visualizing Regular E

Languages of the real and artificial · Visualizing Regular E — Fri, 03 Mar 2006 01:58:51 +0000

[...] Update: Some of the support libraries are now available as open source. See JSON for OpenLaszlo, JavaScript Beziers, and Canvas with Text. [...]