something in the way

Created by Jürg Lehni & Jonathan Puckey, Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves

Paper.js is based on and largely compatible with Scriptographer, a scripting environment for Adobe Illustrator, originally developed by Jürg and Jonathan and with more than 10 years of development.

Feature overview :
- A Scene Graph / Document Object Model for vector graphics: Work with nested layers, groups, paths, compound paths, rasters, symbols etc.
- The handling and drawing of these graphic items is automatic and optimised, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.
- A well designed and battle hardened Programming Interface.
- There is a good reason for the word Vector in Vector Graphics. Paper.js offers best of breed Vector Mathematics through its core types such as Point, Sizeand Rectangle.
- PaperScript, a simple extension of JavaScript allows the scoped execution of scripts without polluting the global scope, the execution of multiple scripts per page in their separate sand-boxed scopes while sharing the library code, and the manipulation of Point and Size objects using direct math operations as if they were plain numbers.
- Simple, yet elaborate mouse and keyboard interaction.
- Construct paths and manipulate their curves and segments in very convenient ways.
- Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with square ends and miter limits.
- Smoothen curves, simplify path segments by fitting curves through points.
- Simulate dashed strokes which are currently lacking from the Canvas object, at near native drawing speed.

For more information see paperjs.org

Related Posts:

• Textify.it [WebApp, Javascript, iPad, iPhone]
• Hypertext Remix [Scripts]
• Rot.Sketch [WebApp]
• Conductor [WebApp]
• Towards and Beyond [WebApp]
• FlyBaby [Scripts, WebApp]

What follows is a guest post by Olavi Tonisson from Digital Fruit, the makers of LimeJS.

Only few days ago web and mobile developement company Digital Fruit has released under Apache open source licence HTML5 game engine LimeJS. Our desire to create game toolkit was initially driven from lack of tools for developing HTML5 based games generally and specially for touchscreens (iOS, Android). LimeJS’s goal is quite clear and simple: to provide an easy way to build good game experience without thinking about inner workings.

There were two main questions what we tried to solve. First, how to make HTML5 based game experience so close to any Flash game or native game on modern smartphone that regular user will not see difference. Secondly, how to bring development time (and therefore cost) of game to similar level what Flash games enjoy today. I think we succeeded in both of our goals. 

You can go and check it out from Lime JS webpage http://www.limejs.com. 

From the editor: LimeJS looks like another great entry into the HTML5 gaming space.  It is based on the Google Closure library, and supports rendering to both the DOM and to the HTML5 Canvas element.  There are some nice demos of LimeJS here, and an excellent programming guide here.  The code is availalble on Github.

Cocos2D is a game engine similar to Flash in that it is a 2d engine but it natively renders to OpenGL ES.  Cocos2D-iphone was originally a port of Cocos2D, a python game engine.  But the similarities to Flash and DisplayObjects = Nodes, Sprites, Scenes, Layers etc. This helps to port games over fairly quickly or start in productive in cocos2D.

Having this in javascript is a great thing! It runs on html5/canvas/javascript.

What is cocos2d-javascript?

Cocos2d-javascript is a 2D game/graphics engine based on cocos2d-iphone but designed to run in the web browser. It uses the latest features available in HTML 5 allowing real-time rendering of 2D graphics without the need for plug-ins such as Adobe Flash.

While HTML 5 is still new and not fully supported across all browsers it won’t be long before the vast majority of web users are able to enjoy all that it offers. When this time comes cocos2d-javascript will be an excellent way to develop games and applications.

To see a small sample of what is on offer, please check out the demo section.

cocos2d engines are now available on almost all platforms, so if you are building a 2d game and need a 2d engine typically with Box2D physics, cocos2d offers lots of ways to get the game out there with some porting work.

• cocos2d-javascript (web)
  • cocos2D-javascript site
  • cocos2d-javascript at github
  • cocos2d-javascript docs
  • demos
    • Sprites
    • Tile Maps
    • Jump ‘n’ Run
    • Mario demo
    • Breakout demo
• cocos2d-iphone (mobile)
  • cocos2d-iphone site (objective-c)
  • cocos2d-android-1 (java)
  • cocos2d-android (java)
• cocos2d – original python (desktop)
  • cocos2d site
  • cocos2d python download
• cocos2d other
  • cocos2d-x c++ (C++ port for win, iphone, android-ndk)
  • Similar to cocos2d – andengine (android java)

There really is too much to list as this release is feature packed! Of course the most exciting being WebGL and hardware acceleration from our perspective.

Firefox 4 now has WebGL enabled by default. Based on the original 3-D Canvas work by Vladimir Vukićević, this is being

widely implemented in browsers. The WebGL spec is on the short path to a 1.0 release and we’re very excited to see this be used in the wild.

Hardware acceleration has finally arrived even though it should have been in nearly all platforms for web last decade, but we’ll take it.

Firefox 4 supports full hardware acceleration on Windows 7 and Windows Vista via a combination of D2D, DX9 and DX10. This allows us to accelerate everything from Canvas drawing to video rendering. Windows XP users will also enjoy hardware acceleration for many operations because we’re using our new Layers infrastructure along with DX9. And, of course, OSX users have excellent OpenGL support, so we’ve got that covered as well.

The javascript engine JaegerMonkey is comparably fast to SunSpider and V-8 javascript benchmarks and has support for EC5 javascript.

And you might have noticed that it’s really fast. This is the world’s first third-generation JavaScript engine, using Baseline JIT technology similar to engines found in other browsers and kicked up a level with the Tracing engine found in Firefox 3.6. As such, we’re competitive on benchmarks such as Sunspider and V8, but we’re also fast at a whole mess of things that we expect to see in the set of next-generation web applications, hence Kraken.

