You can find it here:  http://phill.vec3.net/gjk

I started putting together a small bubble sort animation about a year ago.  I liked the way the way the final animation looked but I didn’t like the way the code looked and felt.  It was really hacky and not very good.  Definitely not extendible for other algorithms.  About a week ago I decided to restart that effort.  I thought about what would actually be necessary to do general algorithms and data structure animations.  I rewrote the code (you can get it here: https://github.com/cathyatseneca/DSAnim ).  Currently the code animations are pure Processing sketches (I didn’t stick any bits of JS in my sketch this time ).  However that might change later when I try to add in controls.  You can check it out live here:

https://cs.senecac.on.ca/~catherine.leung/sketches/index.html

When I was putting these animations together, one of the things that I had trouble with was translating the algorithms into animations. Processing works by repeatedly calling a draw() function in which you tell it what to draw in the next frame.  In other words there is a sort of built in loop.  While it is possible to call a function for some algorithm (a sort for example) within the draw loop, you can’t really animate it just by calling it as it will be called each frame and what you want is to animate steps within the function.

I admit that I’m very new to Processing.  Thus, this may not be the best way to do this (if anyone has suggestions please let me know!)  The design I settled on in the end was to create a general array animation. The array has a single draw function that the main draw loop will call.  Depending on the state of the array, the array’s draw() function will animate one frame of what is going on (one frame of a swap for example).

The array has states which determines what to draw.   Currently the array has these functionalities:

• moves (move number from one element to another)
• swaps (swaps two values in array)
• stable (nothing is happening)
• move to temp (move number to a temporary location out of array)
• move from temp (move number from temporary location to array)

The object also has indicators and a splitter bar that you can add to your animation. You can also change the colour of the text in the array.

So far I have completed the bubble and insertion sorts.  I think I will need to add more functionality to properly show merge sort.  I have not yet really thought too much about a quick sort.  After the sorts I will probably start looking to add trees and lists.  I am hoping to also add animations for other data structures as well.  The code is far from perfect but it looks neat and for now that will have to do .

The new school years begins so I figured I should write a blog post for planet CDOT.  Now… the only question is what to write about?  I had been working on trying to create a series of processing.js animations to illustrate how some algorithms works.  But then while trying to figure out the best way to animate a merge sort, I got a call.

It was one of those long distance call rings which meant that it was either my parents or telemarketers…I hate being telemarketed to.  I know that the telemarketers are just paid to do a job so I’m polite to them but I really don’t like getting calls from people I don’t know.  Thus the conversations usually go: “Thank you for calling, can you please take me off your calling list.”.  Usually they do this or at least say they will and hang up.

Anyhow, this person calls and since I didn’t recognize their voice I start on the “please take me off your list” line.  They then proceed to tell me that they are calling because they are detecting that my computer is downloading a lot of viruses.  And since I couldn’t believe my ears to the silliness of that statement I said “what?” over the phone.  He then says something about detecting many viruses being downloaded onto my windows computer.  (I have been using Macs for about 3 years now and I’m only ever on windows bootcamp partition when I absolutely have to be). So I insist that I highly doubt that my computer has a problem.  He then insists that they have an “internet research company” that was detecting a large number of virus downloads to my computer.  This exchange happens a few more times (I think he missed the part where I said I blew up my windows machine 3 years ago)

Although I was irritated about getting telemarketed/scammed at I thought it was really really funny at the same time. I really wanted to see where this was going.  So I asked “So how are you able to associate my computer’s IP with my phone number”.  And then he continuous on about whether or not I knew what a virus was and how my windows computer was infected.  I then told him to hold because he was too funny and I had to record him for my students.  A few seconds later he hung up.  I guess that he didn’t want me using it to teach my students about viruses on windows.  You would think he would love to have his research shared .

Now, having finished this conversation I wanted to know what was going on so I did a search on scams, viruses and telemarketing.  Apparently there are some social engineering scams where these telemarketers would try to gain access to a person’s computer and then use it to steal credit card info.  For myself, I knew this was a hoax from the start but I can’t help to think what would happen if this was someone like my parents who aren’t really comfortable with computers.  Would they fall for it?  How do we spread the word to our friends and family about these sorts of scams so that they are aware of them and won’t fall victim.  I think I will start by writing this blog.

Our talk was scheduled on the Monday of the conference (2nd day) in a Session called Changing Dimensions.  There were originally suppose to be 4 talks in this session but one talk pulled out at the last minute leaving only 3.  The other two talks were about converting 2D animations to 3D animations and the methods used to do so.  We were the last of the 3 talks.  Before we gave the talk, I was really happy with the sketches we had put together, the demos that we had done and our slides in general.  Yes, there was indeed a lot of programmer art but it was neat and tidy.  Then the first presentation was about creating stereoscopic 3D version of the lion king…which of course sets the bar a lot higher.  However, considering what we were talking about, I was still very happy at what we have done.  We will post these slides soon, but we felt that a voice over would probably help quite a bit so holding off on this for now.

One of the weird things I had found about our talk was that it seemed to be not really related to the other 2 talks in the same session.  Both of those and the one that was cancelled were all about stereoscopic 3D so our web graphics related talk seemed a bit out of place.  Other than the part of the paper where we said “we implemented the 3D portion of processing.js” I don’t quite see how we had fitted there.  However, after the talk, we had many people come and ask us questions about pjs.  People were interested in using it.  One of the people who came up to us after was actually a former student of mine who had moved out to Vancouver.  It was really amazing to see the interest that people had in it.

We attended the SIGGRAPH reception.  It was good, we had a chance to wander and relax.  I admit I faded earlier than Andor and Daniel did so left for the hotel about 30 min earlier.

The next 3 days of SIGGRAPH blurred into one for me.  Two things really stood out for me.  The first , was a Birds of a Feather talk on WebGL.  These were smaller talks but the room was packed full with people going out the door.  We saw some really amazing WebGL demos.  Everything from a robot customizer that you can use to put together a robot for 3D printing (I am totally getting one! )  to web based training software for heptic surgery equipment (I am probably not using the right term to describe this).  It is amazing what is possible with WebGL now that it is more readily available.

The second was by one of the developers of X3DOM is a WebGL based JS library that allows a scene to be specified with X3D.  The most amazing part of the talk was about how he encoded an entire mesh as an image and pushing a large mesh that loaded in fractions of a second.  Since XB-pointstream works with very large data sets, something like this would be a really useful technique to transfer the points needed for the point clouds.

Other than the talks, the exhibition and art show were very cool.  There were some really interesting exhibitions.  I also got a chance to do a beginner tutorial with a wacom tablet.  I had never used one before and my ability to draw is … well lets just say that there is a reason I’m not in the art department .  I had always been amazed at how people could actually draw digitally… I have never had that sort of control of mouse.  With the tablets… I can see how its possible.

We also had a chance to meet up with Steve DiPaolo from SFU.  He was a partner in our CATGames project and it was pretty cool to meet with him again.  He had some interesting project ideas for applications of the work we are doing.

We also attended a BOF for educators that used Processing.  We had a chance to talk with them about Processing.js.  There are many people who use Processing but not as many know about Processing.js so connecting with them was pretty cool.  Spread the word!

Anyhow SIGGRAPH was definitely a positive experience both as a presenter and as an attendee.  It was useful in meeting people who was working in the same field and learning about other projects and techniques.  Definitely worth considering attending next year.

Yesterday, I decided to try pushing our game onto android devices just to see if it would work. I’m not going to spend too much time on this as it is not a specified deliverable but it would be good to see if it was possible.  I had never done anything with android devices nor did I have an environment set up.  Phonegap currently has a cloud base build system where you can send it a repo or zip file and it creates the the app for you.  I decided to try that out since it was free for beta testing atm.   For actual device testing we have an HTC desire Z and a motorola Xoom tablet.  We also have a motorola atrix that i have not yet tested on.  The results were mixed.  Here are some things to note

1) the build system makes it really easy to deploy your code on multiple platforms.  After waiting for it to finish compiling my code, I only needed to navigate to it via the browser on the android devices, download it, and install it.  Make sure you have your application settings changed to allow for non-marketplace sources… I think they called it something scary like allow unknown sources under application management settings.  It was painless and simple.

