X-ray Animal Friends

I run a company that makes interactive display software, and I've been working on some tutorial videos so that people can learn how to use our content creation tools.

As part of this, I'm designing my own assets and releasing them for free so people have artwork to practice with.

The first tutorial I finished is for a simple effect we call Fog Reveal, where one picture is stacked on another, and moving or touching a screen reveals the image underneath. It's a really popular effect for advertising, but I think it's actually pretty useful for education, too. So I decided to design something aimed at kids, showing animal doctors taking an x-ray.

cute animals xray.jpg

I recorded every stage of the first tutorial, including the making of the graphic itself, and when I started to edit the video, it really drove home that designing an interactive display is a lot more work than most people probably realize. 

X-Ray Animal Friends Timelapse.gif

Now that we've automated a lot of the business development and support tasks at work, I'm looking forward to drawing and animating more, but another thing I noticed while making this tutorial is how out of practice I am.

Here's what the interactive display looked like in the end:

If you're interested in downloading the working files for this project, learning more about Lumo Play, or checking out the full tutorial, here it is:

I'm going to be sketching and finishing more characters over the next month or so, to get back into the habit of drawing and processing my vector art. If you have requests, please let me know.


My first attempt at fan art happened as a result of having inherited a gem collection from my Aunty Jean. Turns out there are a lot of peridots, garnets, a couple amethysts, a bunch of emeralds, some rubies, a bunch of topaz and rhodenite (which I guess is a kind of garnet?) some sapphires, rose quartz, and even an aquamarine.


Anyway, turns out when I try to sketch stuff it automatically turns into animals. So here's Purridot. Maybe I'll do Amyth-Hiss, Garmitts, and Steven.


The reason I tried to draw Peridot at all is that I thought 'Maybe I should make little resin cast Peridot models and put actual Peridots on them.' Because obviously that's what you do when you have a inherited gem collection and you love Steven Universe.


I'd love feedback! Let me know if you wanna see more SU cats, some little gem sculptures, or anything else. :)

The Making of Bereavement Seats

About two months ago, I decided to make a video for a song my son Dylan wrote. This isn't the first time I've wanted to make a video for one of his songs. In the fall of 2014, he wrote a song called Fuck You, Martha Stewart. I don't think I heard it until the following year. When I did, it broke me a little bit. That was a really difficult time for us - Dyl was graduating, and I'd left a long term relationship, moved to L.A., and put our house up for sale. Everything felt like it was dissolving.

 A concept sketch from the storyboard for Fuck You Martha Stewart.

A concept sketch from the storyboard for Fuck You Martha Stewart.

The concept I had for the first video was a sort of fairy tale re-casting of Dyl's entire childhood, from his early years growing up with parents struggling with addiction, to the years leading up to his ultimate independence - a path I've always interpreted through the lens of my own childhood.

I sketched the storyboard while I was living in a small, cantilevered room in a warehouse in L.A., surrounded by career artists working on multi-million dollar projects. This definitely impacted how ambitious my idea was, and the final concept was too complex for me to execute on my own. I didn't (and still don't) have the budget to hire an animation team, but I'd still love to make that video one day.

I've been sitting on the first storyboard for one of Dyl's songs for over 3 years, so I didn't want to end up designing a video concept for yet another song and never getting it finished. Going into this project, my greatest fear was not being able to complete it.

The Final Video

Before I describe the project, here's the final video:

How This Started

 Original board art for Bereavement Seats

Original board art for Bereavement Seats

I first heard Bereavement Seats in the background of another project Dyl was working on, and I asked if I could make a video for it. I hadn't listened to the whole song, so I didn't know what it was about until he sent me the entire recording.

I realized it was about grief, and also that this wasn't going to be a video project I could just phone in. The year Dyl wrote this song, we'd attended multiple funerals. One of them was my Mom's.

The song made me think about how awkward funerals are, and how disconnected I am from my family, and by proxy, how disconnected Dyl might feel. Except for my Mom, we barely knew any of the people who died last year, but we attended their funerals and graves nonetheless.

After listening to the song several dozen times, I created a simple timing reel. At that point, I was assuming the entire video would be animated, so the initial concept was really minimal.

