GZ Playground

Web experiments and other fun stuff

Flickering Zeta o’ Lantern Pumpkin


I’ve been working Zeta o’ Lantern art into my #Halloween projects for a long time. This one is featured in War of the Worlds Broadcast. It has a glowing candle-lit effect using a div with a #CSS3 background transition #animation and color changed randomly with #JavaScript.  

Tweet A Game With nano JAMMER


nano JAMMER by @CasualEffects is a fun little toy for game developers. The goal is to write an entire video game using only 280 characters of source code. The language offers a few dozen sprites, 32 color palette, and variables named as greek letters. All designed to keep the character count down. I made some... Read the full article

AR In The Browser


Trying out AR.js, a browser based AR solution that works remarkably well. It uses a trigger image to anchor an #AFrame scene and overlays a phone camera preview. You can get the trigger image here. Either print it or display it on another screen. Then grab a smartphone and head over to ar.greenzeta.com to check... Read the full article

WebVR Invasion!


Doing some #WebVR experimentation with #AFrame. This scene was put together in a few hours using only HTML primitives. Check it out in a Google #Cardboard compatible headset for the full 3D effect. http://ar.greenzeta.com/scene.html

Attack Area 51!

Unity / WebGL

An experiment in pushing the limits of Unity driven WebGL. Rescue your extraterrestrial friends trapped at the infamous Area 51.

Basic Controls


The saucer model attached to the camera. Running through the fly-through again, this time with some really basic controls.

(not so)Rough Saucer

Put together a really rough saucer model. The surface material has smoothness and reflectivity bumped way up to add to the rendering complexity.


Added a fly-through of the terrain to get a rough idea of how well #Unity’s complex shapes perform in #WebGL. Even on my aging Mac Mini it holds up great in #Chrome. The video is a little sluggish only because it was capturing at the same time.

Rachel Nevada


Getting back into #Unity with some hot arcade action. I’m calling this one “Attack Area 51!”. I had the idea years ago with what ultimately became Space Anglers. This time I’m focusing on the base itself and seeing how far I can push #WebGL.

War of the Worlds Broadcast

ES6, HTML5 Audio, CSS Animation

Relive the night of October 30th 1938, when martians were real. Demo site featuring ES6, HTML5 Audio, CSS Animation and Invaders from outer space.

Final QA


Did a final round of #QA for War of the Worlds Broadcast. Lots of minor fixes and tweaks. Adjustments to the layout for really narrow phones in portrait orientation. Almost forgot to install ssl on the site :).

Zeta o’ Lantern

Wanted to give the site an extra #halloween touch. I’ve been working the Zeta o’ Lantern into my blogs for a long time. This one features a glowing candle-lit effect using a div with a #css background transition and color changed randomly with #JavaScript

Missed it by That Much


The Lighthouse scores are pretty good. I got dinged for not having http2 or webp images. And the fact that it’s so media heavy. Not too concerned about that. Overall I’m pretty happy with it.

Offline Support & Manifest

Added all the behind-the-scenes PWA features, web-manifest and service worker. I use workbox to handle the caching strategies. Since the site is static, everything is cached upfront.


TensorFlow.js / Vue.js / CSS3

An experiment in Machine Learning with TensorFlow.js and reactive design with Vue.js. Colony lets you train a colony of ants to survive and thrive in their environment.

Life Energy


In order to help determine success, the ant now has a limited lifespan. A dead ant is marked by a red square. The neural network will be trained to progress outward and locate food to replenish energy.

A Blank Brain


Modified the ant initialization to run off an untrained model. The output values are compared against a random number to allow the ant some variation when the outputs are closer to 0.5. As the model is trained, the randomness begins to disappear.

Classification Model


Changed the TensorFlow model over to a linear classification model taken from my XOR example. The sensory inputs are translated into a bit mask and output as a single action.

Manual Activation


In order to make the page more responsive, the TensorFlow model is no longer trained onLoad. Training takes a few seconds and stalls the UI completely. Training is now triggered by a button. Later, this process will be represented as the birth of a new ant.


ES6, Synaptic.js / CSS Animation / WebAudio

An experiment in machine learning. Swat the fly by swiping toward it. Each generation of fly is trained with the data from the previous. Eventually the fly will learn to evade death.

Finishing Touches


Added some wallpaper to the background and an instructional graphic that illustrates how to swipe. A pre-loader now caches all the image and sound assets before displaying the fly. To finish it off, I added an info button to explain the app, and a GreenZeta badge at the bottom.

Art Improvements


