3 Magic Numbers in a Colour Replacement Shader

Posted by aBethke on Sunday Jan 14, 2018 Under Bag o' Tricks, Unity

Recently at work I was developing a shader for doing colour replacement. I wanted to create a palette of five colours and have a shader that would replace colours in a source image, video, model, or work as a post-processing screen effect. After four versions I got the types of results I was hoping for and I wanted to share a breakdown of the technique I was using to do the replacements and note a few interesting things I learned along the way including the mystery of these magic numbers: 0.3, 0.59, 0.11.

High resolution clown image from the movie It

Pennywise from the movie IT, used as a test image for the shader development

The first version of the shader was very simple. It looked at the rgb colour of the current pixel and then tried to match it to the closest matching colour from the pallette. The first really interesting thing I learned while building this version was to think of RGB values like a 3D point. This was significant for me because I previously didn’t have a good way to think of colour values in a way that could be compared but after stumbling on a forum post where someone said to think of the RGB values this way it made it really easy for me to visualize the data. At this point I wrote some shader code to take the current pixel colour and compare the distance to the palette colours and then replace with the closest match. This worked as a basic first approach but there was a lot of detail loss.

A low detail colour replaced version of the Pennywise test image

Five colour replacement shader, version 1

For the second version I tried adding a parameter to the shader called Strength which was used to blend the replacement colour back into the original image. This way I could turn down the blending strength to retain some of the detail. The result was a slight but noticeable improvement but still not good enough for what I was going for.


An improved detail colour replaced version of the Pennywise test image

Five colour replacement shader, version 2

In version three I started taking a different approach after having the idea that if I convert the image to grayscale first there would be a better match for colour replacement, better blending, and ultimately better detail retention on the overall picture. In figuring out how to convert an image to grayscale I found a line of code that had three magic numbers.


float3 greyScaledColour = dot(sampled.rgb, float3(0.3, 0.59, 0.11));


I didn’t understand what this code was doing but it clearly resulted in a grayscale image so I integrated it into my shader. It really bugged me that I was using a piece of code I didn’t understand so I showed it to my team lead at work and we began a discussion and some investigation to find the source of the numbers. After some back and forth my lead had an idea that was quickly verified and while still not fully understanding why this results in a grayscale pixel when using the dot product of the sampled colour against these three magic numbers what we did find is the source of the numbers. These numbers correlate to the number of Red, Green, and Blue rods and cones we have in our eyes. WILD!

Here’s some links to some of the info we read that led to this understanding.


So after converting the image to grayscale and then doing the colour replacement there was a further improvement as I had hoped. If you compare the v3 image to the v2 image it’s hard to notice the difference at first but if you look at the head of Pennywise in v3 you should notice that the colour gradiation resulted in better groupings of colours whereas in v2 there’s a split on the forehead between blue and pink areas that seems unnatural even in this extreme palette.


Third version of the colour replacement shader output.

Five colour replacement shader, version 3

At this point I was pretty happy with the shader but had one more idea that I thought might yield an even better result, which proved to be true. The final technique worked better than the previous versions and gave you a lot of control over how the colour replacements are done. So here’s what I did…


I realized that I could treat the grayscale colour values as a single number in the range of 0 to 1. I could also take the 5 colour palette and treat those values as a range of 0 to 1. Now instead of doing distance checks on the three values I would just be matching the 0 to 1 values between the grayscale and the replacement palette. From there the final step was to add some sliders to the shader so you could control the thresholds for each colour in the palette which gave you much better control of which colours replaced dark and light areas in the image. Once that was all done then the final value was blended as in the previous versions for the end result. I am extremely happy how this shader turned out and am already using modified versions of it in a number of projects.

Final version of the colour replacement shader using the Pennywise test image

Five colour replacement shader, version 4

Tags : | Comments Off on 3 Magic Numbers in a Colour Replacement Shader

I Ruined My Life in the Nicest Way

