ASK KEN™ - Visual Knowledge Browser. Wiki visualisations with JavaScript: Processing.js and Raphaël · Matt Ryall’s Weblog. Once every few months, Atlassian holds a “FedEx day”.
Developers are free to work on a project of their choosing, with the aim being to deliver something within 24 hours. For the October FedEx day, I wrote some visualisations for wiki data. My goal was to deliver some amazing visuals which could be applied to any data set. I wanted to explore the potential of two great new graphics libraries for JavaScript: Processing.js and Raphael. The specific data I used wasn’t really so important, but in this case I used the last 1000 comments on Atlassian’s Extranet. For the live demos in this public example, I’ve changed the titles and usernames in the dataset from the original Extranet ones to some automatically generated usernames and titles from a news website.
Screenshots Here are some screenshots: Comments visualisation Contributors visualisation Activity visualisation Live demos Try these in Firefox 3 or higher: What they mean Tools and tricks. Toxiclibs.js - Open-Source Library for Computational Design. There are several areas where toxiclibs.js stands apart to remain more idiomatic and helpful in the javascript environment.
For a complete description of the conveniences added to toxiclibs.js, read the sugar file in the repository. Some examples of these differences are: loose-typed for working more naturally with javascript objects, no instanceof tests are ever usedtoxi.THREE.ToxiclibsSupport for easing work with Three.jstoxi.color.TColor additions for complete interoperability with CSS and X11 color names.toxi.geom.mesh.OBJWriter's getOutput() for getting OBJ contents back as a string (helpful in js environments that don't have file system access).
Arrays / Collections The Java version frequently uses Collections, Iterators, and java-specific for-loops[2]. Pewpew - int13h.com. Tween.lib - Motion Tweening for Processing.js. The library is based on Philippe Maegerman's Javascript version of Robert Penner's Motion Tweening Library for ActionScript.
To get started, please read the corresponding blogpost. Motion Tweening The example shows the application of two different Tweens for manipulating x and y coordinates of the graphical object. Dry.ly. Kill Demo Want to create cool visuals using CoffeeScript and Processing.js?
Excellent, me too. Read on. Particulars In the end, this sketch weighs in under 70 lines of CoffeeScript, and was a breeze to write. While it doesn’t do anything profound, it is pretty to look at and fun to tweak. Follow this guide and soon, you too can have some pretty in-browser javascript-canvas visuals to play with. Here’s the Demo (reload for new patterns) and the Source Pregame. Processing.js. Fizz by Bloom Processing! Processing is an open source language and environment originally created by Ben Fry and Casey Reas . It started out with the goal of teaching the basics of computer programming in a more visual context but has grown into something so much more. It’s now used by hundreds of thousands of people for learning, prototyping, and professional projects alike.
It’s a pretty big deal these days. Processing seeks to ruin the careers of talented designers by tempting them away from their usual tools and into the world of programming and computation. How can you not love a project with a mission like that? HTML5 Canvas & Processing JS. When I first sat down to redesign my personal site I knew that I wanted to incorporate HTML5 Canvas somewhere in the layout.
The problem was that I hadn't worked with canvas before and had to start from scratch. I went through the pain of learning every aspect of adding text, drawing shapes, importing image, etc... before I found the amazing canvas framework Processing.JS Canvas Basics Adding a canvas element is as simple as adding the below markup. The canvas element alone acts as a block level element with all children hidden without the use of javascript to draw text, objects, images, etc... Obviously we don't want to go adding canvas elements without some type of alternative display for browsers that do not support canvas rendering. First we'll add a link to an HTML5 element shiv for any user with a browser less than IE9 in the <head> portion of our document, adding the <canvas> element to our stack of recognized html markup: <! CSS Styling Canvas. Processing.js. Processing.js. Demos below! As a sort-of reverse birthday present I’ve decided to release one of my largest projects, in recent memory.
This is the project that I’ve been alluding to for quite some time now: I’ve ported the Processing visualization language to JavaScript, using the Canvas element. I’ve been working on this project, off-and-on now, for the past 7 months – it’s been a fun, and quite rewarding, challenge. The full scope of the project can be broken down into two portions: The Processing Language The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. It works “fairly well” (in that it’s able to handle anything that the processing.org web site throws at it) but I’m sure its total scope is limited (until a proper parser is involved).