Topic awaiting preservation: Interesting drawing/animation technique (Page 1 of 1)

Foung a pretty cool techniuque for drawing and making animations in JavaScript, that I've never seen before.
It uses <map shape="poly"> and changes the coords to animate.
Check out (IE only):
http://laurens.vd.oever.nl/weblog/ontheedge/wireframehtml/chopper.html
http://laurens.vd.oever.nl/weblog/ontheedge/wireframehtml/plane.html

Maybe it can be used in some 20-liner script

Funny and clever technique indeed.
The outline of the areas seems to be drawn in XOR so the overdrawn lines disappear, which makes this technique really tricky to get a proper object displayed. But still, that's a really good alternative use of the tags.

if i understood this correctly the lines are drawn because of a bug in IE?

edit: ok i shouldnt call it a bug. but in other browsers the outlines of imagemap polygons are not drawn, right?

edit2: poi, hey with your line drawing algorithm, you should be able to accomplish something like that quite easily!

(Edited by GRUMBLE on 05-11-2005 16:39)

GRUMBLE: I beg the W3C do not states how the map areas should be displayed when they have the focus, so it's not a bug. Neither a feature in fact.

Actually a while ago I've mixed my drawing technique with an import XML function and loaded/generated some 3D objects and rendered them in wireframe. But I have to admit it wasn't as fast as the scripts above.

i have to admit i didnt look at your algorithm in detail. but could you tell me what algorithm you use to calculate the x and y position for each pixel?

afaik there is Bresenham and DDA. DDA being much faster since it doesnt use floating point operations.

i'd be very interested in the results you got with your 3d models. care to show it us?

(Edited by GRUMBLE on 05-11-2005 17:31)

I simply don't compute the x and y position of each pixel. That's a waste of time since stretching a diagonal line leaning up or down can give exactly the line you want.

There's no real need to read the blah blah to understand my Line drawing technique in JavaScript. The illustrations are self explanatory ( escpecially the last one ).

ps: I'll upload the 3d thingy. I picked Peter-Paul Koch's import XML function to load the objects.
ps2: Doh! While searching for the 3d thingy, I saw the oldest version of my line drawer. The Last Modified date says 1st august 2002.



(Edited by poi on 05-11-2005 20:27)

This is why I like IE lol
Too bad that you can't use image clipping to fill the polygons in near-realtime too...

/TwoD

Alas, MSIE is not very portable or compatible. At least it's fast.

VERY clever technique, however... I wish I had that sort of lateral thinking.

---
Website

ah poi, nice trick!
so you have two diagonal line templates and one for the horizontal and vertical lines and by stretching these images you can create any line you want.

with some more templates you could even draw filled polygons!
and with php as image creater you can create these templates with different colors on the fly!

so, when does your 3d engine go live?

GRUMBLE: You can only draw certain types of polygons that way. I've imagined a recursive method to draw any polygon, but never implemented it and doubt it could be used to render anything else than a cube or a tetrahedron in realtime.

Such methods, if they ever work, would be worth it for big polygons. Smaller polygons are easily rendered with the old school method : splitting the triangles in two triangles having an horizontal edge then going top down interpolating the xLeft and xRight coordinates.


If you have few colors you can have the templates in real image files. Or better, when a diagonal line is requested and does not exist, a 404 script could generate it.


For the 3d thingy, let's say this WE, as I certainly have to clean the code a bit and I'm working on something else at the moment. Sorry for the little delay.



(Edited by poi on 05-13-2005 00:43)