background preloader

PhiloGL: A WebGL Framework for Data Visualization, Creative Coding and Game Development

PhiloGL: A WebGL Framework for Data Visualization, Creative Coding and Game Development

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 Selected Tools 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

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

8 Visually Impressive Javascript Powered Websites Web design has evolved into a whole new level of sophistication. Flash lost the war and HTML, CSS and Javascript overtook its place. Comparing to flash, flash has its advantages of being consistent across different platforms, and maintainability is lesser than HTML/CSS/JS. However, adobe's decision in stop supporting mobile flash has killed it. With the fall of flash, HTML, CSS and Javascript have became the best alternative solution to cater for both mobile and desktop users. Here in this post though, we aren't talking about responsive layout, it's more about the animation effects and the wow factors that can be done without flash. It's a custom made full screen carousel landing page.

d3.js Magnifying glass for image zoom using Jquery and CSS3 View codePlay Walkthrough Description Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action. The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.