Animated JPEG. How To Make Interactive And Generative Animations Using WebGL. Nick Briz is a new media artist and educator whose work and writing explores digital culture and experimental new media. He's written about remix culture and digital rights and is co-founder of the annual GLI.TC/H festival. He (along with Branger_Briz) is also the inventor of the _playGnd animation tool which lets users create 3D animations in their browser. In the video above Briz gives a tutorial on how to get started with this tool, which you can read more about below. After you've had a watch and a read, head on over to _playGnd and then please submit your own sketches to us by email and we'll showcase the best on the blog. "an interface is not a thing; an interface is an effect [...]
Ideology is 'modeled' in software" — Alexander Galloway the threejs_playGnd is a digital literacy (agency) artware + ntro to three.js/webGL (interactive/generative 3D in the browser) which is modeled after an experimental new-media art ethic. "Software is the medium that is not a medium. [...] How To Make Interactive And Generative Animations Using WebGL. Snap.svg - Home. Edit fiddle. Edit fiddle. Svg.js. A lightweight library for manipulating and animating SVG. Svg.js has no dependencies and aims to be as small as possible. Svg.js is licensed under the terms of the MIT License. See svgjs.com for an introduction, documentation and some action. Usage Create a SVG document Use the SVG() function to create a SVG document within a given html element: The first argument can either be an id of the element or the selected element itself.
By default the svg drawing follows the dimensions of its parent, in this case #drawing: var draw = SVG('drawing').size('100%', '100%') Checking for SVG support By default this library assumes the client's browser supports SVG. If (SVG.supported) { var draw = SVG('drawing') var rect = draw.rect(100, 100) } else { alert('SVG not supported') } SVG document Svg.js also works outside of the HTML DOM, inside an SVG document for example: Sub pixel offset fix By default sub pixel offset won't be corrected. Var draw = SVG('drawing').fixSubPixelOffset() Parent elements returns: SVG.Doc. EASY PIE CHART by rendro. Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices.
Update pie charts Browser support This plugin supports all major browsers that support the canvas element. With excanvas you can even render the charts on IE 7+8. Get started To use the easy pie chart plugin you need to load the current version of jQuery (testet with 1.7.2) and the source (css+js) of the plugin. Bower install jquery.easy-pie-chart Then just add the following lines to the head of your website: The second step is to add a element to your site to represent chart and add the data-percent attribute with the percent number the pie chart should have: <div class="chart" data-percent="73">73%</div> Configuration parameter Plugin API Credits Changlog. JavaScript Formatting, Pie Charts, SVG Animation - Treehouse Show Episode 66. Edit fiddle. Animating SVG lines. Inka3D. | Coursera. Using Shaders in the Browser with WebGL. Drawing and animation | Computer programming.