Video magnification

Original article that I used for reference

My attempt - I couldn't figure out the way they were doing the FFT

I'm going to come back to this once I learn more

ML course

link to video series

Following the videos, I created my own implementation of topics that were brought up.

Eliza - a regex text box

Backtrace -  Levenshtein distance

Sentiment - used to figure out who you write like by looking at the relationship of the words being typed

N-gram - demo of just an n-gram

Auto Complete

Following a tutorial for GPT 2 I created a client side autocomplete tool.

Check it out beware that it's 50mb so it may take a few moments to load. Also mobile isn't well supported yet.

Receipt Parser

A client-side-only, implementation of parsing receipts.

Using Tensorflow, OpenCV, and Tesseract.

Not too useful right now, but a neat proof of concept.

Check it out at

Text Alignment

Working on a project a few years ago we ran accross and issue of the top to the text not aligning with the top of the image.

I found a solution that uses negative margin with a before tag. I thought this was a neat quark of the way text is rendered in HTML.

Check it out on my codePen here

Um Detection

Using teachable machine again to make a model that, um, detects when you say UM - it's probably overly trained on my voice, but um, I guess it doesn't really matter becuase, um, it's just for fun, ummmm.

View it

Dither an image

Inspired by a site that is hosted by a PI  + solar pannels. It's important for them to be effieict with the content of the stie so they compress the images with dithering and creates a really unique image. So I copied it and made it into a stand alone function. 

View it!


A simple SLAM engine is used to drive the user through 3D space. Lots of interesting options to build on this. This is best viewed on a phone (because it's using the camera to move in the 3d space).

Check it out

Large Captions

Trying out Nuxt and Tailwind, I created a quick project that shows the captions as a list next to the youtube video. Clicking on the text brings you to the point in the video the words were said. 

Used an AWS lambda function to return the captions from youtube.

Check it out

Testing Video inputs

Test your video input with this small camera site. My webcam sometimes doesn't work so I've been using this site a bunch to help debug the issue.

Check it out

A Bauhaus poster

Just having fun with some plain CSS and HTML.

Poster 1 - 1923

Poster 2 - 1919

Poster 3 - 1923

AR Example

A demo of how accurate AR can be, and what the capabilities are for the native AR viewer.

View it here or use the QR code with your phone.

Seamless Texture

Using someone else's texture for the shader I wanted to be able to easily generate my own.
Using Processing(Java) I created a tool to create seamless textures.

You can download it here for window, and Linux.

For Linux - you'll need Java 8, for window's it's zipped with it.


Figuring out how shaders work.
Starting from the Three js' phong shader I added the sketching technique to the rendering.

Referenced this for a unity shader, basically rewrote it but used the material + technique for reference. 

View my shader here.

Working with Light

Digging into how light works in Three js and how Three js and Vue could work together. 

I was playing with different lighting setups under the setups folder in dat.gui. these refer to a photography guide I was looking at. 

View it here - The lighting I choose was not based on performance but on photorealism, performance may suffer.

3D object ArtGallery

Playing with scrolling + looking at artwork as you go through the 3d experience, this still needs to be built out.

Learning some more about UV mapping and baking of materials.

Static Site Generator

A friend who knew a little bit about web dev was looking for a tool that could make their static site easier to update - looking at what's out there it was on the extremes of too simple or too complex, I was looking for a middle ground - using a templating engine + JSON + structured folders I created a tool to match theirs needs. 
This is still a WIP but will be updated over time. 

Road map includes
 * Add search to static sites - added!

 * Compress & resize images - added!

 * Quick deploy to S3 - added!

 * Updated interface - added!

 * JSON editor / Date types

 * Generate template button (start new project)

Web Things Business Need

Is a little WIP project where I'm collecting small tools I've been needing for projects into a single webapp. Wanted to get better with Vue/Nuxt and this was a great way to do it. It communicates with a Django backend.

Also, was a great way to test out a few frontend CSS/HTML frameworks.

Create self-signed certificates 

Was wanting to explore the certification process more and get a better understanding of the process. It's a project that isn't really needed but has some neat features in it. Made it in an evening.

Get yours now!

Face Tracking causes Forced Perspective 

Saw a demo that someone had created with tracking an image box with perspective. I wanted to recreate with the web. I should still tweak the amount of movement to get the proper parallax.
This requires the webcam to be enabled - uses a lib for face tracking + Aframe for 3d

Track yourself!


My building's booking system was slow and hard to use, I took a look at their API and created a simpler interface that allowed us to book with greater ease. During COVID when the building amenities opened it was nice to be able to book things quickly and easily.

Without a YUHU login, there isn't much to see but if you do have one.

ML to detect dog bark

A company came to us asking if we could make a joke site that translates dog barks to expressions. The limitation was that they wanted to actually detect if it was a bark or not.
Not wanting to use server-side ML to detect barking I used Google's teachable machine to generate a model to detect barks. Worked out quite well.

Check it!!

Web Unity 

I was trying to figure out Unities current capabilities with exporting for web.  Using a premade scene I exported it, this it the outcome.

Work is done at Array of Stars  with Mike Dopsa

Preview it!!

Contrast Game 

A proof of concept, playing with what you can do with a webcam in order to control an experience.  
The idea was if you're looking out the window of a car try to keep the ball in the middle of the screen. 

Click and drag to change the contrast.

Checkout out.

Video Test 

How do videos & audio autoplay, due to the volume of media this might crash your browser/device

View it - watch out it's loud

flow demo

I applied to flow, hoping to impress I created a randomly generating flow water pattern. Unfortunately/fortunately I didn't really match what they were looking for :( and got an amazing job at Array of Stars instead.

Came back to this example when learning shaders, way more efficient comapired P5.js

King City Radar

Looking into how PWA's work I created a quick and dirty weather app that shows the radar data for souther Ontario (the King City Radar station).  The Canada weather page was also quite bulky, my objective was to also make this as light of a page as possible.