hexahedria

Daniel Johnson's personal fragment of the web

Posts tagged "canvas"

TIME || ƎMIT: A game for js13k

Story time: So a few years ago, after playing Portal and loving it, and after making my iOS word game Wordchemy, I was kind of in a game-design zone. I brainstormed a ton of ideas: from memory games, to arcade-style games, to physics-based puzzle games, and many more. One idea, however, stuck with me. The basic idea was this: what if you could go backwards in time? Not as in traditional time travel, where you appear in the past, but actually backwards? Everything else would seem to be moving in reverse: things would fall up, people would be walking backwards, and you might even see your (relative) past self undoing your actions!

I ended up never making most of those games, but that time-travel idea stuck. I started designing levels for it, and actually started to build it once, but I never got it to a playable state. But every once and a while, I’d start thinking about it again. I decided that one of these days I was going to make it.

Read more...

Subdivision

This is an experiment I started working on many months ago, but didn’t actually finish until recently. It was based on some doodles I used to make, where I would draw a bunch of lines, continuing each until it intersected with others. It creates a bunch of lines randomly, and then extends them until they intersect, coloring the regions between the lines.

Read more...

Shift Clock

I'm really happy with how this experiment turned out. It's a clock that spells out the time with squares, and then shifts those squares into their new positions whenever the time changes. It draws the time text into a hidden tiny canvas element at each minute, then uses getImageData to extract the individual pixels. Any pixel that has been drawn with an alpha > 0.5 is set as a destination for the next squares animation. The animations themselves are performed using d3.js.

The picture above is of the black-on-white version. There is also a grey-on-black version, if you prefer that color scheme.

Read more...

Whiteboard Drawing Bot – Part 3: Editor

After completing the basic design and software for the whiteboard drawing bot, I decided to make an interactive simulator and shape editor to allow people to generate their own commands. I thought it would be cool to share it as well, in case other people wanted to play with the stroking/filling algorithms or use it to run their own drawing robots or do something else with it entirely.

For the simulator, I wrote a parser to parse the command sequence, and then animated it drawing the command out onto the screen. The parser is written with PEG.js, which I'll be discussing a bit later. The parameters for the generation and rendering are controlled using DAT.gui, and the drawing itself is done using two layered canvases: the bottom one to hold the actual drawing that persists from frame to frame, and the top one to render the arms, which are cleared and redrawn each frame. I separated them because I did not want to have to re-render the entire drawing each time the simulator drew anything new.

Read more...

Refraction

This is an experiment I made recently. It displays the path that light would take when it refracts through variously-shaped objects, color-coded based on the initial angle of emission. In order to do this, it casts a series of rays and uses Snell's law to determine how they refract off of objects. It then iteratively casts more rays between rays that get too far apart or act differently (if one ray hits something and the other hits something else, for instance) to get higher accuracy. The raycasting is performed with JavaScript, and then the light intensity is interpolated between rays in WebGL.

Read more...

Stacked Clock

This is one of my favorite experiments. I had the original idea during a vacation to Hawaii. Basically, I wanted to make a clock where the hands were connected end-to-tip instead of all being connected to the center of the clock, making a sort of time arm (second hand starting where minute hand ended, etc). I made a version of that using Rainmeter on my desktop for a while.

Read more...

Motion Cells

This is an experiment I made a long time ago, inspired by a flocking cellular automaton I saw on Rectangle World. In this experiment, the canvas is divided into a bunch of cells, each of which maintain a vector. Every frame, each cell attempts to make its vector closer to the vectors of its neighbors, and the vectors are “normalized” so that the average length is 1 (some are longer, some are shorter). On top of this, I built 19 different variations, each of which displays the results in a different way.

My first few variations display the actual vectors, either just as lines or by mapping direction to hue and length to brightness. In most of the other variations, the code places particles “on top” of the cells, and they move in the direction that the vectors point. In a few of the variations, I connect the particles to each other and draw lines between them, making a sort of web effect. This was one of the first experiments I made with the HTML5 Canvas, and I like how it looks.

Read more...

© . All rights reserved. | Top