Animating a Million Letters Using Three.js Introduction My goal in this article is to draw a million animated letters on the screen at a smooth frame rate. This task should be quite possible with modern GPUs. If you're coming from a traditional JavaScript animation background, this all sounds like madness. Writing efficient WebGL code Writing efficient WebGL code requires a certain mindset. But to go really fast, you need to push most of your computation to the shaders. The article's code uses the Three.js library, which abstracts away all the tedious boilerplate from writing WebGL code. Drawing multiple objects using a single draw call Here's a small pseudo-code example of how you might draw multiple objects using a single draw call. for (var i=0; i<objects.length; i++) { // each added object requires a separate WebGL draw call scene.add(createNewObject(objects[i]));} renderer.render(scene, camera); But the above method requires a separate draw call for each object. Setting up the geometry and textures Remaining concerns Summary
Datavisualization.ch Selected Tools Marius Watz | Bio – Marius Watz Marius Watz (NO) is an artist working with visual abstraction through generative software processes. His work focuses on the synthesis of form as the product of parametric behaviors. He is known for hard-edged geometrical forms and vivid colors, with outputs ranging from pure software works to public projections and physical objects produced with digital fabrication technology. Watz has exhibited at venues like the Victoria & Albert Museum (London), Todaysart (The Hague), ITAU Cultural (Sao Paulo), Museumsquartier (Vienna), and Galleri ROM (Oslo). As an educator, Watz has taught workshops at international schools including Universität der Künste (Berlin), Merz Akademie (Stuttgart) and Hyperwerk (Basel). He is currently based in Oslo. Documentation Social media Texts & interviews Lectures Interviews
WebGL Water Loading... Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytraced reflections and refractions Analytic ambient occlusion Heightfield water simulation * Soft shadows Caustics (see this for details) ** * requires the OES_texture_float extension** requires the OES_standard_derivatives extension Tile texture from zooboing on Flickr
All posts Marcin Ignac Data Art with Plask and WebGL @ Resonate My talk at Resonate'13 about Plask and how I use it for making data driven visualizations Fast Dynamic Geometry in WebGL Looking for fast way to update mesh data dynamically. Piddle Urine test strip analysis app Evolving Tools @ FITC My talk at FITC Amsterdam about the process behind some of my data visualization, generative art projects and Plask. Ting Browser Experimental browsing interface for digital library resources Bring Your Own Beamer BYOB is a "series of exhibitions hosting artists and their beamers". Bookmarks as metadata Every time we bookmark a website we not only save it for later but add a piece of information to the page itself. Timeline.js A compact JavaScript animation library with a GUI timeline for fast editing. SimpleGUI SimpleGUI is a new code block developed by me for Cinder library. Cindermedusae - making generative creatures Cindermedusae is quite a special project for me. Effects in Delta ProjectedQuads source code
Gregor Aisch – driven by data paper.js, canvas, html5 - pinocchio 2012 : les présidentielles 2012 façon Goo - Pixup Paper.js / HTML5 - canvas / Javascript Deuxième essai d'utilisation de la librairie Paper.js Attention, navigateur compatible HTML5 obligatoire (exit IE8 donc) Cet essai est inspiré d'une animation flash réalisée par Andy Foulds encore visible sur son site Déplacez votre souris sur le canvas : pour une fois, c'est vous qui les menez par le bout du nez... Pour en savoir plus sur Paper.js, c'est par ici Pour retourner à l'accueil du Workshop, c'est par là Raphaël—JavaScript Library Data Pointed Tutorials Video Tutorials Links to videos that cover the Processing basics. Hello Processingby Daniel Shiffman et al.Short video lessons introduce coding exercises that lead to designing an interactive drawing program. Plethora Projectby Jose SanchezThese video tutorials cover issues of programming and computational design issues in Processing. Text Tutorials A collection of step-by-step lessons covering beginner, intermediate, and advanced topics.
Protovis Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Protovis is no longer under active development.The final release of Protovis was v3.3.1 (4.7 MB). This project was led by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with significant help from Vadim Ogievetsky. Updates June 28, 2011 - Protovis is no longer under active development. September 17, 2010 - Release 3.3 is available on GitHub. May 28, 2010 - ZOMG! October 1, 2009 - Release 3.1 is available, including minor bug fixes. April 9, 2009 - First release on Google Code. Getting Started