this is colby
colby enjoys exploring the endless potential of the world wide web
programming
colby has been programming off and on for most of his life. he started with writing BASIC on his vtech toy laptop as a kid. growing up, he spent a lot of time in game editors extending his favorite games, then eventually moved on to coding in engines like unity and unreal now he spends most of his time developing for the web, while occasionally participating in game jams. colby has experience in a variety of languages and frameworks, but does most of his best work using React and NestJS to build full-stack applications. he is proficient with AWS and many of its services
recent projects
about this site
this site was developed with NextJS and React. its main purpose is to show off some of the cool things colby is doing, including his projects portfolio you can check out this site's source code here if you're interested.
color theme
those in the audience who grew up with a certain handheld gaming device might recognize the selection of color schemes available on this site. the new, color version of the device was backwards compatible with the 4-tone greyscale version that came before it. there was no data in the older games that would allow the newer version to colorize the older sprites, but you could select a color theme that would replace the old shading with a new palette. Some of those palettes could be quite offensive on the eyes, too. So if you don't appreciate the themes, it's not my fault. Blame Nint— I mean, blame the company that shall not be named here.
dithering effect
Another feature — of the same device — that I wanted to implement, was image dithering. Image dithering is when, while constrained to a limited pallete of colors, the illusion of another color or shade can be created, by staggering pixels of different colors next to each other, in various patterns. It's similar to dot-drawing, where you can create all shades of grey, with nothing but black dots. Lots of black dots bunched together form a dark area, while spacing them out further apart makes a lighter color. Sprites in early games used this effect to create the illusion of shading, even when the hardware was limited to as few as 4 tones.
Throughout this site, all the images go through a preprocessing algorithm that first blurs them slightly, and flattens them into greyscale:
Then bands the image into distinct shades:
Then colors those shades based on the current theme:
And finally 'dithers' regions that were close to the edge of their band — the areas of the image that were close to being another shade, if they had been just slightly lighter or darker — with a simple checkerboard pattern:
(Some of the steps of the algorithm actually happen simultaneously for performance's sake, but this is the main idea.) This mimics the sprites of early video games quite nicely, if I do say so myself. The best part is, the algorithm runs in real time, so even images pulled from outside APIs (like in the Projects section) are converted on-the-fly.