Rift Enabled Canvas Demo
I ported my canvas tunnel demo to the Oculus Rift using oculus-bridge and a CSS shader warp. It renders a canvas per eye and keeps the canvas small enough to work within Chrome's filter limits.
Tagged Articles
canvas
33 articles
Simple 2d Terrain With Midpoint Displacement
A practical walkthrough of midpoint displacement (Diamond Square) for 2D canvas terrain. It explains the iterations, how roughness changes the look, and includes a JS implementation with notes on wrapping and scrolling.
Burn Away Effect Explanation
A simple burn-away effect using pixel "fuel". I build a 2D grid of burn values, decrement neighbors as pixels burn out, and use step-based flags to keep the spread controlled, with an optional flame coloring pass..
Working on a new JS game
A progress post on Grapple Hero, an HTML5 canvas game where the only movement is grappling. It includes screenshots, a playable demo build, and what I planned to do next.
Recreating gifs for the jsBin Compo
I recreated a handful of math-y GIFs for the JSBin birthday competition and wrote up the results with demos. This covers a wavy pattern, a crosshatch switch, a P-wave/compression wave, and a "rough seas" variant.
3d Shading with Points
Recreating a shaded-sphere effect using nothing but points on canvas. I break down the math (row width via Pythagoras), how the random threshold creates shading, and how a single divisor changes the look.
Atari Rom Reader, and color picker
A small tool that reads Atari 7800 ROM data and renders graphics to canvas so I can browse sprites without taking screenshots. It covers 160A mode bit pairs, why the data reads "upside down", and a couple implementation notes.
Creating a canvas platformer tutorial part two
Part two of my canvas platformer series. I add world geometry, detect and resolve collisions by direction, and introduce grounded and jumping state so movement feels right.
Creating a canvas platformer tutorial part one
Part one of my canvas platformer series. I set up a player, build a requestAnimationFrame loop, track keyboard input, add friction and gravity, and implement a basic jump.
Super Simple Wave Simulators
Two wave sims I put together after going down a water-effects rabbit hole: one in JavaScript + canvas, and one that does it with just HTML/CSS. Both have embedded demos (and CodePen links) and were picked / featured on codepen.
