Over 15 years of cutting edge web development
JavaScript, CSS, PHP, ASP.net
SOCi Social Health Check
Lead generating web app for social media promotion company SOCi.
The West Story
WebGL and Service Worker enhancements to a custom web-based slideshow app built with React.
The 10 Minute Progressive Web App
There are many frameworks and services that promise to turn your site into a Progressive Web App (PWA) easily. In practice, it’s really quite simple to do yourself. This article will walk you through the process of setting up a PWA so you can see how easily it can be applied to any website. Google’s... Read the full article
GZ Playground
HTML5 Game Development with Phaser
2019-09-16
From my #presentation to the Fredericksburg Developer Group: HTML5 Game Development with Phaser. If you couldn’t make it, check out the slides below. And the source for the game Zeta Bros. is on Github.
GZ Playground
Web experiments and other fun stuff
Web experiments and other fun stuff
Skippy Art
An HTML5 canvas app that simulates drawing in Skippy® peanut butter with your finger.
Theraflu Thermoscanner
Angular PWA featuring HTML5 canvas image manipulation from a thermal camera feed.
92Y VR Experience
An immersive Web VR video showcasing the future of 92Y.
ARcostume: A Progressive Web App
ARcostume isn’t unique in placing AR widgets over your body. But it moves the starting point of Augmented Reality from an app, to something physical you wear. It’s something you can talk about immediately and show people with just one instruction: “Scan the QR code”.
Fly Eye
Camera Integration
2019-09-11
Set up a simple camera selection and hooked it up to the <video> element with getUserMedia(). It’s still a little low resolution but walking around you can see the changes in color as expected.
Fly Eye
Video Test
Trying a video stream as the image source and it’s working perfectly. Wiring this up to a camera at this point is trivial!
ConEdison DSM
WordPress site featuring interactive virtual tour of an energy efficient building, custom data types and SalesForce integration.
Ivanka Trump Storefront
Website and ecommerce solution for the Ivanka Trump brand.
Estée Lauder Breast Cancer Awareness
Custom WordPress site built for the Estée Lauder Companies’ Breast Cancer Awareness Campaign 2017.
Create A Neural Network With TensorFlow.js
TensorFlow.js is an extremely powerful machine learning framework. But its demonstration apps can be a little intimidating for newcomers. I wanted to make a straightforward example of a model that demonstrates the basics of TensorFlow.js. In this article walks through a simple classification model which solves for XOR.
Fly Eye
Color Averaging
As the image data reaches out to the edges, the #WebGL sphere still retains the same number of facets for each iteration of the spiral. So each iteration is averaged out to produce the same number of pixels. Right now the image is flipped and rotated slightly but it’s very close to the result I... Read the full article
Fly Eye
Spiral Map
Taking another stab at the sphere map. I swapped out the test image for one that’s easier to follow pixel by pixel. This time the script assumes a 17px square image. It reorders the image pixel data by starting in the center and spiraling out.
Jo Malone English Oak Experience
Custom website built for the Jo Malone English Oak product launch.
Sherwin-Williams Donate Your Color
A Chrome browser extension developed for the Sherwin-Williams Donate Your Color campaign.
Hulu – Come TV With US
HTML5 banner ad campaign for Hulu trade advertising.
nod.js
Google’s Cardboard viewer standard has no standard control scheme. This is what led me to write nod.js, a simple gesture based event system for Google Cardboard enabled web apps. It uses device accelerometers to detect a sharp motion in one of four directions: up, down, left and right. With nod.js you can implement actions such as next, previous, confirm and cancel without the need for an external controller.
Fly Eye
First Attempt
The 3D approach is becoming more complicated than I anticipated. Applying a direct pixel map of the center portion of the image distorts it unrecognizably. It appears as though the sphere polygons are referenced in a spiral pattern starting at the north pole all the way around and down to the south.
Fly Eye
Color Sphere
Manual colorization of a #WebGL sphere in three.js. Originally, I was going to make a 2D canvas app that averaged out camera input into a mosaic of hexagons. The 3D environment adds a level of technical complexity but it also has the potential to add spherical distortion effects and possibly some subtle animation.
Zeta Bros.
Complete Game Demo
2019-08-30
Got the #Phaser game all buttoned up for the presentation. Added character selection to the main screen, some extra sound effects and more tweaks to the animation. Follow the links to take it out for a spin and then take a look through the #JavaScript on GitHub.
Estée Lauder Breast Cancer Awareness
Custom WordPress site built for the Estée Lauder Companies’ Breast Cancer Awareness Campaign 2016.
Converse Counter Climate Banners
HTML5 banner ads for Converse “Counter Climate” campaign.
Gazprom Presentation Builder
Web based CMS for multi-media presentations on iPad and AppleTV