Posted by aBethke on Tuesday Oct 22, 2013 Under Secret Projects


On august 21st I got engaged to an absolutely wonderful lady that I’ve known for about half of my life at this point. This completed four months of scheming, secrecy and preparation. For my engagement I wanted to do something special and multifaceted and so I set for myself a quest. Herein you will find the tale of my deeds, the trials I faced, the silly things I did to win my love and the details of how I got engaged with a puzzle made inspired by Hellraiser, made from Lego and a speech starting with the perfection quote from Fight Club

For my quest I wanted to create a series of challenges to overcome that were either an extension of myself or my lady. As a martial arts enthusiast and practitioner I’ve always had an appreciation for stealth and secrecy so the first component of my challenge was to keep it on lockdown. Normally for a secret of this nature I’d have a really hard time keeping it but that was the exact requirement I set for myself. For four months I made my other preparations in almost complete secrecy until everything was ready.

For the second requirement I wanted to do something a bit challenging that extended from my passion to design and create things. I also wanted to incorporate something game related since I spend most of my time creating and even occasionally playing games. After some consideration I decided to design and build a puzzle box. As I was doing research on various styles I came upon the idea to build it out of Lego, which at the time seemed like a massive time saver but due to my life as a catastrophe magnet took a bit longer than planned. In the end I spent 34 hours designing and 4 hours building an approximately 1000 piece, 7 step puzzle box. Friend and fellow Bento Miso member Robby Duguay was kind enough to donate a not insignificant amount of his time and talent to video tape and edit the footage of me building the puzzle box.

v1 final box


Longer with commentary

The final piece of my devious scheming was an abstract concept of epicness. I wanted to do something grandiose with a bit of showmanship. I thought I had fulfilled this with the rest of the plan however in hindsight I can see that the universe was only too happy to provide me with some additional challenges which I’ll speak about later. In fact there were several unplanned challenges that came up that on which I will elaborate.

Once everything was in place the plan was to light some candles on the balcony, bring K out there, say my partially prepared speech and then present the puzzle box. This part of the plan actually went as it was supposed to and K was a good sport about figuring out the puzzle box on her own. I have to admit I had gotten a little worried earlier in the day when as I was finishing up the puzzle box Damian asked the question “does she like puzzles” and I was not able to say yes with complete confidence.

The Story of the Ring
The ring I proposed with is a third generation family heirloom which was originally a gift of appreciation given to my great aunt for the extended care she gave to an ailing friend. Before my great aunt died she gave the ring to my grandma. After my dad proposed to my mom, my grandma gave the ring to him to give to my mom as an engagement ring. When my dad and mom got divorced, they put the ring away for safe-keeping for just such an event as my engagement.

We were at the DMG Mother, May I? game jam, taking a lunch break and I casually mentioned to my mom, amongst various other topics, that I was lamenting trying to save up for a ring. Merely noting the desire and saying nothing at the time, my mom returned the final day of the game jam and pulled me into one of the meeting rooms. At the time I thought she simply wanted to discuss the exciting new art direction we were persuing for our game Brother Nature but much to my surprise she produced the ring and offered it to me to give it K. Completely unprepared for such a thing at the time my reaction was something close to “shit just got really real”. With that I began my scheming.

Lego > Canada Post
This is a really long and painful story the short version of which is that Lego DESTROYS the hopes and dreams of Canada Post at least when it comes to taking care of screw ups and customers. Lego shipped my package, Canada Post damaged it, held it without informing me and never once returned any of my phone calls regarding my case for at least 2 weeks before my package finally showed up. In the meantime Lego had reshipped my entire order at no additional cost and threw in a $25 gift certificate just for good measure. When asked what I do if I end up with both orders? They said keep it. That’s class right there. Canada Post i condemn you to the blackest hells of your own customer service and you should learn something from Lego.

