16BPP.net
 
Some Of My Early Animations

Animation is one of my loves.  Back when I was a second and third year university student, I had the oppourtunity to take some animation classes.  They were more focused on things like The Principles of Animation instead of general film making.  Back then I did upload two of my assignments that I was really proud of, but three years later, I've kind of summed up the courage to upload the majority of my work from those few classes.  I'd like to share them with you; they are all below:


A Ball in a Box (Intro. to Animation Final) from Benjamin N. Summerton on Vimeo.

For RIT's "Intro. To Animation," course, there was a final assignment to show the instructor what we have learned. So I decided to make this little half a minute short called "A Ball in a Box."

I know there are quite a few sound syncing issues, I do apologize.


Dynamics of Musicality Assignment from Benjamin N. Summerton on Vimeo.

For week 3 (?) of RIT's "Intro. to Animation," course, we had to create an animation that would sync up to the playing music.


Bowling Ball Bounce (Assignment) from Benjamin N. Summerton on Vimeo.

A pencil test for an animation assignment I did a while back at RIT's SoFA. We had to do a ball bounce, but with a very heavy bowling ball. I think I got the weight of it pretty good.


Perspective Ball Bounce (Assignment) from Benjamin N. Summerton on Vimeo.

A pencil test for an animation assignment I did a while back at RIT's SoFA. We had to do a ball bounce in perspective. I decided to have a little extra fun with it and pretend there were some obstacles making it bounce a little differently,


Water Balloon Roll (Assignment) from Benjamin N. Summerton on Vimeo.

A pencil test for an animation assignment I did a while back at RIT's SoFA. We had to have a balloon filled with water roll off of an imaginary ledge.


Paper Fall (Assignment) from Benjamin N. Summerton on Vimeo.

A pencil test for animation assignment I did a while back at RIT's SoFA. We had to made a sheet of paper fall through air; I had a little fun with it.


Flour Sack Jump (Assignment) from Benjamin N. Summerton on Vimeo.

A pencil test for an animation assignment I did a while back at RIT's SoFA. We had to have a sack of flour do a little jump.


Flour Sack Getup, Walk, & Slip (Assignment) from Benjamin N. Summerton on Vimeo.

A pencil test for an animation assignment I did a while back at RIT's SoFA. We had to have a sack of flour wake/get up, walk a step or two, then fall over.


Tarzan (Assignment) from Benjamin N. Summerton on Vimeo.

A pencil test for an animation assignment I did a while back at RIT's SoFA. We were given a sequence of key frames of a "Tarzan," character doing a jump n' swing with a rope, and we had to do everything in between.


Walk Cycle (Free Exercise) (My First!) from Benjamin N. Summerton on Vimeo.

A pencil test for an animation assignment I did a while back at RIT's SoFA. We had walk cycles coming up in a few weeks, so I wanted to get a little bit ahead and try doing one myself. I showed it to one of my animation professors and he said that it looked more like a march... I guess that's something at least. :P


Walk & Run Cycles (Assignment) from Benjamin N. Summerton on Vimeo.

A pencil test for an animation assignment I did a while back at RIT's SoFA. We had to do walk and run cycles (in place), along with a transition for each.


Lip Sync (Assignment) from Benjamin N. Summerton on Vimeo.

A paper cutout animation assignment I did a while back at RIT's SoFA. We had to do a lip sync, choosing any audio we liked. I went a small snippet from Charlie Chaplin's "The Great Dictator."


Tags: Art, Animation

Hot Loading Code in Nim

I haven't had too much time to play around with Nim and other technology since I've had to move to accept a new job, but I decided to take some time this weekend to write a tutorial on how to do code "hot loading," in Nim. I'm pretty bad at making the first link in my blog posts link to what I'm actually talking about, so for a change it's right here.


Tags: Nim, Tutorials

I Wrote an Article on How Random Art Works

As of the past year Glitchet has been one of my favorite parts of the week. It's a mini newsletter that covers all sort of futurism and computer arts thing that I'm interested in. A While back (seven months actually), I contacted the curator of webzine and told him he should do an article on Random Art. I didn't hear back from him until a few days ago.

