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!
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).
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.
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.
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.
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)
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.
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.
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
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.
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.
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.
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
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.