A Bauhaus poster

Just having fun with some plain CSS and HTML.

View it live here.

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.


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. 

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.

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.

https://bohdananderson.com/other/artgallery/

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!

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.

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.

https://flow.bohdananderson.com/

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

https://flow2.bohdananderson.com/

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.