paper.js
Get flash to fully experience Pearltrees
Download a copy (PDF) of the Terms and Conditions here . Terms and Conditions of Entry 1. The Creative Circle Awards are open to all those involved in advertising and communication - Advertising Agencies, Production Companies, Advertisers, etc. throughout The UK. 2.
Creative Circle
Paper.js: Vector meets Canvas | Labs Blog
I know I’m not the first to delve into the world of Paper.js, but being such a new technology, i figured it was worth a look. Not to mention that you can do some pretty neat stuff with it on any canvas enabled browser. 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.
Playing with paper.js and background animations | Help I'm trapped in a code factory!
After starting my blog, I got a few comments on my @gguuss twitter account about the animated background that I have. So, I figured I would write a short post about it. What is paper.js? I’m sure that its creators will scoff at me for saying this, but in my simple mind, paper.js takes canvas and makes it better.
Create HTML5 audio visualisations
This tutorial is designed to help you ease your way into the powerful new Chrome Web Audio API, a high-level JavaScript API for processing and synthesising audio in web applications. We will create an app that will loop through a set of provided audio tracks, and draw an audio visualisation to the HTML5 canvas tag. The canvas animations will make use of Paper.js, a powerful graphics library that provides a clean and easy-to-use interface. The goal here is to make beginner and advanced-level developers familiar with the basics of the API, and inspire you to explore the new possibilities of both native audio and animation in the browser. For further reading, here are some resources: Complete Web Audio Specification ; Paper.js ; DAT-GUI ; and Chromium Project .
HTML5 Game: Air Raid Defender – Gary Smith
Welcome to my second attempt at an HTML5 game: Air Raid Defender ! This game was coded in HTML5 Canvas and JavaScript with the Paper.js library. I’ve only used a few of the library’s many features (and pretty much ignored its focus on vector-based graphics in favour of bitmaps) but I found the library vastly simplified basic tasks such as placing image objects on the screen, rotating them, and refreshing and redrawing the canvas with every frame. In this respect it feels like progress over my more rudimentary first HTML5 game . The gameplay itself is straightforward: use the mouse to aim the anti-aircraft gun, and click to shoot. It takes three hits to bring down a plane.
In this experiment we are testing Layers feature of paper.js. We are writing bunch of elements into different layers, changing layer order, and moving layers as we move the mouse for so called “Parallax Scroll”. Se the DEMO here.
Dragan's Blog | Archive | javascript
Paper.js Tutorials Getting Started An introduction into how Paper.js works together with PaperScript and JavaScript.
Tutorials
What Can You Do With Paper.js?
There are many JavaScript frameworks that leverage HTML5. Paper.js is one of these frameworks that uses Document Object Model (DOM) to structure objects in an easy-to-understand manner. It offers creative and neat ways of doing lots of stuff on a Web browser that supports the <canvas> tag. It also offers a new and interesting approach to drawing vector graphics. The basic setup is shown below: <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>
UPDATE 07/20/11: Updated the demo to take better advantage of built-in Paper.js features. UPDATE 07/27/11: Compacted the demo even further utilizing the active layer object. Recently, we’ve been exploring various vector graphics libraries in an order to craft some more compelling data visualizations. I’ll admit, we weren’t too enthusiastic about the prospect of manipulating SVG or learning some strange custom syntax. Fortunately for us, Paper.js was released a few weeks back.
Getting started with Paper.js | Labs
