See these quick examples:
cubes
lines
starfield

First off, if you don’t know about Paper.js, definitely check it out, its a vector graphics framework built on top of Javascript and the HTML 5 Canvas element. It gives you the ability to easily draw some pretty neat things, and performance seems pretty great as well (usually runs about 60fps). It takes a bit getting used to, but its an interesting approach to the normal javascript development process. Here is the basic setup.

<script src="js/paper.js" type="text/javascript"></script>
<script src="js/main.js" type="text/paperscript"></script>
<canvas id="draw" width="100%" height="100%" resize="true"></canvas>

As you can see, first you include the Paper.js source file, then you include your code file with the type as text/paperscript. This will setup your basic events and also provide your script with the extra functionality and classes that Paper.js uses. You also pass the id of the canvas element you want to draw to with the canvas parameter. That’s pretty much all you need to get you started. Paper.js adds a lot of new classes to use for drawing and also hooks up your events for you so you can get right to the creative part. A complete api reference is available here. My template file usually starts off with some of the more common events, as seen below.

function onFrame(e) {
	e.time // Time in seconds since the app started
}
function onResize(e) {
	view.size // The current canvas size, in a Size object.
}
function onMouseMove(e) {
	e.point; // The current mouse position, in a Point object.
}

I won’t go into too much detail about the basic javascript code, but i will go over some of the basic drawing techniques I’ve used. Path is your basic drawing class, allowing you to draw lines and shapes similar to the flash graphics engine. To control the look of your Path you set fillColor and and strokeColor (they accept CSS values or the colour classes provided by Paper.js like RGBColor). Once a path has been created, it is in the display list unless you specifically call remove(). You can also add your paths to a Group which allows you to control them all with a single function call. I’ll go over how i drew the shapes in each example.

Lines / Source

Lines are one of the easiest things to draw in Paper.js. Simply create a Path, add points to the line by sending a Point object to the add() function. If you would like your line to be curved instead of jagged, simply call smooth() on the Path. To change the thickness and colour, simply set the strokeColor and strokeWidth properties. Note: the smooth() function must be called any time the points change.

path = new Path();
path.strokeWidth = Math.round(Math.random()*4)+2;
path.strokeColor = STROKE_COLOR;
for (var n=0; n<POINTS; n++) {
	path.add(new Point(width/(POINTS-1)*n,start+i*SPACING));
}

The animation of this is a simple sin wave with a multiplier based off mouse position.

Stars / Source

Stars is also a simple application.

new Path.Circle(new Point(0,0),values.size);
initial.fillColor = 'white';

var symbol = new Symbol(initial);
for (var i=0; i<values.stars; i++) {
	var item = symbol.place(Point.random()*view.size);
}

We create an initial circle using the Path.Circle function passing in the center point and the radius. This time, we create a Symbol out of the circle which basically turns our circle into a stamp. We call the function place() on the Symbol and pass in a Point object to create a copy of the item at that location. Since we do not keep track of each item in this project, we can simply loop through the children of the activeLayer which is a property of the project variable (available by default without having to declare it).

var layer = project.activeLayer;
for (var i = 0; i < layer.children.length; i++) {
	layer.children[i].x += values.speed*item.data.scale;
}

The speed of the particles in this example is controlled by mouse position.

Cubes / Source

The cube creating part of this example was taken from the Paper.js examples, but i’ll try to explain whats going on:

Path.RegularPolygon(view.center, 6, 30);

This function creates a 6 sided polygon that has a radius of 30, simple enough, but to create the 3d colouring effect, we have to parse each segment (each segment being a triangle for each side of the shape) into its own Path. To do this, we run through the segments array and clone() each segment into a path and colour them appropriately. This only needs to happen once, as we are then able to simply clone() the Cube that we have created and stored when we want to make another.

The animation of this is just a simple spring effect with a mouse based rotation applied to the container.

I hope these examples have given you a good primer to get started with Paper.js. Now that you have the basics, you are good to go, let your creativity fly. Paper.js allows you to easily create shapes, lines, and even work with loaded images. There is still a lot of unexplored terrain left for me to explore, but here are a few of the examples i came up with after taking a look through the examples posted on the Paper.js website. I’ve also provided the links to the source so you can see how its done.

View Examples

You can check out the official examples here.

Seem’s like I’ve brought the House Of Cards dataset to almost every platform I work with. So it was only logical to use it with my first experiments with WebGL:


To see it in action click below (you must have a WebGL enabled browser):
House Of Cards WebGL

Click on the options on the right to change the way the model looks.

The setting for rendering tris for edges will toggle what geometry will be rendering so if you unselect edges it will stop rendering the “lines” around the triangles.