He asked me if I was willing to write a piece on how it works. Everything was fresh in my mind from my Nim port of Random Art, so I agreed. Over the weekend I came up with this. It gives you a simple overview of how the process works and where these pretty pictures come from. If you don't understand anything, I'm sure you'll be able to grasp something at least.


Tags: Computer Graphics, Nim, Art, Procedural Generation, Tutorials

Drawing the C# Networking Tutoral Series to a Close

So I haven't updated it in about 4-5 months. I think that It's time that I get rid of the "hiatus," marker on the side and say that it's officially over. I was planning on covering things like SSL and async Sockets, and maybe exploring some 3rd party libraries. But I think it might be better to say that it's officially over rather than to have this monkey on my back. I have a new job to deal with and my interest in C# has waned a little.

If you would like to, you can read some more details about the conclusion here. For those of you who never knew about it, you can start the course here.

The ride was fun and educational to me as well. Thanks.


Tags: C#, Tutorials

HTML5 Canvas Bindings for Nim's JavaScript Target

It seems like every one to two weeks I've been writing a new package for Nim.  I've been playing around with the JavaScript target.  There is some basic stuff there in the dom module for HTML manipulation but I noticed something very important was missing; the canvas tag.  So well, I added a thin wrapper for it (GitHub mirror).  It's available under the html5_canvas package in nimble.

When I first heard about HTML5 and read the spec a little, I think one of the most important things that was added was the canvas tag, and along with it a JavaScript API for all sorts of drawing operations.  Interactive content for the web that was being made with technologies like Flash and Java (applets) could now closer to the browser level (and have better performance to boot)!

The only thing is that I don't really like writing JS code; it's my least favorite language out there.  But you know we live in a time where you don't have to write JavaScript to write JavaScript anymore!  While Nim's JS backend is still marked as experimental I think that its nice enough where we can still make some cool stuff with it.

I tried to keep the API as close as possible to the one listed in the Mozilla docs.  Though I did have to make a few changes.  One of those in particular are the fillStyle and strokeStyle getters and setters.  The problem with these two fields of CanvasRenderingContext2D is that they can be one of any three different types (see here).  Nim being a strongly typed language wouldn't let me put those properties right under the type ... object definition.  Luckily though there is still a way to keep the API so it looks like we're setting a field instead of having to add a setFillStyle() proc.  Taken from the source, look a this:

proc `fillStyle=`*(
  ctx: CanvasRenderingContext2D;
  color: cstring
) {.inline.} =
  {.emit: [ctx, ".fillStyle=", color, ";"].}

# Can do this now!
ctx.fillStyle = rgb(255, 0, 255)

But as for the getters I had to do this:

proc fillStyleColor*(ctx: CanvasRenderingContext2D): cstring {.inline.} =
  {.emit: [result, "=", ctx, ".fillStyle;"].}

There's one for Gradient and one for Pattern as well.

For some extra fun, I ported over my 3D Canvas Cube from Dart (another language that compiles to JS).  I've put the source up in my toybox repo.  What's also pretty cool is that the compressed JS output from dart2js was about 90 kilobytes, where as Nim's compressed JS is around 20 kilobytes!  Originally when when did full imports (i.e. import math) I was getting 124 KB compressed, but when I changed to selective imports (from math import Pi, sin, cos, floor) I was able to drastically reduce the size.

 

 

I was able to get the animation to work by adding a mini proc to wrap JS's setTimeout() function:

proc setTimeout(function: proc(); ms: float) =
  {.emit: ["setTimeout(", function, ",", ms, ");"].}

If you're bored with 2D graphics and want to do something 3D in Nim (and in the browser), take a look at stisa's nice WebGL wrapper.

Here is the link to the repo for this again (GitHub mirror).  It's also on nimble under html5_canvas.  Have fun!


Tags: Computer Graphics, Nim, JavaScript

This site uses cookies.