learning and playing with visual effects with javascript!

twitter: http://twitter.com/blurspline
github: https://github.com/zz85



An ASCII renderer for the Three.js library! Based on nihilogic's jsascii library. (still requires canvas support). Another treat after google's 8bit maps :D added this to github too. https://github.com/zz85/ThreeLabs maybe it could into the main library [update: This tool is now in three.js r49 renamed to AsciiEffect]

  • 15270
  • 2

Javascript Aurora Effect

with simplex noise.

  • 25893
  • 4

forked: three.js. random particles demo

particles demo with brilliant colors using spark.js engine and three.js

  • 17297
  • 5

Black Ink

Experimenting with JS Fluid Simulation. - Uses parallel Typed Arrays - Uses Typed Arrays with Canvas's image data ##References [Jos Stam's GDC03 paper](http://www.dgp.toronto.edu/people/stam/reality/Research/pdf/GDC03.pdf), the source of many references online for fluid simulation code However a little hard to read, so [fluid for dummies](http://mikeash.com/pyblog/fluid-simulation-for-dummies.html) might give a little explaination to the code. Fortunately, Stam's has some [presentation slides](http://www.dgp.utoronto.ca/~stam/reality/Talks/FluidsTalk/FluidsTalkNotes.pdf) which is more useful for anyone to wish to understand the thinking behind his algorithms which is much easier for reading too. Probably the better thing (which I only later on found out), was that there was [accompanying source code](http://www.dgp.toronto.edu/people/stam/reality/Research/zip/CDROM_GDC03.zip). It kinds of re-checks my code for bugs, even though it was mostly lifted from his paper. I dont claim to have done this really well. [Oliver's simple fluid dynamics simulator](http://nerget.com/fluidSim/) is close but optimized port of Jos Stam's code.

  • 3134
  • 2

Chasing Beziers Lights 2

A continuation of my bezier experiments (http://jsdo.it/zz85/o3X1 http://jsdo.it/zz85/k2K0) This is a closer imitation of the miaumiau's approach to bezier curves. http://www.miaumiau.cat/2010/03/beziers-our-approach/ (site still seems down, but you can read more about bezier curve on http://devmag.org.za/2011/04/05/bzier-curves-a-tutorial/ too) In this revision, colors are set using hsla. Hue gets rotated with time while the light trails decay in opacity. Against the black background, the "lighten" global alpha composite mode always work well. What I'm still not satifisied with is disjoined light segments. I'm not sure if canvas.stroke() can work with differring starting and ending line widths, and in that case, one might have to calculating some normals and use fill() with a custom path to get around it. In miaumiau's example, a glow filter (available in as3) is probably applied, over here, its imitated with a lighter but fatter line stroke. Also, the point randomness can be expanded beyond the viewport, so as to get a bigger sweeping effect.

  • 3116
  • 12


Hot tags


HTML / CSS / JavaScript