WebConsole looks like they are joining Chrome and Safari with built in inspection tools similar to Firebug, however Firebug still available.

Firefox 4 will include the Web Console. This is a new tool that will let you inspect a web page as it’s running, see network activity, see messages logged with console.log, see warnings for a page’s CSS, and a number of other things.

Note this that is something that we’ll be including with Firefox 4 directly. It’s not an add-on.

(Also Firebug will be ready for the final Firefox 4 release.)

Firefox 4 has other improvements like layering (in-memory retained layers), caching/scheduling improvements and lots of other performance enhancements.

2011 is looking like the year all this is coming together, at least for Chrome, Firefox, possibly Safari (need WebGL in main release) and IE is still the biggest problem to getting WebGL. At this point WebGL looks like it is still over a year out as it may not come to IE until IE10 or possibly never, the WebGL 1.0 spec is on the fast track though (don’t we all love Khronos? They have been amazing with OpenGL since they took over).  html5 is looking like it will be close to mainstream by the end of this year depending on the install rate of IE9 when released.

The world is waiting to see if Microsoft implements WebGL or tries the old DirectX/D2D only ways.  Nevertheless, getting a push for hardware acceleration and fast renders in 2d/3d is a very sweet direction.

EaselJS is a new library from Grant Skinner that somewhat mimics the Flash display list/display object heirarchy.  It is the result of the game Pirates Love Daisies which demonstrates some great gameplay in html5.

The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers. In our preliminary testing, Easel appears to be fully compatible with iOS, Android, and all major browsers that support the canvas element.

Lots of great javascript libraries have been made public including such contributions as this, Three.js (3d canvas/svg/webgl), Lettering.js (typography), audio.js (audio) and many many others, a complete pipeline is emerging. EaselJS adds to that a helpful flash like api for html5 (<canvas> + javascript).

The API contains these familiar classes for Flash/AS3 developers:

DisplayObject

Abstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects.

Stage

The root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.

Container

A nestable display container, which lets you aggregate display objects and manipulate them as a group.

Bitmap

Draws an image, video or canvas to the canvas according to its display properties.

BitmapSequence

Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.

Shape

Renders vector drawing instructions within the context of the display list.

• EaselJS
• Grant Skinner Post on EaselJS
• EaselJS Examples: game, sparkles, rollover / drag & drop, localToGlobal, globalToLocal, sprite sheets

I’ll admit to being one of those people that, until recently, considered Javascript to be substandard and barely a “real” programming language. My opinion began to shift with the rapid advancement of JS engines like V8 and introduction of powerful HTML5 API’s like Canvas and WebGL. I find myself playing more and more in JS and utilizing my Java/AS knowledge to build experiments. Recently, there has been quite a bit of buzz surrounding Javascript size competitions like JS1k and 10K Apart. JS1k alone has hundreds of quality entries. Of course the cynical Flash developer in me wants play down the excitement of these competitions. After all, very similar results have been produced in even stricter Flash contests for years (look at what @piXelero did in just 140 characters). But we’re talking about frickin Javascript here, and the new plugin-less API’s really are something to get excited about, so count me in.

JS1k only allows one entry, so I had to omit earlier attempts. The first was a Roguelike game that I couldn’t compress enough (best result was 1.35k). The second attempt was a 3D Lorenz attractor which evolved into my actual submission, a 3D twisty Sierpinski Gasket. I used several hacks to fit the entry under 1k, but most of the compression was done in Google’s Closure Compiler.

Update: I’ve implemented the gasket in WebGL as an experiment. The result is amazing, with a cloud of over 1 million points (10 iterations) and a much better FPS.

Check it out!

NOTE: To view WebGL, you’ll need to use a Mozilla trunk nightly build (starting September 18th). Once installed, switch webgl.enabled_for_all_sites to true in about:config. Your OpenGL drivers will also need to be up-to-date. A video of the experiment is included in this post if you’re having trouble installing.

A couple weeks ago, Vladimir Vukicevic posted the first working sample of WebGL, which gives us a glimpse of how JavaScript will access OpenGL ES 2.0. Since then, we’ve seen a number of impressive demos, and it seems GPU accelerated 3D in the browser is finally becoming a reality. This technology deserves attention.

Of course with WebGL in its infancy (even though they’ve been working on it for years), and the spec still in flux, no documentation exists. Learning the API involves scouring sample source and the nsICanvasRenderingContextWebGL interface reference. My OpenGL programming knowledge being limited, I had to use iPhone OpenGL ES 2.0 guides to get me up to speed with the spec. Jeff LaMarche has a fantastic series on the subject, and I decided to use his icosahedron example as a starting point.

It’s a simple low poly test, but I’m rather impressed with the result. And really, who can complain about finally having access to the GPU? Hopefully there aren’t too many roadblocks (ahem, Microsoft/DirectX) in the way before this spec becomes official. Next step for me will be texturing.

Sebastian Deutsch has a nice new experiment that uses HTML5 audio + Processing (which uses Canvas) to visualize Twitter streams sync'd to music.

In their words:

We’ve created a litttle experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen.

The original particle engine was ported from a Flex/AS3 project to javascript. We’re using processing.js for particle rendering on canvas which is a very useful graphics library created by John Resig. The music will only be played if the browser supports the audio tag. To detect if the audio or canvas feature is present we use the awesome modernizr library. We could have used a fallback solution like playing the sound via Flash. But this experiment is about HTML5 – and who needs Flash anyway?