The colour setting will change the way the model looks. By selecting “Use Model Colours” it will use the colour “intensity” values from the RadioHead dataset. If you select “Use Solid Colour” it will shade the entire model with one colour that is lit with a directional light. Selecting “Show Normals” will render the triangles based on the Normals of the vertices.

Under animation you can turn on and off the wave motion.

This was a fun small experiment but I learned a lot doing it. I’m not 100% sure the Normals were calculated correctly but it seems like it. Regardless… I like how it turned out.

I think Google liked it too since they decided to put it on Chrome Experiments:
http://www.chromeexperiments.com/detail/radiohead-webgl/

When I first saw the creative for the site I started thinking “How will we pull this off in HTML?”. As the previous post stated we took quite a few test routes before deciding on doing everything using canvas. Once we had decided on the Canvas method I developed Jam3D.js quite quickly. I think the core of the engine was written in two days or so.

You might be asking why didn’t I just use another 3D engine that’s out there. Well… Generally with projects that have a tight timeline or are high profile I’m scared to use other peoples tools/code. Especially when it needs to be optimized as much as possible. It’s very hard to optimize someone else’s code vs your own. Sometimes to optimize code you have to know every nook and cranny of the code. That’s not to say I don’t EVER use other people’s libraries. (I do look forward to playing with ThreeJS though)

When I was writing Jam3D.js I knew we had to optimize as much as possible but still keep it flexible. To do this you have to keep things as simple as possible.

If you look at Jam3D.js you’ll notice that its really just one array of 3D (x, y, z) points that is being transformed by a 3D transformation matrix and an array that represents those 3D points transformed into their 2D form (x, y). You can’t get more simple then that.

I kept these point arrays as one dimensional arrays of numbers because I wasn’t sure how intensive it would be to do two dimensional lookups on a Javascript array. At every point when developing something that’s processor intensive you have to think of these small details.

In order to keep our sanity we created four classes to help us modify and render Scene3D’s point array. These four classes being Vector3D, Line3D, Circle3D , and CurvePath3D.

Vector3D was the class that would never make an appearance on Björk’s stage, it would never be rendered, but it was used to create all the 3D objects and also used for some calculations in the site. Vector3D is sort of like a 3D point… It has properties such as x, y, z position but I also added in two properties x2D and y2D. x2D and y2D were getters that “reached” into Scene3D’s transformed 2d point array to grabed the “2d” version of a position. Actually the 3d positions also “grabbed/pushed” their values from the Scene3D array.

This simplest shape that we rendered/drew to Canvas I would say was Circle3D. Circle3D really just had two properties one Vector3D and the radius of the circle. Because we were dealing with perfect “spheres” in this site we didn’t have to calculate anything else beside’s the location of a circle/spere. Actually I think because of this the Circles were the fastest item’s to render to screen. Really with just a minimal performance hit.

Line3D you could guess was quite simple too. It really just contains a start and end position vector3d.

Curve3D was the most complex 3D object we were rendering to screen and really was the only one I wasn’t super confident writing. Up until this point I had never written 3D curves. I was a little bit nervous because in actuality it’s not even often I write code to render 2d curves. HAH… But after a bit of experimentation I realized we could render Quadratic or Bezier curves in 3D.

Curves in computer graphics are defined by a starting point and end point and a point that “effects” how we will curve in-between those
points.

Well to be honest the above is a Quadratic curve. A bezier curve has two control points or points that “effect” the curve.

You might’ve noticed that I speak very vaguely about the control point effecting the curve and really because it’s actually very hard to distinctly say how it effects it. The equation for a Quadratic curve is quite simple but it’s hard to judge quickly what a curve will look like by just knowing the the start, end, and control point of a curve. (for you who’ve used Illustrator will know) And because of this reason I was very scared to start coding 3D curves. But it turns out if we translate the 3D points for the start, end, and control point to 2D it looks just fine. Just the way it’s supposed to. Who knew???

So to recap how this whole thing works… We have a Scene3D which contains some arrays defining 3D and 2D positions. Then we have a few classes that hook/reach into those arrays to modify and set those arrays.

But who does the actual rendering? When you write a simple 3D engine like Jam3D.js you have to make the decision will the Scene render objects or will the objects themselves render themselves. If you choose to have the Scene render the items your engine may perform a little bit better but you’ll always have to define how things are rendered in the scene and it’s hard to add in new types of items to render. To be honest at this point I was a bit nervous the creative for Bjork would change and we’d have to start rendering new types of items so I made the decision to have objects render themselves and possibly take a small performance hit. These types of decisions only really happen when dealing with clients but luckily they never wanted new types of items to render.

