Category Archives: hype

CreateinTO – HYPE Framework in Processing


When the organizers of CreateinTO announced they were going to do an evening on Processing and put the call out for speakers, I was approached to declare interest in presenting. I don’t present much anymore and the thought terrified me, but what the hell, right?

Processing + Hype

For those of you unfamiliar with it, Processing is a fantastic Java-based IDE for writing some beautiful work.

Hype is a design and animation framework initially written for Flash by Branden Hall and Joshua Davis.

It has since been ported by Joshua into Processing with the help of James Cruz of Code and Theory.


Enough preamble. I volunteered to do a talk about getting started with Hype in Processing. The funny thing is, on the way to the venue, I decided to not do that. I would provide an introduction to Hype but that Joshua himself does such an amazing job getting you started with his SkillShare that I saw no point in replicating his effort. It is, all things considered, better to learn from the creator than from someone who did what their recommending; namely take the SkillShare. The other point is that it’s $20. If you use this link, you can actually save $10! So you can get access to the tutorials, source files, additional resources for $10?! So now you can see why I just said, “Honestly, there’s no point in me doing this. Go here.”


So there you go, why not do an introduction to Hype? Because an introduction exists and it’s worth every minute.

My 2010 In Review

2010 was a strange year for me.

Unintentionally I did less client work than I should have. When I started working on a portfolio, I had to wonder how I managed to pay my mortgage with how little work I did. Heck, I even griped about not working in April. You know that feeling that maybe it’s you? Yeah…

Moviesinhaiku – Watches, Prints, You know…
On the other side of things my self-directed personal project, Moviesinhaiku, started taking off. I was given some interesting opportunities involving my love of movies and haiku.

Firstly, Scott Wilk invited me to design a watch! That’s pretty much the coolest thing ever. I cannot wait for it to be finished. And I think we’ll continue the collaboration as I enjoy designing watches. I can’t vouch for Scott, but I am totally into it. And if anyone else wants me to design a timepiece, hellz ya is all I can say to that.

The casing from render to silver casting

The face from render to silver casting

I’ve been working on the second watch for a little while now. Very excited about that.

Secondly, Dana Brunetti from Trigger Street asked me to design a larger version of one of my prints and I opted for doing a brand-new triptych of their latest production, The Social Network. My first commission, as it were. Very exciting! Anyone wants a custom Moviesinhaiku original, let me know, I am down.

The Social Network tripych

Public Speaking
I was also truly lucky to speak 3 times this year at events. The Flashbelt conference, Flashonthebeach and FiTC Edmonton. I wrote about them individually before, so let’s just say I really love public speaking and my intended session for 2011 ought to be awesome. So far my only confirmed speaking engagement is for FiTC Toronto. This should be an amazing conference and I am truly excited about it. Any other conference organizers want me to speak at their events, let me know, I simultaneously love and hate public speaking, but I am getting a knack for it.

The Future
What’s on the horizon for 2011? Man, I know one thing, I am going to be working on a documentary film I am calling Influential – The Age of Digital. I blogged recently on how to create a wordmark and that was meant as a teaser to this project. Stay tuned, I am crazy excited about this project.

My upcoming documentary film project

If you know something about the film industry, man I can use some help. So far, I am stoked to know that the fine folk at Influxis will be involved and potentially FiTC. I don’t want to speak out of turn, so I’ll leave it there. Anyone want to throw money into a totally interesting project for a production credit, you need to let me know. Or however that works. I am hoping to find out soon.

Finally, I quit smoking. Feel really good about that.

The Social Network Moviesinhaiku

A little while ago, I’d done a regular-sized print of the Trigger Street production 21. The producer, Dana Brunetti, wanted to know if I’d be into making a larger version. While I’m all for copying myself, I thought maybe he might like one done for the release of their latest film, The Social Network. Fortunately for me, Dana’s a really great guy and his response was “Go for it.”

After watching the movie (worth seeing, btw), I sat down to think about what I really wanted to make.I’ve never done a large format print. The more I looked into large format printmaking, the more I realized my skills weren’t up to the task. But I do know a thing or two about digital work.

Once I decided I’d pursue a digital route I started thinking about what, visually, I wanted. I looked at some production shots of the movie on the site and thought, “That would make a good background.” or “That’s an interesting composition.” Then I listened intently to the soundtrack by Trent Reznor and Atticus Finch. Then looking at both a picture of Jesse Eisenberg and listening to one track (On We March), then glancing over at the IMDB cast list, a light bulb went off.

Immediately I started considering HYPE, the framework developed by two good friends of mine, Joshua Davis and Branden Hall. I made a list what I wanted to do and checked off the list what HYPE could do easily versus what I could easily.

