{"id":13658237,"url":"https://github.com/walsh9/fun-with-canvas","last_synced_at":"2025-08-05T16:10:32.345Z","repository":{"id":20308176,"uuid":"23582055","full_name":"walsh9/fun-with-canvas","owner":"walsh9","description":"🎈🎇 Fun experiments with HTML5 canvas","archived":false,"fork":false,"pushed_at":"2015-11-25T05:08:35.000Z","size":980,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-02T02:11:16.257Z","etag":null,"topics":["canvas","javascript","plasma","raycaster","wavy-text"],"latest_commit_sha":null,"homepage":"https://walsh9.github.io/fun-with-canvas/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/walsh9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-02T14:37:04.000Z","updated_at":"2019-03-13T20:09:17.000Z","dependencies_parsed_at":"2022-08-21T18:20:43.632Z","dependency_job_id":null,"html_url":"https://github.com/walsh9/fun-with-canvas","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walsh9%2Ffun-with-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walsh9%2Ffun-with-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walsh9%2Ffun-with-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walsh9%2Ffun-with-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/walsh9","download_url":"https://codeload.github.com/walsh9/fun-with-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245944062,"owners_count":20697948,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","javascript","plasma","raycaster","wavy-text"],"created_at":"2024-08-02T05:00:57.897Z","updated_at":"2025-03-27T23:44:46.251Z","avatar_url":"https://github.com/walsh9.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Fun Experiments with HTML Canvas\n\n## [Raycaster](https://walsh9.github.io/fun-with-canvas/raycasting/index.html)\n[![Raycaster](https://cloud.githubusercontent.com/assets/6074785/6063788/f3408b44-ad27-11e4-9328-35b112efbbd9.png)](https://walsh9.github.io/fun-with-canvas/raycasting/index.html)\n\nA canvas implementation of a raycasting engine.\n\nThere are textured and untextured versions.\n\nRandom map generation from [rot.js](https://ondras.github.io/rot.js/hp/).\n\nThe 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/).\n\nBased 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).\n\nFor 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`.\n\nI'd like to make a `drawImage` based renderer at some point.\n\n## [Plasma](https://walsh9.github.io/fun-with-canvas/plasma/plasma.html)\n[![Plasma](https://cloud.githubusercontent.com/assets/6074785/6063789/f3425af0-ad27-11e4-964e-ab15a134933d.png)](https://walsh9.github.io/fun-with-canvas/plasma/plasma.html)\n\nCanvas implementation of an oldschool palette-cycling plasma effect based on math from [Lode Vandevenne's CG Tutorials](http://lodev.org/cgtutor/).\n\n## [Cool Wavy Text](https://walsh9.github.io/fun-with-canvas/wavy/index.html)\n[![Cool Wavy Text](https://cloud.githubusercontent.com/assets/6074785/6063790/f34370d4-ad27-11e4-8048-e1acc5295dbf.png)](https://walsh9.github.io/fun-with-canvas/wavy/index.html)\n\nText that slides up and down along a sine wave.\n\n## Other notes\n\nGlenn 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalsh9%2Ffun-with-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwalsh9%2Ffun-with-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalsh9%2Ffun-with-canvas/lists"}