2) I was unable to get it working on the HTC desire at all.  After searching the forums/web for why, it seems like it is likely that it is simply taking too long for it to load (there is a 20s time out). I know that on the ipod, it takes a while for us to load our stuff in.  I’m thinking that this is something we will probably have to look at in the future.
3) I was able to get it put on the xoom tablet but only as a phone size app.   It was running blazingly fast but it is uncertain if this is at least partly size related.  Currently there does not appear to be a way to change the size of the app based on the resolution size or target a specific device but it is something they are working on for future versions of phonegap build.

In any case, so far I’m pretty happy with what I’m seeing.  It certainly makes building one application for multiple platforms a lot easier.

After consulting with my colleague David Humphrey, we decided to give Phonegap a try.  For those of you not familiar with phonegap, it is an open source framework that runs webapplications (html, css, javascript) natively on different phone platforms.  This afternoon I gave it a go.  The application was pretty easy to use.  After you install it you can create a phonegap project and it provides the framework for you.  The project comes with an html file that I modified in the following manner

to the <head> portion

<script type=”text/javascript” src=”processing.js”></script>

and put

<canvas data-processing-sources=”mypde.pde” width=”1024″ height=”768″></canvas>

into the <body> section.

I then placed the .pde file into the same folder with the index.html file and added all the other images. After that, I just built it in xcode.

