background preloader

Paper.js

Facebook Twitter

Experiments/paperjs/bouncing_balls.html. Creative Circle. Download a copy (PDF) of the Terms and Conditions here.

Creative Circle

Terms and Conditions of Entry 1. The Creative Circle Awards are open to all those involved in advertising and communication - Advertising Agencies, Digital Agencies, Direct Agencies, Production Companies, Design Companies, Event Companies, Advertisers, Individual Creatives, etc. throughout The UK. 2. It is the responsibility of the entrant to ensure that the commissioning client has the rights to use the intellectual property of the brand advertised. Entries cannot be made without the prior permission of the advertiser/owner of the rights of the advertisement. 3. Enforcement of the Rules. Paper.js. Playing with paper.js and background animations. After starting my blog, I got a few comments on my @gguuss twitter account about the animated background that I have.

Playing with paper.js and background animations

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! Paper.js. 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.

Create HTML5 audio visualisations

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. 02 To set up the audio, first create an instance of AudioContext with the call new webkitAudioContext(). HTML5 Game: Air Raid Defender – Gary Smith. Welcome to my second attempt at an HTML5 game: Air Raid Defender!

HTML5 Game: Air Raid Defender – Gary Smith

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. 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. Dragan's Blog  Aka canvas / SVG paradox.

Dragan's Blog 

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. HTML5, CSS3, Javascript - Workshop Pixup. Paper.js – Le couteau suisse du graphisme vectoriel.

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: 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) { } Use Paper.js to create HTML5 interactive vector animations. How To Create Web Animations With Paper.js. The Web is just starting to use animation well.

How To Create Web Animations With Paper.js

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. 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.

Paper.JS - mosaïque de pixels animée - Pixup

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à.