One nice thing about the creative for Bjork was that all the items are white. You couldn’t tell if the white circle that was in the distance was actually in front of the white line in the front cause they were both white. This was nice because we could skip Z-Sorting completely. This helped a lot since Z-Sorting can be one of the most processor intensive operations.

I knew that I didn’t have a lot of time to write out the Björk site and so I decided that I wasn’t going to write Matrix3D class. Luckily I found a great Matrix class written by Masayuki Daijima Matrices scare people a bit if you haven’t worked with them much. But really you probably all learned this stuff in grade 10 math. HEH. Really matrices are just a set of equations to transform points. (http://en.wikipedia.org/wiki/Rotation_matrix )

Working with Google Sketch-up
For whatever reason, the creative team had chosen Google Sketch-up to design the galaxy. This proved to be a bit of a curveball. With thousands of lines and 3D spheres in the model, we scratched our heads wondering how we would get the data out of Sketchup and into some kind of format we could use in the browser. We spent hours googling, searching for a proven method to get the data out. We tried three.js but there wasn’t a way to make it work – managing optimization was a big concern. Our focus turned to the file types that Sketchup exported.

We eliminated all but one sphere and one line in the galaxy and exported the file in every format possible. After a bit of poking around, the .xsi file format showed the most promise. Once opened in a text editor, we were pleased to discover we could clearly see what line data looked like and what made up a sphere. Lines had a start x,y,z and end point x,y,z. Sphere data was a bit more complicated, with a single the 3d object comprised of hundreds of mesh positions defining faces of the spherical body. A flash application was written to parse the lines and php was used to parse the sphere data, average the position in space and calculate the radius. We finally had our data.

Drawing the galaxy
We had seen some promising work done by Giuseppe Sicari which bolstered our expectation that what we were going to attempt would work.. he was just missing a Camera you could control. It was now time to write our very own javascript 3D engine and in only a few days Mikko had made this. There still was no camera object and we still needed to create ‘the compass’ indicator but it was a start. High-fives were had.

Illustrator to HTML5
One of the key design elements in the site is the compass indicator that orients the user experience in the site. The compass is again re-used for the mobile version of the site. These design assets were provided as Illustrator files and we needed a way to express them as line data we could plot on the canvas. After hours of poking around we stumbled upon Pierre Lindenbaum’s library that could convert svg to html canvas drawing commands… but of course this was not ready for us to use out of the box because our data was different. Another php script was needed to convert this drawing commands into the paths we use in our native JAM3d.js. And since the compass is comprised of two planes that intersect, the second set of paths needed to be offset onto another axis and the values painstakingly shifted to make the model symmetrically join. The fun was just starting..

In Part 2, Mikko will explain the challenges we faced writing Jam3D.js, Camera3D and more!

1. How to get people to see your app
2. How to make money off that app

App stores really solve both of these issues. One of the coolest things as a web developer is the fact that there are ways to create “native” apps for these app stores using the standard languages we use: html, js, css, and AS3.

Here are some platforms web developers can deploy to using the languages noted above:

Conclusions:
If you are a developer and want to start developing with minimal overhead and with huge reach the Nokia Ovi store is the way to go. The Apple iDevices are extremely popular in North America but worldwide Nokia is still a HUGE player with bigger reach.

The Chrome web store is the most straightforward option for web developers. The sign up fee is very minimal and there are no other tools you need to learn (or buy) to deploy apps. Out of all the stores the Chrome web store takes the smallest cut however it’s a very new platform and doesn’t have the same user counts the other platforms can boast. The $1.99 minimum app price point is interesting in that as a developer you will not be competing against $0.99 apps however it being a new platform it could deter users.

Even though neither of the Apple stores won in any of the columns they are obviously still a great option to develop for. They were the first platform to have an app store and so the other app stores are definitely trying to compete against Apple’s stores and with good reason. The iOs store still sells the most apps out of any store.

The Android market shouldn’t be forgotten as it is currently the biggest competitor in app sales vs the Apple store. Enrollment fees are quite a bit lower than the Apple store’s and it’s nice that they payout developers quite often.

Blackberry App World is an interesting underdog. Currently it’s receiving A LOT of developer support especially from the Flash Platform community because of the Blackberry Playbook and this promotion. It’s very cool that they’ve been working on app monetization strategies more than anyone else. This gives the most avenues for developers to make money. Cost for being a App World developer is much too high though. (although currently the initial $200 fee is waved) Unlike the other stores where you pay a one time fee or anually in the App World developers pay $200 to receive 10 credits. One credit is used per app you submit. You will not receive your credit back if your application fails the QA process. You will also have to use one credit to update your app. This to me is ridiculous! In order to maintain quality of applications developers should not be penalized.

Overall the great news is that using the languages you know with some new tools you can target most, if not all of these platforms. (more on these tools in a future post)

...snapshot of the "constellation" of lines and 'spheres'

The model, aka the “constellation” pictured above, had over 8000 lines and over 300 spheres. The designer, thankfully, had used a monochromatic palette. This was a good thing because it meant that we would not have to worry about z-sorting the lines and circles. Our mission was to render this puppy, fly around and cull what we couldn’t see.

Once we had parsed the data (that’s a future post and a half), we were ecstatic, it was nearly imperceptibly different from what we were seeing in SketchUp… but.. then we glanced at our frame rate stats and we were only getting 9fps. As we moved our camera in and out we saw the fps hover between 4-9fps. We thought, ok, maybe Safari on mac is not as fast as Chrome. Alas! Chrome was performing slighly worse, with a lower bottom end at 3-6fps.

Where was our sweet spot? How many lines and spheres can one draw on the canvas and achieve acceptable frame rates? What is more taxing, lines or spheres? We would be happy with 20fps. We broke out the lab coats and went to work creating versions of the constellation with decreasing amounts of lines and spheres. We also separated the lines from the spheres and ran some tests independently. Keep in mind, that this is not uniform test since, as you can see in the screenshot above, the lines are not spread evenly in x,y or z space nor are the total number of lines and circles drawn on screen at any given time. So this is also a test of pure javascript performance, looping through the arrays and deciding if a line should be drawn.

The Tests

We ran 3 tests. For our 1st test, we took every third, then fourth line etc. from the original 8847 lines in the array. The second and third test gave us insight into how much overhead the circles were adding to the drawing methods.

We wanted to share our findings with respect to the performance (measured in fps) we recorded in FireFox, Chrome and Safari on the Mac and their counterparts on the PC. All tests were conducted at 1200×800. We were also very interested in seeing how the HTML5 canvas performed on the iPad because part of the end project is to produce similar results in the browser on the iPhone and iPad. All of these browsers support the canvas and some browsers have even fashioned marketing campaigns around their performance. But what we found surprising was the chasm separating the slowest from the fastest frame rates.

As you will see in the tables below, Firefox was pathetically slow at rendering the model on both mac and pc. Safari was better than Chrome for some reason, as it is widely believed Chrome owns the distinction of being the fastest browser.

In Test 2 and 3, you can see that drawing the circles was not an insignificant overhead, representing  a 2-5 frame jump at the lower end of the range.

While we acknowledge this isn’t completely a fair test, it shows you that Chrome is not necessarily king, and that there is serious room for improvement from Firefox. We look forward to updating this post with some numbers run against FF4 and Chrome 9. Perhaps the best news was that Safari performed well for us, and is considered the target browser for the project. We will update this post in the coming weeks with greater detail about this project as this data has more to tell us about the performance of canvas drawing methods across the browsers.

When we started this our first instinct was to develop this using the new HTML5 Canvas tag. So we did and it didn’t perform at all…

We were a little bit upset…

Then one morning I was reading through my RSS feeds and stumbled across this article:
http://blog.jackadam.net/2010/3d-rotating-molecules-on-the-iphoneipad/

They were using a different approach. Instead of using Canvas they were using CSS and the -webkit-transform tag heavily.

We implemented a similar solution and it worked great on the iPad and surprisingly on a iPhone 3Gs.

Go Here To See This Experiment In Action (remember Safari Only)

If you want to see the actual page, Click here to get a taste.

I will definitely be looking into the canvas a bit more, but like Mikko said, i don’t think this is the “Flash Killer” just yet. But hey, I’ve got no problem experimenting with it. Its a nice break from Flash anyways.

What to build next…

I know that makes no sense but basically I started thinking with all this hype around HTML5 and Canvas I better try to build something in HTML5 and Canvas in order to know what it’s all about. With HTML5 and Canvas being touted as the “Flash Killer” I decided to try and see if it was possible to build the Voxel Engine using Javascript and the Canvas tag.

Here is a short video of the Javascript Canvas based Voxel Engine running in Safari:

You can see it in action by clicking below.
However we recommend that you use Safari or Google Chrome:
Click Here To See It in Action

This was an interesting experiment but from this I can say that right now HTML5 and Canvas is NOT yet the “Flash Killer” it’s being touted as. The performance on this experiment is quite a bit lower than what Flash can produce. I mean it doesn’t even run in Firefox, and this is the core of the problem with HTML and Javascript for years, browsers just aren’t built the same.