Puzzle Box Redesign
So if the whole delivery nightmare hadn’t been stressful enough there were two hiccups during the actual construction of the puzzle box. The first was simply that a small number of pieces weren’t shipped with the order so I was missing some. Luckily I had ordered spare parts of each type and was able to salvage it by replacing some colours and modifying the visual design of the outer shell. The second issue was midway through building the puzzle I realized I had created a set of Lego pieces that didn’t physically work outside of the 3d modelling tool in terms of sliding locks for the overall puzzle. Originally it was a 9 step box but with some adjustments I was able to fix the design at the cost of 2 sliding pieces. All things considered the damage could have been a lot worse.

Puzzle Box v1

Fight Club quote
A moment was the most you could ever expect from perfection. ~Chuck Palahniuk, Fight Club, Chapter 3

Tags : | Comments Off on I Ruined My Life in the Nicest Way

Writing an Artist Statement

Posted by aBethke on Monday Oct 21, 2013 Under Randomness and Ramblings

I recently had to go through the exercise of writing an Artist Statement as part of a funding application I’m working on for a grant. I’ve never had to do this style of writing before and found the whole experience weird and a bit pretentious. Usually Andrew and I lament any time we have to write bios and find the ordeal painful and bizarre in that way that talking about yourself in the third person always can be. Artist statements as I quickly learned are an entirely different sort of beast. Anyways, I slogged through it after putting some thought into my game designs for Seraph and Brother Nature. Here’s what I came up with XD

Brother Nature
This project was a collaboration between myself and my mother and was developed over a weekend at the Mother, May I game jam hosted by the Dames Making Games organization. For this project we wanted to play with themes around creation and life, male vs female and organic vs constructed.

The concept for the game was that Mother Nature has many daughters but a single son. Usually the daughters spread life but Brother asks, ‘Mother, May I?’. Users play as Brother controlling seeds that they must navigate past various obstacles like stars and asteroids to bring rocky barren planets to life.

The art style and presentation of the assets to the user were particularly important in this game as they were the main reinforcement of the themes that we were exploring. The dead planets were presented in a very washed out grey to convey a sense of barrenness and death with revived planets conversely in vibrant colour and patterns.

The story concept for the game was largely taken from the fact that I was making this game with my mother for a game jam event hosted on Mother’s Day weekend and as such it seemed a very natural extension to make a game about Mother Nature and her son. Extending further from that idea we wanted the art style to really reflect the male vs female theme and that our character was the only son of Mother Nature and to that end we designed the revived planets with very inorganic fractal and geometric patterns in mind.

Play Brother Nature

Based on the Experimental Gameplay Project winner “Star Fall”, Seraph is a game about a wish-born falling star soaring across a surreal landscape collecting dreams and avoiding terrible nightmares. As you hurtle through the sky faster and faster, slow down time to help navigate the crowded dreamscape. Keep your falling star burning as long as you can by gathering the blue-tinted Lucid Dreams to strike back and cleanse nightmares.

Seraph was a game with a simple core mechanic that tried to subtly look at themes of life/death, speed vs control and balance. Players start as a brilliant star full of life that quickly drains away if they do nothing. Touching dreams restores life to the star and increases the movement speed while hitting nightmares drains the star and slows it down. The player is presented with a basic problem of live and soar through the landscape at the cost of maneuverability or slow down enough to control your movement but at the same time move ever closer to dying. It was through this core mechanic that the player is forced to try to balance their actions.

The star itself is a metaphor for each of our lives. We start vibrant and pure, full of energy and as we progress through life we slowly drain away while doing what we can to find the balance between joy and adversity and striving to keep living for as long as we can. In life as in Seraph it is inevitably impossible to exist forever no matter how hard we struggle and Seraph tries to hint at this through its gameplay.

iOS – App Store
YouTube Trailer:

Tags : | Comments Off on Writing an Artist Statement


Posted by aBethke on Wednesday Nov 16, 2011 Under Game Development

