pouët.net

Twister

Twister
SVG 1k intro by Ger
2008-02-19

Here's the classic twister again, on a new platform, with a new look :)

The 1k is valid SVG according to http://validator.w3.org and is tested to work
in FireFox 2, FireFox 3, Opera 9.25, Opera 9.50 beta and Safari 3. (Internet
Explorer does not support the SVG standard.) Opera is much faster than others,
so please check this in Opera: http://www.opera.com/download


==Source code==

What you see is a simple 2.5d twister effect. This could actually be coded to
run on classic computers as is.

One point of SVG is scalability, that is not put in use here: if you scale the
effect up, the sides are "jaggy" (pixelated). This is a "feature" here, my goal
was just to implement this classic scanline effect as is. (Imho, it looks best
with 16 pixels wide lines ;)

The file twister_clean.svg is a general purpose object-oriented SVG "demo
engine". The rest of the files were hacked a bit to speed things up. Letters
denote effects, numbers denote level-of-detail. The first thing to do if you
start tweaking the code is to search for VoxelSize and set it up to a good value
for your computer/browser (1, 2, 4, 8 or 16; 1 is detailed, 16 is fast).

If you're in for size coding, compare twister_t02.svg with the 1k. I didn't plan
to size optimize this, but I thought that some of you would otherwise miss the
point. However, I think that we should be going in the direction of finding new
demo platforms, integrating videos and demo effects, involving viewers by
letting them adjust demo designs - and a bit less of this how-many-k thing ;)


==Coding SVG==

SVG is an open standard image (and animated image) format that can host
JavaScript code and should be displayable in browsers. As SVG is a W3C standard,
it should look the same regardless of the browser. Actually, Internet Explorer 6
and 7 just does not support SVG. (Hopefully, later versions will.) FireFox 2 and
Opera 9 supports it properly.

You can edit SVG in any general purpose text editor, such as Microsoft Visual
Studio Express :) To debug SVG, install Firebug to Firefox. Opera development
console can not debug code yet (as in Opera 9.25). To let Firebug find your
code, do not place it in a separate .js file.

SVG Standard is here:
http://www.w3.org/TR/2001/REC-SVG-20010904/REC-SVG-20010904.pdf
JavaScript Standard is here:
http://www.ecma-international.org/publications/standards/Ecma-262.htm
JavaScript for lazy folks:
http://www.w3schools.com/js/


==Contact==

Ger (Gergely Kutenics) ger at utamon.com