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
Auto Complete
Following a tutorial for GPT 2 I created a client side autocomplete tool.
Check it out https://hank.bohdananderson.com/ 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 receipt.bohdananderson.com.
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 bohdananderson.com/other/ml/um
Dither an image
Inspired by solar.lowtechmagazine.com 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 dither.bohdananderson.com!
SLAM js DEMO
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).
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.
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.
A Bauhaus poster
Just having fun with some plain CSS and HTML.
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.
Shader
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.
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.
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
YUHU2
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.
https://yuhu.bohdananderson.com/
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.
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
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.
Video Test
How do videos & audio autoplay, due to the volume of media this might crash your browser/device
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.
https://flow.bohdananderson.com/
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.