Tutorials galore Tutorials galore The ongoing lack of tutorials is still one of the most pressing issues to resolve for me & everyone else using (or trying to use) these libraries. Add to this the recent lack of updates to this blog, it all might give the illusion the project itself is stagnating. This couldn’t be further from the truth. In fact, the past few months have seen an incredible uptake of interest as well as development effort (93 revisions since beginning of the year), but I’m also close to reaching the point where I’ll impose a temporary new feature freeze as soon as version 0021 has been released within the next 6 weeks. 0022 will most likely be far more focused on a new, much improved system for documentation and a new website… In the meanwhile, I’ve been doing my best to respond to concrete issues & tasks people were trying solve on the Processing forums as well as the issue tracker. List of recent forum threads (including lots of source code), sorted by subject: Geometry Color Rendering Math
dat-gui - Simple UI for Demos Dat.gui is a GUI widget for your demos. It provide way for the user to set parameters of the demo to play with it. It is simple to code, yet cool and minimalist on the screen. It is the blue vuemeters on the screenshot below. How to include it Simply include the library file in your page. How to use it First initialize the object itself. Here is the visual result on the right. Lets configure it and add some variables First we need to store the values of the variables, lets call that params. Let add a variable name interation to the widget. It will add a line in the GUI widget. dat.gui will see params.iteration is a Number and thus guess you want to display a slider for it. Lets Custom it Some More You may be easy be notified of user changes with callbacks. onFinishChange is triggered once the value is changed. You can customize further if needed. You can set up min/max limits and steps. Conclusion I hope this introduction got you excited about DAT.GUI.
Travel Time Tube Map (Built with Processing) Click on a station to see the London Underground map reorganise around the times of travel from that station. Shortest paths are used to place the other stations - radius is proportional to time to travel, and angle should be correct for as-the-crow-flies direction on a map. The concentric circles are at 10 minute intervals. Press 'g' to get back to the geographical tube map. NB:- times may not be accurate! Inspired by Oskar Karlin's reworking of the tube map around the time to travel from Elephant and Castle, and Rod McLaren's subsequent sketch 10 Minutes tube travel from Oxford Circus. Lots of things that need improving... Would be nice: a key for the different lines search for stations (type into the applet) list out the shortest path between two stations (not including time to change) sort out the 'white dot' connecting stations to match the proper tube map proper DLR times to travel (just used 2 mins for everything - tube ones are better) display travel card zones etc. Wishlist:
Timeline.js Timeline.js is a compact JavaScript animation library with a GUI timeline for fast editing. Again? Why? As with ActionScript3 there exist many animation libraries for JavaScript. simple apiworks easily both for short animations fired by e.g. mouse events and for long sequences Additionally there is the same problem with procedural animation coming over and over again: tweaking by hand (edit -> save -> refresh)hardcoded values And, Yes. Wouldn't it be easier to use graphical timeline like in Flash or After Effects? Meet Timeline.js Let's say we have a rect object with x and y properties and we want to animate x to 50 over 1s. Thant's it. If we want to edit this animation using graphical timeline just add the timeline-gui.js file This time I had to add "rect" string as a first parameter that will be used as an animation track name and is required for code export. Now we can: What Timeline.js doesn't do Notes Example Download
dat-gui - A lightweight controller library for JavaScript. A lightweight graphical user interface for changing variables in JavaScript. Get started with dat.GUI by reading the tutorial at Packaged Builds The easiest way to use dat.GUI in your code is by using the built source at build/dat.gui.min.js. In your head tag, include the following code: Using dat.GUI with require.js Internally, dat.GUI uses require.js to handle dependency management. Then, in path/to/main.js: require([ 'path/to/gui/module/GUI'], function(GUI) { // No namespace necessary var gui = new GUI(); Directory Contents build: Concatenated source code. src: Modular code in require.js format. Building your own dat.GUI In the terminal, enter the following: $ cd utils$ node build_gui.js This will create a namespaced, unminified build of dat.GUI at build/dat.gui.js To export minified source using Closure Compiler, open utils/build_gui.js and set the minify parameter to true. Change log Migrated from GitHub to Google Code. Thanks
Pixastic: JavaScript Image Processing processing particle library We started to merge all the physic based processing sketches into one library. This is the first version of the Particle library for Processing (still buggy and not yet complete). It is a simple mass-and-force simulation, based on fundamental physical laws. The library makes it possible to explore the physical and material-specific ideal of complex forms and structures. you can download a zip file including the library and two processing examples and the source code here. Labels: download, particles Raphaël—JavaScript Library Beads Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael Advertisement Before drawing anything in a browser, ask yourself three questions: Do you need to support older browsers?If the answer is yes, then your only choice is Raphaël. Paper.js, Processing.js and Raphaël are the leading libraries for drawing on the Web right now. Choosing the right framework will determine the success of your project. All of the code in this article is open source and can be run on the demo page that accompanies this article. Overview It’s all JavaScript once the page runs, but the frameworks take different paths to get there. PaperScript is a JavaScript extension that makes it possible to write scripts that don’t pollute the global namespace. Processing.js is based on a framework named Processing, which runs in the Java Virtual Machine. Using all three libraries is easy if you have some familiarity with JavaScript. Getting Started Start by importing each library. Setting Up Paper.js Setting Up Processing.js Setting Up Raphaël Now we can start drawing. Paper.js: Raphaël:
d3.js Getting Started with Processing.js Recently John Resig released Processing.js. Its a pretty interesting project, which allows Processing code to be run in the browser. This article is a quick look at why it is worth checking out, and ends with a tutorial explaining how to get started. Why Does Processing.js Matter? I see (at least1) two reasons why translating Processing.js is important. The first is that Processing's philosophy and syntax have never felt like a good match. Downloads Processing.js is pretty easy to get up and running with, but first we have to download a few files. First, you will need to grab a copy of processing.js. Setting Up Now that we have the files we need, we'll need to throw together a hasty development environment. Next, copy or move the processing.js file you downloaded into the directory you just created. Third, in that same folder, create an empty file called init.js. Now all we have left is to create is a simple html file. Using Processing.js So, lets put together the html template. Wrapup
Chord Diagram Chord diagrams show directed relationships among a group of entities. This example also demonstrates simple interactivity by using mouseover filtering. Layout inspired by Martin Krzywinski ’s beautiful work on Circos . Source Code 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 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). The language includes a number of interesting aspects, many of which are covered in the basic demos. Note: There’s one feature of Processing that’s pretty much impossible to support: variable name overloading. The Processing API Download How to Use Demos