ME. Create some XML files with main cast list, secondary cast list and main production
ME. Load XML, parse it into an array
HYPE. Attach a bitmap as a source for pixel data using PixelColorist
HYPE. Create a BitmapCanvas 4 times the size of my original.
HYPE. Load and start an MP3
HYPE. Start a loop/rhythm to do something
ME. Pick a random position on the x-axis
ME. Pick a position on the y-axis based on the song’s position
HYPE. Use SoundAnalyzer.getOctave to tell me how big to make my text in that x-position
HYPE. Use PixelColorist to tell me what colour to make that text in the bitmap.
HYPE. Copy that text into the huge BitmapCanvas
ME. When the song is finished, stop everything.
HYPE. Encode the BitmapCanvas into a targa format.
HYPE. Save the encoded BitmapCanvas targa file.

Look at that list. A 2:1 ratio of what I didn’t need to figure out because HYPE was there. When we get into discussion about patterns and frameworks, we get caught up on deviation. If you use MVC, that’s all you can use, for instance. I argue that you can use what you want, I’ve always believed that. HYPE, in case it escaped your notice, is built for exactly that kind of mentality. All I wanted was a few classes. But without those classes, I would have been stuck trying to build this from scratch.

Suffice it to say, I finished the prints. Thanks to some added help from the inimitable Branden Hall the images saved out HUGE just fine.

Title: Zuckerberg
Line 1: From geek to elite.
Audio: On We March
Text Content: Primary cast
Source Image: Jesse Eisenberg head

Title: Robe Walk
Line 2: Friends counted, friends discounted.
Audio: In Motion
Text Content: Full cast
Source Image: Eisenberg walking in robe

Title: Fingers Drum
Line 3: When percent matters.
Audio: Carbon Prevails
Text Content: Production credits
Source Image: Hands under table

Due to the fact that this is a commission only four copies were printed. Thank you so much, Dana, for the opportunity. I hope you love your prints!

Particle by GalaxyGoo

Near the end of 2009 I was asked to participate in the GalaxyGoo flash-a-thon themed “Particle”. I had just begun experimenting with an Orbit class and Hype and felt like I had a little something to contribute.

Kristin Henry, the founder of GalaxyGoo, brought several copies of the printed book to Flashbelt. I am so stoked to see my work in print!

Thanks again to Kristin for the opportunity! The book can be purchased here

The Hype Over Hype

I attended Joshua Davis’ Hype Workshop last month at the RMI space in Toronto.

I had a hard time figuring applicability in my daily work life.

So I sat on Hype, undecided what I could do with it. What I missed in Josh’s workshop was the fact that Hype is simply a collection of classes. Use what you want and ignore what you don’t. Hopefully, I’m not the only one with that misconception. If I am, I’m dumber than I thought.

Yesterday I had some downtime as I wait on my friend to get to .NET changes for TattooCapture and decided to manufacture something I’ve always wanted: A class to plot points equally around 360°. Why? Well… that will become clear in the future. In the meantime, that was my goal. Feed it 8 points and it comes back with how many degrees each would be to be equally dispersed around a circle.

It was a pretty simple solution; divide the number of elements by 360. Tada! Then use that degree number within the class to return what degree an element would be. Further, use it to return what radian (what flash uses to calculate degrees) that element would be.

I ended up with the Orbit class right-click and ‘save as’. Usage boils down to importing the class and an instantiation. Then using it’s public functions. Therefore;

import com.orbit.Orbit;

var orbit:Orbit = new Orbit;
orbit.increment = 15; //15 being the total number of elements
var degree:Number = orbit.getDegree(8); //8 being the 8th element
var radian:Number = orbit.getRadians(degree);
//returns the radian value for the 8th element out of 15;

//alternatively, you can piggyback the calculations
var radian:Number = orbit.getRadians(orbit.getDegree(8));

So yeah.

Here’s the first example. Each time you click the start button, the piece will pick a random number of elements, then run through that number and each element on stage in it’s prescribed location. Sweet.

So once I figured that out, I started monkeying around with it, as is my wont. Change the number to see the progress.

In comes Hype.

Eventually, in version 4, I decided to muck about a bit with Hype. I wanted to draw to Bitmap was being done and with Hype, I had a built-in class to do just that. BitmapCanvas. Worked like a charm.

Messed around for another couple of versions and in version 8, added in FilterRhythm and TimeType. So far so good.

In version 10, I added in colorPool. Honestly, it all starts to get a bit silly and really I’m just messing around with minor alterations.

In version 13, I dumped my Event.ENTER_FRAME for SimpleRhythm.

Finally, with some more tweaks, I have this (basically) where I want it. Version 19. I might spend some more time with it, but it’s in a place I like. I left it running while I wrote this post and this is what I got.

click the image to see it full-size

The moral of the story is; If you keep your eyes closed, you won’t see the path in front of you. How’s that for a fortune cookie? I oughta be a writer.