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: As you can see, the paper.js is included after which you add your code file under “type=”text/….” Working with Predefined Shapes Paper.js allows you to use predefined shapes of varying dimensions and create path items and segments. var myCircle = new Path.Circle(new Point(300, 70), 50); myCircle.fillColor = 'black'; This piece of code creates a black circle with a radius of 50pts and at the x position of 300 and a y position of y. To create a rectangle, you pass the “Rectangle” constructor the same way as a circle as shown below: Creating Interaction Creating Animations function onFrame(event) { }
Dominikus Baur Interfacery - Data Visualization - How to make fast animated HTML5 visualizations Update: Jeremy Stucki from Interactive Things quickly hacked together an impressive demo of >500 animated, flower-like shapes in SVG - showing that complex animations can also be done using vector graphics. Still, it lacks some of the details (gradients! text labels!) and while working great on a reasonably fast laptop, it's similar in speed to our Canvas-BLI on an iPad 3/iPhone 4S. One thing that people tend to forget in today's HTML5-ed world is how extremely fast Flash actually was and still is. I had to learn the restrictions of HTML5 with the revamp of the OECD's Better Life Index. The OECD Better Life Index (BLI) is an appealing, web-based visualization of various quality-of-life indicators for a set of 36 countries. Every time these settings are changed, the flowers representing the countries adjust by changing their petals' colors and sizes (each petal represents one quality-of-life indicator). Flower animations in the (Flash) Better Life Index (click to see the animation).
Dragan's Blog | Archive | javascript Aka canvas / SVG paradox. This year it will be full 10 years that I officially work for various companies, and i could add 3-4 years of freelancing / solo experimenting to that. Most of that time i spent drawing various data in browser. I visualiszed almost everything, big data sets, small data sets, real time sensory data, API responses, sql queries, you name it – i draw it. Back when i started, everything was done in server side, and just show in the browser, RRD/Cacti was the pinnacle of chart technology, and the Firefox was the best and fastest browser around. Those were early days of JS revolution, prototype was big, and jQuery was the enemy Since browsers were painfully slow those days, the majority of the work was in making the browser as fast as possible, so my first experiments were drawing using Js/DOM combo. Soon enough I had to do some more complex charts and I started exploring, which led me to canvas. What was my problem? What are you supposed to do when you need both?
Paper.js — About Paper.js — The Swiss Army Knife of Vector Graphics Scripting. 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, all neatly wrapped up in a well designed, consistent and clean programming interface. Paper.js is based on and largely compatible with Scriptographer, a scripting environment for Adobe Illustrator with an active community of scripters and more than 10 years of development. Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users. Paper.js is developed by Jürg Lehni & Jonathan Puckey, and distributed under the permissive MIT License. Getting Started First of all, take a look at some of our examples.Download Paper.js or check out the latest version from our Github Repository.Want to learn Paper.js? Overview Browser Support
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. While the game is playable in all modern browsers, the experience differs drastically between them. I have attempted to optimize my code as much as possible, through basic things like reusing assets and freeing objects when no longer needed, so I’m not sure what I could do to improve these issues. Things I would add or fix if I had infinite time and energy:
David White I've been burning the midnight oil on a concept design involving HTML5 and SVG. The idea is to animate a web page background without resorting to Javascript. The concept design can be seen at www.netriver.co.uk/demo/animated-svg-background.html. I think it proves the point nicely about what can be achieved using SVG in this way. NOTE: On Safari and IE9 the background graphic is rendered but he effect doesn't work. How was this done? Create a square and unset it's fill.Clone the square into a single column and move the square to a hidden layer (Inkscape clones use SVG's <uses> tag)Set the colour of the squares in the column and added a colour animation to each, each animation having the same loop time but an offset start time. I also experimented with a mouse-over effect which worked well but not in combination with the colour animation.
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. 01 First create a blank HTML file and, in the <head> tags, link to a blank JavaScript file (main.js in the support files) and the three provided JavaScript libraries: Paper.js (for animating to canvas), DAT.GUI (for controls) and Buffer Loader (for loading multiple sound files). 03 To load individual sounds, an XMLHttpRequest object is used.
How To Create Web Animations With Paper.js Advertisement The Web is just starting to use animation well. For years, animated GIFs and Flash ruled. Text moved and flashed, but it was never seamless. Animations had boxes around them like YouTube videos. HTML5 canvas changes everything about Web animation. The canvas element makes it possible to integrate drawings and animations with the rest of your page. Animations get more power and need less coding when you combine the canvas tag with higher-level libraries such as Paper.js71. Neat Is Easy, But Messy Is Hard Computers love clean. In the real world, even simple things are messy. For this article, we’ll animate dandelion seeds blowing in the breeze. Dandelions are tricky because we all know what they look like: we’ve touched them and blown their seeds off. (Image: Arnoldius4) Our dandelion animation will never reproduce the complexity of the real thing, and it will work better if we don’t try: make it too close to real and it will feel funny. Paper.js Then add a little JavaScript.
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. You get new (advanced) path objects, a scene graph, more efficient draw routines, and performant input / interaction. So, how about that background animation… Looks a lot like an example Rather than jump into the paper.js API set and reference, I started with an example. The code does some pretty interesting things considering how concise the code is. Setting my background to canvas After seeing the demo, I decided I wanted… no had to … set this as a background for my blog. All this does is position the div so that the other elements aren’t “moved” by it, moves it to the back (z-index -1) and then fills the canvas to the size of the screen. Changing the shape: Ahhh!
Animate SVG icons with CSS and Snap How to optimize SVG code and animate an SVG icon using CSS and Snap.svg library. Browser support ie Chrome Firefox Safari Opera 9+ Working with SVG files is not an option anymore. With a huge amount of high definition devices out there, it’s not sustainable to export different sizes of the same bitmap assets and target specific device resolutions through CSS media queries. We need to rely on vector graphics whenever it’s possible. Today’s resource is a very simple icon, that we imported as inline SVG into our index.html file. If you’re new to SVG, here are some great resources to start with: Creating the SVG The easiest way to create an SVG illustration is to use graphic editors such as Adobe Illustrator or Sketch. Take in mind, though, that the way you organize your layers in your graphic editor is gonna affect the code output. While exporting .svg from AI, default settings work just fine. Some points to take in mind while creating SVGs in a graphic editor: Optimizing SVG code That’s it!
How To Create Web Animations With Paper.js The Web is just starting to use animation well. For years, animated GIFs and Flash ruled. Text moved and flashed, but it was never seamless. The canvas element makes it possible to integrate drawings and animations with the rest of your page. Animations get more power and need less coding when you combine the canvas tag with higher-level libraries such as Paper.js71. Neat Is Easy, But Messy Is Hard Link Computers love clean. In the real world, even simple things are messy. For this article, we’ll animate dandelion seeds blowing in the breeze. Dandelions are tricky because we all know what they look like: we’ve touched them and blown their seeds off. (Image: Arnoldius4) Our dandelion animation will never reproduce the complexity of the real thing, and it will work better if we don’t try: make it too close to real and it will feel funny. Paper.js Link Drawing simple shapes with the canvas tag, without any special drawing libraries, is easy. Then add a little JavaScript. Drawing The Seeds Link
Animating SVG with CSS There isn't just one way to animate SVG. There is the <animate> tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We're going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS. I played with this personally recently as my Alma mater Wufoo was looking to freshen up the advertising graphic we're running here. The finished product is pretty simple. Let's check out how it's done. 1. This might seem like an how to draw an owl moment, but this article is about animation so let's get there as quickly we can. My plan for this ad was to make a super simple Wufoo ad with their classic logo, colors, and general branding. Make the letters kind hop off the page a little. I put all the parts together in Illustrator. Notice how the logo and tagline text are outlines. When I save this out from Illustrator, that will be left as a <text> element. 2. Illustrator can save this directly as SVG: 3.
Paper.JS - mosaïque de pixels animée - Pixup Paper.js / HTML5 - canvas / Javascript Tout premier essai de la librairie Paper.js Attention, navigateur compatible HTML5 obligatoire (exit IE8 donc) Déplacez votre souris sur la mosaïque pour la mélanger. Cliquez pour ranger les pixels ; cliquez à nouveau pour les libérer. Cette mosaïque est composée dynamiquement à partir de Pour en savoir plus sur Paper.js, c'est par ici Pour retourner à l'accueil du Workshop, c'est par là