Bezier Doodle

zz85

License: MIT License

Fork
2
Fav
1
View
3463
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 99 lines
  • HTML 1 lines
  • CSS 10 lines
A random doodle created with bezier curves.

Playing with bezier curves is certainly not new [1], but I had to do it myself.

While a little of an overkill here, I use Three.js for its QuadraticBezierCurve class.

The method of generating the bezier points comes from an old trick I observed in bezier experiments (which could also be used for simple curve smoothening).

The trick is this: create a list of random points, then create a list of midpoints between them. The midpoints become endpoints of each bezier segment, and the original random points become the anchored/interpolated point of the bezier segment. Seems to work pretty well.

[1] see http://codepen.io/nicoptere http://codepen.io/Francext/ http://www.miaumiau.cat/2010/03/beziers-our-approach/ (and many others.)
  • Bezier Doodle
  • Three.js r60
  • Bezier Doodle

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