Forked from: zz85's Chasing Beziers View Diff (98)

Chasing Beziers Lights 2

zz85

License: MIT License

Fork
3
Fav
12
View
4931
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 173 lines
  • HTML 0 lines
  • CSS 10 lines
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.
  • Chasing Beziers Lights 2
  • Three.js r60
  • Chasing Beziers Lights 2

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

zz85

Author

learning and playing with visual effects with javascript!

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

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by