Then I discovered The Heidelberg Project on a road trip to Detroit, which changed the video almost completely. Art is like that sometimes - things that seem incidental at the time can have a huge impact.

 The Heidelberg Project - https://www.heidelberg.org/

The Heidelberg Project - https://www.heidelberg.org/

The Heidelberg Project

I'd planned to illustrate a background based on photos of the graveyard where my Mom is buried, and places around Windsor Ontario, the town where she grew up, so I went on a road trip with friends to visit Windsor. My friend Holly wanted to visit the Heidelberg Project across the river in Detroit, so we spent a morning exploring it. This was when I decided the video should be a combination of film footage and animation.

 The Heidelberg Project https://www.heidelberg.org

The Heidelberg Project https://www.heidelberg.org

The Heidelberg Project describes itself as "an outdoor art environment in the heart of an urban area, and a Detroit based community organization with a mission to improve the lives of people and neighborhoods through art."

Several city blocks are involved in this art installation, which has been evolving and growing for more than two decades. Mountains of found objects represent the grief and hope of a single artist; a man who's watched his neighbourhood change dramatically. His life's work is a shifting monument to a past that needs and deserves to be remembered. Regardless of how people feel about The Heidelberg Project aesthetically, it serves a real function - to commemorate the past, and protect the remaining residents - and it was therefore a beautiful and appropriate backdrop for Dylan's song.

The song speaks clearly of grief, but it also addresses the awkward distance created when you're alone in your experience, and trying to interact normally with the rest of the world. It was the same awkwardness I felt as a tourist, walking through a neighbourhood of found art, populated mostly by ghosts.

Learning New Stuff

The hard work started once I had a bunch of footage and a few rough storyboards, and no idea how to put them together. I needed a plan that I could execute on my own. Frame by frame rotoscope animation wasn't going to work.

I spent a bit of time on Youtube looking for ideas, and found two tutorials that would teach me what I needed to know to make a cohesive video with the resources I had.

To animate the character, I decided to use Adobe's Character Animator.

To composite the character onto the video, I found a simple Adobe After Effects motion tracking tutorial.

weird head.gif

I didn't have an isolated vocal track for the song, so I had to record myself saying the words, and use that recording to do the lip syncing. What's cool about Character Animator is that you can record different parts at different times, and then layer the motion.

Things were a little weird until I figured out how to constrain layers on the z axis, because the face kept morphing in weird, amazing ways.

I was able to do different takes to record the lip syncing, act out the little bobbing dance, and move the arms to make the character play guitar. The way the recording works allows you to combine all your takes, and even blend some takes in if you want to re-record just one small part. It's insanely fun and I spent a ridiculous amount of time just giggling and doing dumb stuff.

 Adobe Character Animator. This is really fun, and everyone should try it.

Adobe Character Animator. This is really fun, and everyone should try it.

When you design a character for Character Animator, you do it on layers in Illustrator or Photoshop (I used Photoshop). This means you can turn layers on and off really easily, so I added a guitar layer, and rendered the character's full animation twice; once with the guitar on and one with the guitar off. This made it really easy to sync the character in After Effects - I just imported both sequences, made a composition with each sequence as a layer, and turned each layer on and off at the right time.

 After Effects - motion tracking is basically just a button. It was a lot easier than I thought.

After Effects - motion tracking is basically just a button. It was a lot easier than I thought.

Dylan's Response

This is our first public project together. Dyl's not a public sorta person, and he doesn't share the things he makes, so I asked him if it was okay first. I did the entire project knowing that he might not be willing to share it, so I was okay with keeping it private, but I really love the song, so I'm glad he's letting me share it.

Here's our text conversation, where we decide everyone should get discount flights when Cher dies.


Final Comments

I should probably mention that because I run an interactive display software company, I have a Creative Cloud account, which includes all the apps I used for this project. I've also been using Adobe design software since I graduated from college in 1997, so I find a lot of the tools pretty intuitive now.

Having said that, I still think this level of work is super easy for a beginner, as long as you have the right tools and the patience to watch a bunch of free tutorials. If you've read this far and you're thinking about making something like this project, please feel free to reach out if you need help!

My First Ludum Dare

Ludum Dare is the original, and also easily the largest, game jam in the world. A game jam is a challenge to make a game from start to finish in a super short time period, usually 48 - 72 hours, depending on the size of your team and the scope of the theme.

