What I wanted to do was something cool that could be done in 40 min with girls who may not have done any programming.  I was given a lab with standard equipment (which did not include the Processing IDE).  There were two options for doing a workshop like this.  I could start from scratch or I could start with something that could be built on.  I decided on the latter because I thought being able to get something that looked really cool was important.  In the past I have helped with workshops for the same age/gender group and what I learned was that starting from scratch, not much would get done.   For most programmers,  tasks like putting together a simple web page or writing a simple script is easy even if we have never used a particular language. It is far too easy for us to underestimate how much time it would take for someone to be able to write a simple program.   Programming requires a certain amount of discipline.  Even languages like Processing which were designed to be easily accessible requires a certain syntactic awareness (spelling, capitalization, placement of ;’s and }  etc.) and all too often it is easy to make simple typos.  As we were using a plain text editor, knowing how to find syntax errors by sight was also important.  I also felt that you wanted to have a very specific goal.  “make a web page” or “make an animation” is too broad. Even something as simple as search for an image to put into a page would eat away at that time all too easily.

Thus, I decided that I wanted to have a very clear goal on what they will get when they finished.  I decided to have them put together an animated picture frame (essentially a slide show with an animated background).   The idea was simple to understand and it was clear what the goal was.  I got some photos to put into the album from my friends Raymond Wong and Samson Chan who had picked up photography as a hobby.  I wanted pictures that were pretty and fairly neutral in topic and both had recently taken pictures at various gardens and flower shows.

I then wrote a bunch of classes that would animate various objects.  In the end I had the following collection:

• polkadots   – a circle that moves around the page
• triangles – a triangle that moves around the page and spins
• fireworks – essentially exploding set of particles
• flowers – a flower shape that floats downwards
• poem – lines of text that would be drawn diagonally downwards.

Most of these were created with random values for things like colors and positions by default.  These values could be changed via functions but could also be left alone. The picture frame could then be created by simply instantiating a bunch of these objects and drawing them in the draw() function.

My intial plan was to have a picture frame already done and have the students change things like colour of the flowers and so on.  You can see what I had thought would be a good starting point by looking here.    As a programmer, what I had done was of course create a sketch with an array of random polkadots/triangles/flowers/fireworks some text.  I handled all the initialization and drawing with loops.  The animation is busy which is ok because that is one of the things we could change.

However on the way to workshop this morning I started thinking some more about this… and I realized that I had made the mistake of being overly complex.  I was not keeping it simple because to understand something like arrays and loops took an extra step in the understanding of how programs work.   Its not necessarily hard to explain these but in 40 min, this was maybe a bit too much to ask.  Therefore in the last minute, I decided to change the main sketch.  Instead of starting with the kitchen sink, I decided to start off with a simple sketch that only ran through all the pictures. (essentially erased all but 5 lines of code.  This turned out to work pretty well and the feedback seemed positive (I’ll have to check the official feedback later ). The students were able to add single instances of the different objects and modify things like colour or number of petals on the flowers and so on.

Here are some changes that I would make to make this workshop run smoother next time.

• change the text that was the default text for the “poem” class (going for the code poets theme… I had used a version of the initial main sketch source as the text) and that looks very confusing for the students to change because it looked like code.
• change the way that text was added (separate the data from the code more… currently its all part of add() statements).  It would be better if I had declared a bunch of strings or read the text in from a file because that would have made it easier for the students to modify the text
• don’t mix american and canadian spelling of the word “colour”.  I had named all the functions to change colours on the objects setColour().  unfortunately I made the mistake of having the function take color as the argument.  Thus to call the function, the students would have to write:  obj.setColour(color(…));   The different spellings make it extra confusing.  The better approach would be to have the object just take 4 floats and set the colour inside the function

Mostly the changes are not difficult to make and I will be making them over the course of the next week.  I will also update the workshop instruction document to match the changes.

1) Thunderbird will auto detect your settings… this is probably the easiest way to do it and if I had let it do that I wouldn’t have been unable to sent email for a whole day .    Just go to the bottom of the account window, click on the account action button and choose add account and fill in the info in the dialog box and let Thunderbird do the rest.

2) If you want to manually set it up, the info supplied by ITS is correct however, there was a bit of confusion for me on the labelling.  For incoming server, choose SSL/TLS for outgoing choose STARTTLS

Anyhow hope this helps!

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