Reposted from www.goldengeargames.com

Seraph for iPad on the app store
Seraph for iPhone on the app store

Seraph is a game about a wish-born falling star in search of dreams to stay alive while avoiding Nightmares. Players control the star using a virtual DPAD or tilt based controls and have the power to slow time and cleanse most nightmares.

The game features four types of Nightmares to avoid while you soar ever faster through the night sky collecting Dreams. Golden Dreams will restore you to full health while Blue Dreams empower the star with spears to cleanse most Nightmares. Trade life for the power to slow time and survive for as long as possible.

Seraph is based on our flash game Starfall which was originally developed for the Experimental Gameplay Project’s 2010 May HIGH VELOCITY competition.


Tags : | Comments Off on Seraph

Dirty Dancing

Posted by aBethke on Wednesday Nov 16, 2011 Under Game Development

Reposted from www.goldengeargames.com

Dirty Dancing was the second game that we worked on for Social Game Universe and was a partnership between SGU and Lionsgate.

Originally Alex was supposed to handle the client team lead position but it was later decided to put Andrew in charge for this game while Alex focused on post-launch Grow-Ops updates. We both contributed to the core design of the game, but on the coding side of things Andrew did the real work of the project by developing the Isometric engine on which the game runs, while Alex focused on other systems like Inventory, Sound Management and top/bottom bar UIs.

Dirty Dancing on Facebook: Play it now

Tags : | Comments Off on Dirty Dancing


Posted by aBethke on Wednesday Nov 16, 2011 Under Game Development

Reposted from www.goldengeargames.com

Grow-Ops was a game developed by Social Game Universe in partnership with Fremantle Media for the Facebook platform. Alex was hired (contract) to lead the development for this project but his role quickly expanded to include project management and completion of the game design.

Grow-Ops is a farming style game with combat/strategy elements that allowed you to sneak onto your friends’ yards and attack their plants. It was designed to appeal to a niche market culture of teenage to young adults; basically, the type of game that the ‘Adult Swim’ crowd would enjoy. The game focus was on beautifying your own yard by decorating and planting pretty combo crops while setting up defenses and then venturing out into the world to unleash attacks on friends and strangers, clearing their plants and replacing them with your noxious cash crops.

Grow-Ops: Play it now

Tags : | Comments Off on Grow-Ops

TIFF Nexus Peripherals Initiative

Posted by aBethke on Thursday Nov 3, 2011 Under Game Development

Peripherals Initiative
Digifest event page

This was a short event after a lot of work to get us to the goal. The idea behind it was to mesh game development and hardware hacking to create unique alternative peripheral devices for gaming. There was a a flight sim you pilot with your eye, a laser trip wire maze you could physically navigate, a space shooter style game with overly complex controls (by design) and my project Button Masher. My partner on this initiative, Vlad Cazan, did a great write-up on the hardware side of things so I’ll focus a bit on the games.

By the end of the project we had planned to demo 4 games: 3 two player games and 1 one player game. When it came time to integrate the two devices to my laptop and the game logic we ran into some communication issues. We scrambled to try to resolve the issues before the show but could not. Fearing having only one game to demo I stayed up most of the night coding a new 2-player on a single device turn-based strategy game (think Othello) to try to salvage the experience. Overall people were really excited about all the projects.

Our mention on the Arduino website

We prepared this extended presentation to explain a bit more about the idea behind Button Masher and how the games work.

Additional Media

Tags : | Comments Off on TIFF Nexus Peripherals Initiative

Social Game Universe: Dirty Dancing & Grow-Ops

Posted by aBethke on Wednesday Sep 21, 2011 Under Game Development

Reposted by www.goldengeargames.com

Social Game Universe (aka SGU) is a Toronto based social game/media company. From July 2010 until about August 2011, first myself and then Andrew were contracted to help SGU develop and release two Facebook games, Dirty Dancing and Grow-Ops. We were introduced to the CEO of SGU via our good friend Miguel (Spooky Squid Games) and subsequently got to work with him on both of the SGU projects.