In past years, I've participated in Peg Jam, our local game jam, and even hosted a few jams in our office for new students looking for work experience. It's a great way to evaluate a new team's strengths and weaknesses, and it can be a real forcing factor when you're trying to learn new skills really fast.

 Our completed LD game.

Our completed LD game.

Ludum Dare has been happening 3 times a year for the past 16 years, and last weekend's event was the 41st round. Themes are proposed by participants and voted on, and the winning theme is announced as soon as the event starts and your time starts ticking. The theme this time was 'Combine Two Incompatible Genres', which took our team a while to wrap our heads around. Luckily we have a wide breathe of experience, and we each had a clear idea what we wanted to get out of the weekend.

After 72 hours, we'd created a game that the combined random number generation of a card game with the intense concentration of a rhythm game. If you have a few minutes to kill, you can play our game here: https://megrabbit.itch.io/flower-hero

The Process

 This 2D mockup was super useful in communicating the asset requirements, timing, and gameplay structure.

This 2D mockup was super useful in communicating the asset requirements, timing, and gameplay structure.

Making a fairly polished game in 72 hours involves a lot of multitasking and team communication. While Curtis Wachs worked on the actual game development, I created a workable UI and game elements. Alistair Croll created all the music and after being taught to make the scroll generation images (which are what we used to time the assets to the music), he did those too. Liem Nyugen worked across town making the 3D models and animations of the characters I designed for us.

Animated GIF-downsized_large (3).gif

As a team, we all came to this project wanting to learn specific things. Curt and I are releasing Unity support on our own software platform in a few months, so we wanted to practice our workflow on a non-critical project.

Alistair's been wanted to practice with his Push for a while now, and has always wanted to design sound for a game using Ableton. In the end he produced 4 songs and the menu screen loop in 3 days. Liem just loves making 3D art for mini-games and wanted to be part of a Ludum Dare project. Plus he's a superstar and he can whip out amazing 3D animations in his sleep.


My personal takeaways included learning how to:

  • Co-develop a shared Unity comp
  • Export elements as a package
  • Export the project for HTML5
  • Create scriptable objects and prefabs

I'm a pretty huge fan of Ludum Dare. Our game received great feedback, and while we normally wouldn't probably pursue making this game into anything bigger, some of the feedback is actually so good we want to implement it just to see what happens. The community is incredibly supportive. I was worried that the amount of graphic polish we brought to our game would earn us criticism, since an overwhelming majority of Ludum Dare participants are developers, and developer art is absolutely celebrated and encouraged, but this was not the case. The feedback we received was universally considerate and thoughtful.

If you're running a design or game studio, and at least one of your team members can (or would like to learn how to) develop simple games using pretty much any platform (participants in this round received Game Maker Studio for free if they wanted it), you can't really beat Ludum Dare as a positive team building activity.

Learning Unity From a Goat

I've been doing online Unity tutorials for about a month now. Here's a peek at the project I'm currently working on. I drew and animated the goat myself, but the other graphics came from this cool site.

The tutorials I've been following are mainly provided by Brackeys and AbleGamesDev, and they've been super easy to keep up with while travelling. I really hope to someday be able to take a class with other humans, though.

As of this moment, I've learned to make and import sprite sequences, create menus and multiple levels, control players in 2D and 3D (kind of), make stuff break apart when you hit it, and do some stuff with both 2D and 3D physics. I still suck at particles and creating multiple conditions, but I'm working on it.

Here's the first project I did in Unity

I'm really enjoying learning to make games, even though the goat game has already been perfected with Goat Simulator.

I'm thinking I'd like to make a game where this goat confronts a bunch of his issues, like feeling antisocial to an unhealthy degree, comfort eating food that sucks for him, and being insensitive to his friends.

But maybe I'll just make an endless runner with a lot of stuff he can break instead. :)

All-Purpose Girlsplaining PNG

I made this in honour of a groundbreaking study confirming that personal computers were marketed at boys. Duh. We needed a study for that?

Furthermore, I think the world needs an all-purpose girlsplaining png that can easily and conveniently be plastered on all future declarations that have always been completely obvious to 50% of the human race.

In case you need a non-perpetuating version that's more badass, the link below includes the words 'No Shit!?!' instead: