I wanted to learn the basics of require.js and pixi.js, so I thought it would be fun to create a small game to experiment with these libraries. I decided to make a clone of a game I used to play: Nibbles. It was a QBASIC game that I played on my 80386.

Getting started with require.js was pretty daunting, there’s a bunch of documentation, but I found more of it confusing. Examples online helped some. Experimenting to see what worked and what didn’t helped me the most. On the other hand, pixi.js was very, very similar to Three.js….So much so, that I found myself guessing the API and I was for the most part right. It’s a fun 2D WebGL rending library that has a canvas fallback. It was overkill for what I was working on, but it was still a good learning experience.


Porting Crayon Physics to the Web

click that: ^^

It’s been a while since I gave my blog some love, so here goes.

Many semesters ago, I tried to make an HTML5 port of Crayon Physics Deluxe using Processing.js and Box2DJS. I got the rendering right, but I couldn’t get the physics to work correctly. My demo was limited to bounding box collisions.

I recently tried again to see if I could make this thing work. When I hacked together a demo of a ball rolling across the canvas, which was composed of several shapes, I became super-giddy. I knew it was indeed possible to port Crayon Physics to the Web. So I kept hacking on it, and I now have something semi-decent. There are of course a bunch of bugs to work out, but I’m excited to see this project’s potential.

Game Development using Processing.js Workshop @ FSOSS2010

Update: The Wiki page which has links to the demos, examples and games can be found here.

Last year at FSOSS, Al MacDonald gave a presentation on Processing.js. He talked about its potential, the community, and he demonstrated how to develop a neat Twitter widget. Don’t get me wrong, Processing.js was still impressive even then, but it had a while to go in terms of language parsing, 3D (using WebGL) and bugs.

During that time there was a group of students (including me) who had recently started to contribute to the project—to fix those bugs and add those features. Since then we have resolved hundreds of issues making Processing.js closer and closer to the Processing language. We had a lot of help as well. Developers joined the IRC channel we created or forked our repository and began contributing too.

Sometime between last FSOSS and this coming one, my supervisors (Dave Humphrey and Cathy Leung) and I spread the word about the project at conferences like WWW2010 and OCE2010. It was great telling everyone about the language—especially the story of Seneca’s involvement—but there was something we hadn’t quite tapped into…So we kicked around the idea of having a Processing.js workshop.

This is what we needed.

It seemed Processing.js had matured over the few months since we started contributing to it. Having a hands-on, guided class at FSOSS would really demonstrate to the open source community the power of this library. It would be informative, interactive and fun.

There was also talk about having a Game Jam, so I wrote up a proposal which leaned towards game development and titled it “Game Development using Processing.js“. But the material learned during the workshop can just as easily apply to data-visualization or other interactive graphics.

I’m excited about conducting the workshop and I already began jotting down notes and ideas which could be covered. There’s about a month until the workshop…But I also have quite a bit of work ahead of me. So for the next few weeks I’ll be putting together source code, simple demos, links, games and wikis. If you have any suggestions or comments, feel free to comment!

Hope to see you there!

Study Week Update

Reading week is over and just like last semester, I didn’t do much reading, or studying for that matter. Last semester I indulged in a solitary week-long hack-a-thon. I attempted to port Crayon Physics to the Web using Processing.js, you can find the final (unfinished) demo here.

This reading week I worked on C3DL. I fixed a few bugs, added support for up_axis for COLLADA models and continued some work on the beginnings of a RTS game using the library. You’ll need a WebGL-compatible browser to view the demo. If you don’t have one, you can take a look at a video I made.

Preliminary WebGL RTS Game With C3DL

Cathy asked me to make a cool demo using C3DL. C3DL is a JavaScript library which wraps WebGL, but also adds other functionality. I had some ideas, but starting a preliminary real-time strategy game made the most sense. It not only demonstrates a lot of C3DL features such as model loading, transformations, lighting, shaders, picking, cameras, textures, etc, but since animation is kept to a minimum, the frame rate on slower machines shouldn’t be a big deal.

You’ll need a WebGL-compatible browser to run it. You can either download Minefield, WebKit or Chromium. The demo seems to work on all three. Keep in mind I hacked this thing together in a day so the code isn’t pretty, but here it is anyway!

A Week of Lucidity: Night Six (Games)

The last few days I’ve been practicing lucid dreaming. This is something I practiced a few years ago and I wanted to get back to it. I haven’t had any success in becoming aware of my dream state this week, but I have made progress in recording my dreams, which is a key component of mastering the skill. You can check out my past few blogs here:

To try and attain lucidity, I have been recording my dreams in my dream journal, doing reality checks often and writing blogs. Blogging may seen like an odd way to practice, but anything which involves thinking about lucid dreaming can help. To further immerse myself, I decided to start re-reading Stephen LaBerge’s Lucid Dreaming book. This is a great introductory book on the subject. It explains the subject, the sleep cycle, some techniques and many other useful facts. The book mentions how dreams inspired and helped famous individuals in their work. For example, Robert Stevenson credits much of his work on Dr. Jekyll and Mr. Hyde to his dreams. And it was Friedrich August Kekule who had a day-dream of an ouroboros, at which point he realized the chemical structure of benzene. There many other cases, but they aren’t that surprising. Sleep relaxes and helps us make interesting neural connections. Dreams present us with sensory imagery which we can interpret and use to create innovative ideas.

Lucid Game Design

While reading the list of famous stories credited to dreams, I remembered I read something similar in one of my Game Developer issues. It was an article about a DS original IP titled Scribblenauts. In the game, the user controls a cute avatar and provides it with objects to solve puzzles. Objects are created by writing down their proper names such as “pencil”, “book”, “bazooka”. Whatever the user writes is spawned in the game and reacts appropriately. Jeremiah Slaczka is the director and cofounder of 5th Cell, the developer of the game. How is this a related story? Well, the game started with a dream of course. Jeremiah was trapped in a room and was required to escape to the next room by using the objects at hand. He later played with the idea of rooms and words and came up with the concept. Again, this is only one case, I’m certain many other games have similar stories.

Games are an interactive, graphical and story-based media. They are therefore an excellent subject in which to import interesting concepts retained upon waking from dreams. But what if these dreams are lucid? The walls of creative content melt away. Imagine what a game designer and master oneironaut could create. They could place themselves in a world and feel what it would be like to actually be within their game. What ideas would work, what mechanics would be neat, what characters would be interesting to interact with. An extremely useful form of game prototyping!

Whether you’re a biochemical student trying to figure out an assignment or a marketing director looking for a fresh new idea, dreams are a source of great ideas and answers which you can tap into. Going lucid is the obvious next step where the possibilities are endless and benefits are only limited to your own imagination.

Keep Dreaming