Topic: Rendering Filled Polygons with JavaScript + DHTML

When I first submitted this to sites like Digg, reddit etc. back in 2006, I was honestly a bit surprised with the lack of attention it got. Maybe people didn't really understand what was going on. Or since it's just a stupid hack and doesn't really "solve any real problems", it didn't deserve any attention.

I've just discovered OZONE Asylum and realized that the community here would be the proper audience for something like this.

The technique basically allows you to draw regular/irregular polygons (or even slightly concave stars) with a fill/texture. Similar to poi's line drawing technique, I'm stretching right triangles to occlude a gradient background. I'm also using "pie slices" instead of triangles to get a "fake spline" effect.

Anyways, I hope you enjoy it

http://magnetiq.com/

(Edited by MaGnA on 01-23-2008 21:01)

Neat!

You could get rid of the images and use border slants ... or go for the Canvas tag ... but it's not as fun as it makes things almost too easy. Ok Canvas is a different kind of fun.
Unfortunately your technique forbids overlaping several polygons, so it's not suitable for, say, a 3d engine. It could work if you draw the filled parts of the polygon instead of masking the outer parts of the bounding box, but it'd probably be slower than just using Canvas as it requires to touch CSS properties of quite a few elements plus dealing "bloating" the DOM tree with enough dummy elements to render the maximum amount of polygons you'll have to render.


Glad to see some new ass kicking blood in the Asylum. Make sure to make a little something for the 20 lines JavaScript contests we have here.



(Edited by poi on 01-23-2008 23:24)

Definitely, welcome and stunning : btw, this is an extension of what Wrayal suggested the other - triangles
used for occlusion instead of flat shading - really neat yeah.

Looks very cool

Btw the popup looks very pretty and the code looks nice too. Who do you work as?

I looked around on you website and you have some interesting stuff there. I liked the browsersize.com thingie.

Welcome to the asylum!

Welcome to the Asyum, MaGnA! That's a really nice demo. It's nice to see you here.

.



-- not necessarily stoned... just beautiful.

Thanks all for the positive feedback and the warm welcome!

poi: Thanks for the suggestion! I had discovered the border slant hack (see http://www.uselesspickles.com/triangles/demo.html for an extreme example) just after finishing this. And I sighed, "oh well, at least mine supports textures!". I quickly replaced my triangle images with border slants and I saw a dramatic performance gain -- but I haven't made any measurements yet. I might put together a more complex demo, with a lot of polygons, using the border slant technique some time... I'm also intrigued by the 20-liner competition. I already have a few ideas

argo navis: Thanks, inmate!

Arthurio: Thanks! I'm glad you liked the design. I currently work at Genesys Telecommunications Labs. as a software developer. I do a little bit of design/artwork/music on my spare time only (which is quite a rarity nowadays.)

hyperbole: It's nice to be here!

<crappy-signature>magnetiq.com</crappy-signature>

Just a thought : I am starting to think that your technique + triangle slants would be a great basis for...

(geez it's just unbelievable)
(gouraud shading can be calculated quite easilly, gradients can be altered and distorted in many ways
using js)

I am starting to think your technique + triangle slants + some fiddling with gradients and gouraud could lead
to pure js gouraud shaded 3d.

And I probably am not the only one considering this atm.

argo navis: Look at Redbug by Shingebis aka Gasman. He's almost doing that. His approach is in fact the classical horizontal spans one. He uses an image containing colored gradients from intensity 0 to 1 then back to 0 ( see the image below ), positions and stretch it as to show the gradient of intensity on each horizontal slice of the triangle. Simple and fast enough for a few polygons.



There is (much) faster way to do Gouraud in JavaScript *wink* *wink*

BMP generation and Neja you mean? data:uri schemes again?
Or canvas material?