Lots of improvements to the artwork. The new hairy appearance is added to the fly head. When training, the thought bubble is replaced with a blackboard. It now shows which directional data has been added to the training set. I also added a mortarboard to the head, just for fun.



Ported over the WebAudio service I created for Hypertension to run as a stand-alone class. Sound effects courtesy of freesound.org. Couldn’t find an appropriate swatter sound so I created one by combining a woosh and a smack sound.

Fly Macabre


A secondary sprite sheet for MLFly. This one adds the gruesome swatted state of the fly.


Angular / WebAudio / CSS Animation

An experiment in the MEAN stack. Hypertension is a word association game presented in HTML 5 using CSS animation and WebAudio API.

End Screen


Added a tentative game-over screen. Playing around with 3d transforms, not sure exactly where I’m going with the design but the “lifetime” value will be used in the final version.

More Sound


Added some (final?) sound assets to the webaudio service. I was a little concerned that the javascript audio triggers wouldn’t align with the timing of the CSS animation but it seems to be working well.

Heat Map


Playing around with an idea. Red flashes along the edges of the screen when the tension value goes above a threshold.

Putting It Together


Some refactoring of the heartbeat component and bringing it together with the wordfall component.

Zeta Burger


An HTML5 game developed with Unity. Ever wonder why Zetas are so interested in cows? It's because hamburgers are the one universal delicacy. Don your delivery hat and hop in your parent's saucer to start your job in burger delivery.

Splash Sketch


Sketching out possible splash/intro screen artwork. I got the idea of Alpha Zeta driving around in a cartoonishly small ship a while ago. Finally committing it to paper.

Crumple Zone


Added the crumple animation to the ship prefab and tweaked the gravity a bit more. Also turned on rotation on collision so the ball spins around.

Ship Crumple Animation


The final (for now) ship collision animation. Almost ready for export to sprite sheet.

Crumpled Ship


A frame from what will be the ship collision animation. Upon impact, the ship will crumple up like tin foil. This will replace the red ball that’s presently in the demo.


Angular / Ionic / Firebase

A Shopping List App built with the Angular and Ionic frameworks. Listimate uses a powerful algorithm known as "rounding up" to ensure you remain under budget.



Made some UI tweaks. Put the list inside an ion-scroll component to make the total & new item panels fixed to the top. Moved the pin/unpin button to the left side, closer to its icon. Also fixed the list sorting directive that prevented some checked items from moving to the end of the list.

Progressive Web App


Not quite a PWA, but almost. Using the service worker that comes with ionic to trigger the PWA install dialog in mobile Chrome. Offline still isn’t working quite right. It caches the files, aggressively, but still requires an initial connection to start after the install.

New Color Palette


Changed the color palette to match the new icon. Still using the ionic directives for primary and secondary color.

Pinned Items


Added a flag to mark an item as “pinned”. When the checkout function is run, pinned items will be added back to the list with the price value zeroed out.

Zeta Bowling


An experiment in WebGL using Unity3D. Try a game of intergalactic bowling against a decuplet of Zetas.

Ball Selection


In addition to the Earth ball, you can now select Mars, Jupiter or Sol. Weights are 8, 12 and 16 pounds respectively.

Adding Ball Selection


Adding ball selection to Zeta Bowling. bowl.greenzeta.com

Add scoring to UI


Adding scoring to Zeta Bowling. #unity3d #gamedev #screenshotsaturday

Alternative ball type: Sol


Zeta Bowling with a star. #unity3d #webgl #gamedev bowl.grenzeta.com

Xmas Eve Nightmare

Angular / Firebase / Bootstrap

Catastrophe has befallen your family on Christmas Eve. There are no presents under the tree! It seems that Santa (you) forgot all about them. Save Christmas for your family by finding each of them the perfect gift. The kids will wake up in twelve hours so there's no time to waste!

Flux Dev Tools


Adding some #dev tools to Flux to make #testing easier. #Xmas Eve Nightmare: https://buff.ly/2kPul8w #webdev #gamedev #angular #screenshot

Background Image Test


Trying out the background image in context. #Xmas Eve Nightmare https://buff.ly/2kFJ2uQ #screenshotsaturday #gamedev #webdev #css

Creating Background Art

Using a combo of #collage and sketch-filters to crank out background images quickly for #Xmas Eve Nightmare https://buff.ly/2nIauJA #screenshotsaturday #photoshop

Behind The Scenes Prop Edit


#BehindTheScenes #ScreenShot of the “wallet” prop in #Xmas Eve Nightmare. How money is handled in-game: https://buff.ly/2iI0BcY