Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/walsh9/fun-with-canvas
🎈🎇 Fun experiments with HTML5 canvas
https://github.com/walsh9/fun-with-canvas
canvas javascript plasma raycaster wavy-text
Last synced: about 1 month ago
JSON representation
🎈🎇 Fun experiments with HTML5 canvas
- Host: GitHub
- URL: https://github.com/walsh9/fun-with-canvas
- Owner: walsh9
- License: mit
- Created: 2014-09-02T14:37:04.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-11-25T05:08:35.000Z (about 9 years ago)
- Last Synced: 2024-10-19T06:16:53.595Z (3 months ago)
- Topics: canvas, javascript, plasma, raycaster, wavy-text
- Language: JavaScript
- Homepage: https://walsh9.github.io/fun-with-canvas/
- Size: 957 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
# Fun Experiments with HTML Canvas
## [Raycaster](https://walsh9.github.io/fun-with-canvas/raycasting/index.html)
[](https://walsh9.github.io/fun-with-canvas/raycasting/index.html)
A canvas implementation of a raycasting engine.
There are textured and untextured versions.
Random map generation from [rot.js](https://ondras.github.io/rot.js/hp/).
The textured raycaster uses public domain [textures](http://opengameart.org/content/40-free-metal-textures-from-mtc-sets) by rubberduck on [opengameart.org](http://opengameart.org/).
Based on the raycasting pages of [Lode Vandevenne's CG Tutorials](http://lodev.org/cgtutor/). With more math from [F. Permadi's Ray-casting Tutorial](http://www.permadi.com/tutorial/raycast/index.html).
For squeezing a few extra frames out of the pixel by pixel rendering, the MDN article by Paul Roget [Faster Canvas Pixel Manipulation with Typed Arrays](https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/) was useful. But ultimately `putImageData` is still terribly slow compared to `drawImage`.
I'd like to make a `drawImage` based renderer at some point.
## [Plasma](https://walsh9.github.io/fun-with-canvas/plasma/plasma.html)
[](https://walsh9.github.io/fun-with-canvas/plasma/plasma.html)
Canvas implementation of an oldschool palette-cycling plasma effect based on math from [Lode Vandevenne's CG Tutorials](http://lodev.org/cgtutor/).
## [Cool Wavy Text](https://walsh9.github.io/fun-with-canvas/wavy/index.html)
[](https://walsh9.github.io/fun-with-canvas/wavy/index.html)
Text that slides up and down along a sine wave.
## Other notes
Glenn Fiedler's article, [Fix Your Timestep!](http://gafferongames.com/game-physics/fix-your-timestep/) was tremendously helpful for coordinating the timing of the rendering and state updates.