There was only one problem I had and that was the fact that the build was set by default to iphone build so I ended up with this tiny little frame showing only 1/4 of my sketch.  I had not done much development with iOS so it took me a while to find the place to change the setting.  But after looking around I found it in the project setting -> build tab -> Targeted Device Family

changed it from iphone to ipad and it worked beautifully.  I have yet to test on actual hardware so I’m not sure how bad the performance hit will be when the app is deployed.

For myself, I’m starting off the summer with a good deal of writing.  Our talk for Processing.js was accept for SIGGRAPH 2011 and we made some changes based on reviewer comments.  Other than that I’ve also been working on getting another paper prepared.   Things are going well and everything should be done for tomorrow.

Next week will see the continued progress on various projects.  It should be a very exciting summer at CDOT.  I’m looking forward to it very much!

TL;DR version: fast 3D graphics in the browser!.

When we first started c3DL, Canvas3D was a plug-in (which was really odd because the whole idea was to be able to do 3D graphics in the web page without any plug-ins).  I remember explaining to people how Canvas3D will let people do 3D graphics in the browser without any addons…and that if they wanted to check it out they should go and download the addon for it.  We had tutorials on how to get the right browser, how to install the add-on how and test if you did everything correctly.   Even in pre-release versions of Firefox 4, WebGL had to be enabled in about:config.  Finally today WebGL just comes shipped with the browser.  All the things we have been working on are now viewable without plug-ins or changing any settings.  With Firefox 4′s release the number of browsers there are 2 browsers that come WebGL enabled.

Firefox 4 did more than just turn on a switch for WebGL.  It also came with some crazy enhancements to their JavaScript engine.  When c3DL first started, our first demo consisted of 4 spinning cubes.  It was really really boring.  However, one of the really odd things about it was that after a few seconds of spinning it would have this noticeable pause.  Basically a garbage collection pause.  Today this is gone for the most part.  The graphics made with WebGL has frame rates.

What to do with your shiny new browser:

sooo… now that you have got your new firefox 4 browser, what is there to do?  What is there to check out?  Here are some demos.  It is admittedly Seneca-centric featuring work developed by staff and students at Seneca.

• 3D pictures! http://scotland.proximity.on.ca/asalga/
• If you have a laptop with a sudden motion sensor check this out (won’t work on devices without): http://scotland.proximity.on.ca/asalga/demos/sms/
• This is a bit old as we haven’t updated c3dl demos for ages but if you haven’t seen it yet, check out what is possible! http://www.c3dl.org
• My colleague Dave Humphrey developed the audio api shipping with Firefox 4.  Here is his blog post on the subject.  Check out all the links at the bottom … they are super cool!  http://vocamus.net/dave/?p=1273
• Some 3D processing.js sketches http://matrix.senecac.on.ca/~asalga/pjswebide/index.php