Dirty Dancing

The second, and likely to be vastly more successful, game that we helped SGU develop was the recently launched Dirty Dancing. For me, this was a project that Andrew really kicked butt on as he single-handedly designed and implemented the entire isometric engine that the game utilizes. Andrew and I both played key roles throughout the course of this project starting with the high level design down to the technical implementation. Andrew led the client team implementation while I was mostly focused on Grow-Ops, Read More

Tags : | Comments Off on Social Game Universe: Dirty Dancing & Grow-Ops

Demo Reel

Posted by aBethke on Sunday Aug 7, 2011 Under Game Development

Reposted from www.goldengeargames.com

Hey All!

Andrew and I have been busy working on various projects that we aren’t quite ready to talk about but I ended up putting together this little demo reel the other day and figured I’d share it.

Also, if you’re looking for more ways to keep track of us don’t forget about Twitter and the Facebook.

Twitter: @GoldenGearGames http://twitter.com/#!/GoldenGearGames
YouTube Channel: http://www.youtube.com/goldengeargames
Facebook Group: http://www.facebook.com/group.php?gid=124177884286441

Tags : | Comments Off on Demo Reel

Leaping Luchadores

Posted by aBethke on Tuesday May 31, 2011 Under Game Development, Releases

Reposted from www.goldengeargames.com

Wrestling has been banned in Mexico and upon hearing the news the Luchadores have gone mad with grief. No longer able to accept a world where their beloved wrestling is outlawed the grief stricken Luchadores have gone running for the cliffs to end their suffering. Little do they know that their plight has been witnessed by none other than El Christo himself. Filled with compassion, El Chisto personally steps in to save the poor Luchadores from damnation by using his love and super saviour powers to save as many Leaping Luchadores as he can.

This was the premise for Leaping Luchadores, one of the Golden Gear projects that we completed in 2010. Originally this was supposed to be a very small scale game partially to compare small project releases on portal sites against larger project releases. I wanted to get a sense of the time investment per project in terms of potential pay off from the portal sites and various related revenue generation streams. A bunch of the top portal games (and by extension portal revenue earners) turned out to be much smaller scaled games in comparison to some of the projects I had slated for development. Aside from that project level goal, the idea here was to make a small zany, if not outright insane, game that would be very easy for users to pick up and play while offering a bit of depth to keep them hooked longer.

One of the interesting things to mention with this game is that we couldnt get sponsorship. Now, I wanna take a moment and really stress this point. Not only did we not get sponsorship we couldnt even get a response out of potential sponsors at all. No rejection, no conditional sponsorship, not a single peep. Ultimately I ended up attributing this to the content: Jesus. Sponsors were probably too freaked out about the religious content to take a chance on this project which for me was very disappointing. Its one thing to be told your game isnt good enough or needs more polish, its another thing altogether to get complete radio silence from companies whose primary focus is knowing and monetizing this market.

We’ll chop limbs off, replay ww2 over and over again, but jesus love is offensive” – Tyler Moore

I thnk the thing that Seamus (aka the artist) and I found most baffling about this lack of response was that we had revised the game multiple times based on play testing it at various public events throughout the summer. From our analysis users seemed to really enjoy the game concept and got a huge laugh out of all the crazy super saviour powers. On top of play testing I had also taken the forethought to send the game out to some of my most hardcore religious friends for sensitivity testing in relation to the religious content.

Almost a year after the initial development has completed we are happy with the small game we made and get lots of enjoyment showing it to crowds at various conventions but sadly this project looks like that it will not yield revenue. The game is playable on Kongregate, Newgrounds, Mochi and our own site.

Play Now – http://www.goldengeargames.com/games/leapingluchadores/

Tags : | Comments Off on Leaping Luchadores