Entries in canvas (1)


London Web Standards – Fun & Games

This evening I went along to the London Web Standards meet up – a monthly event focusing on well, web standard type stuff.

These are my notes from the evening which I've tidied up a little bit but quite probably contain some inaccuracies that I'll try and iron out later!

David Powers – Adobe Dreamweaver

The first of the three speakers was David Powers who took the 5 minute 'micro-slot' to enthuse about the merits of the recently announced Dreamweaver CS 5.5.  At the outset David stated that "those people who say they don't like Dreamweaver have either not used it for a while or they're using it incorrectly" – I've not used Dreamweaver partly through never having had the need (a caveat to any inaccuracies in this post is that I'm not a developer) and partly due to fear of what the likes of Paul Downey might say if I were to use it!

In his talk David stated that Dreamweaver has made great advancements in becoming more compliant with web standards, although it was not 100% of the way there.  The latest version would allow you to work fully in code view and had support for CSS3 functionality such as font-face and drop shadows.  Within the code view there's an option to switch to a dialogue box of sliders allowing you to change values with great ease whilst simultaneously viewing the effects of those changes on a live page.  This combined with the code-hint functionality (which auto-suggested IDs and Classes from the project along with CSS Selectors) looked pretty cool, although from my limited experience I'm not sure what value it gave over say a browser plugin such as Firebug?

I'm not sure that Dreamweaver is for me but I can certainly see there's an audience for it.  David's closing remark was "if you've not used Dreamweaver for a while I reckon it's worth a quick look, you may be surprised".

Rob Hawkes – HTML5 Multiplayer Gaming

Next up was Rob Hawkes who announced as of next month will be joining the team at Mozilla.  Rob gave the talk "Multiplayer Gaming with HTML5 & JavaScript" and asked the question "are we ready?" 

Rob covered some of the technologies available for HTML5 multiplayer gaming, talked about some of the current issues and identified potential solutions.  I have to admit that a lot of what Rob covered went over my head but I certainly felt excited about the future possibilities and in particular the open-web nature was of great appeal.

In term of the technologies Rob spoke of three main elements:

  1. Canvas – a part of HTML5 allowing for dynamic, scriptable rendering of shapes and images
  2. WebSockets – facilitates a real time two-way stream of data between the client and the server
  3. node.js – server side JavaScript to process and stream information

It is through identifying these technologies that some of the issues become apparent.  For example;

  • WebSockets has recently been pulled from the latest Firefox build and is only supported by webkit browsers.
  • slow internet connections cause latency issues which render multiplayer gaming impossible
  • even the simplest of games can quickly evolve to having a huge amount of data communicated between the server and client which quickly causes issues with rate limiting
  • being based on open web technologies this does leave your game vulnerable to hacking/cheating

Thankfully Rob was able to offer some advise as to potential solutions to some of these problems;

  • the use of Socket.IO provides a useful fallback to Flash or Comet whenever WebSockets is not available.  This may not be ideal but will help get you out of some tricky situations
  • look at where you can compress your data.  As WebSockets only sends data as text you can afford to cut strings down through removing things like fullstops and replacing certain characters.
  • when it comes to people trying to cheat or manipulate your game you should view this as a positive thing! Think of it as free testing and use it as an opportunity to identify loopholes in your game.
  • If you are concerned about people manipulating your game moving the logic to the server side will help (providing of course that your server is secure).  In doing this you should also apply "server authority" rules, i.e. whatever the server says is right and whatever the client says cannot be trusted.

Rob summarised by going back to his initial question - are we ready?  The answer – sort of.  The technology and know how are both there but there is also so much that can be improved upon.

Seb Lee-Delisle – Creating JavaScript Visual Effects

Image from: Seb Lee-DelisleSeb is someone whom I'd not heard talk before and having managed to miss him at SXSW this year I was delighted in seeing him at the meetup this evening.

His talk was really a teaser for what you'd get from attending his two day workshop "Creative JavaScript" – and based on this evening its a course I'd love to attend.

Although best known as a Flash guy, Seb's passion is around creating things of a visual and interactive nature regardless of the technology.  This evening through a combination of some previously built demonstrators and some live coding Seb demo'd some of the advanced particle effects you can do with canvas.

We moved at quite a pace and the focus was more on showing rather than telling so I'll simply point to some of the demo's available online:

  1. An array of particles
  2. Image particles – move the mouse around and click to make pretty things happen
  3. Smoke effect
  4. Smoke effect with rotating images
  5. Particle forces – click to add more circles
  6. 3D particle forces

Incase you're interested in taking a close look Seb has the source code for these demos are up on Github.

Seb's final message were some very wise words: "warning: with great pixel power comes great responsibility, just because you can do it with JavaScript doesn't mean you should".