Talks:

Starcraft 2 as an E-sport

I got my copy of Starcraft 2 the day it came out and still have not played it yet.  I think its because I never got into the original starcraft (actually I didn’t play that one either).  Anyhow, the interesting part about this talk was that the developer went through why they did what they did.  Starcraft 2 was designed with 3 sides, 45 units (competitors had shipped with 4 sides, 80 to 100 units).  Reason was that it was designed as e-sport.  I had not known what e-sport meant until this talk (I had sort of assumed it was more like sports games) but apparently it is when people watch other people who are really good play the game.  In Europe and Asia, E-sport competitions can fill large halls.

Important part of esport:

• playable
• watchable – because it is meant to be watched, people watching the game must be able to tell what is going on.
• clarity – challenge for artist.  size of monsters reduced so that it was clear (couldn’t hide units behind big units).  don’t over do effects
• simple – minimum number of unis.
  • Too many units confuse the viewer
  • Too many units – even pros are guessing
  • Too many units  – some units are the same

And here I thought starcraft 2 was a story with some rts in the middle

raid on bungeling bay – Will wright

Now, when I first saw the title of this game I was like… raid on what?  I have never heard of this game at all.  However, it was Will Wright giving the talk so it was pretty much a must attend session.  Will Wright is probably more famous for making the Sim games (The Sims, Sim City etc.)   However before the Sim games he made Raid on bungling bay. Will Wright is a very good speaker, if you ever get a chance to attend his talks you should.  Its full of humour and asides and overall very well done presentations.

The game was made on a commodore 64 and for reference he had the programmer’s manual that came with the computer.  Much of the original work for that game was unfortunately lost in a house fire.  The really interesting part about this game was not necessarily the game itself but the tools that came out of making the game.  Mr. Wright had created 2 editors to help him build the game world.  Chedit for characters and Wedit for map editing.  What he found was that he was actually having a lot of fun with these tools.  The basis of Sim City came from Wedit.  While Raid on Bungling Bay was not a very well known or popular game, the game that came out of a tool for building it became immensely so.

• Worlds within Worlds – maquettegames.com.  A recursive world where inside a big world is a little world.  If you do something in small world it affects big world and vice versa.
• sense of connectedness by michael brough – mightyvision.blogspot.com.
• Loop Raccord Nicolai Troshinsky: wwww.troshinsky.com.  Raccord is a film term that refers to fluid movements between two scenes.
• Opera Omnia by Stephen Lavelle.  Increpare.com.  Time manipulation mechanics (rewinding, time slowing, self cooperation/competition, changing the past..  idea in the game is that the prsent can not be change, the game is finding a path from past to explain present.
• inside a star filled sky json rohrer insidestarfilled sky.net – recursive game play
• mantra by agustin perez fernendez www.tembec.com – about concentration – there is a mantra being chanted constantly in the background. playing and meditating at the same time.
• Experimentation in User Generated Content – Andy Schwartz
  • The Abrupt Goodbye http://www.HelloDotDotDotGoodbye.com
    • conversation generated by users.  Database remembers previous resposes
  • PlayPen

During this session the panel also described a folk game(like hide and seek) they recently learned to play called Ninja. It was an interesting end to the talk.

Classic Game Postmortem: Populous given by Peter Molyneux

This was a great talk given by Peter Molyneux, who was also the creator of other games such as Syndicate and Fable.

The talk was interesting in that the creator of this game went on to describe how the game came about partly due to his lack of ability to program.  The play area was small because it allowed him to double the frame rate.  The core game play element of the game came about because he couldn’t code a wall hugging routine.  In the end, it seemed that he had iterated through the game design process building and prototyping as he went until he had an actual game.

Day 4 of GDC was an interesting one.  The populous talk was really good and gave some good insight on how games were developed.