Projects

Processing.js

Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code ... [More] using the Processing language, include it in your web page, and Processing.js does the rest. It's not magic, but almost. [Less]

Paper.js

The Swiss Army Knife of Vector Graphics Scripting

svgweb

OverviewSVG Web is a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari. Using the library plus native SVG support you can instantly target ~95% of the existing installed web base. Once dropped in you get partial support for SVG 1.1 ... [More] , SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript, and more in about a 60K library. Your SVG content can be embedded directly into normal HTML 5 or through the OBJECT tag. If native SVG support is already present in the browser then that is used, though you can override this and have the SVG Web toolkit handle things instead. No downloads or plugins are necessary other than Flash which is used for the actual rendering, so it's very easy to use and incorporate into an existing web site. Please keep in mind that SVG Web is in alpha. If you find something file an Issue. One Minute Intro DemosDraggable photos demo (scripted with JavaScript + SVG Image tag) Bouncing ball demos: 1, 2 Draggable videos demo with live video playing (scripted with JavaScript + Video tag) Animated Scimitar using Audio tag and Animation (SMIL) tags Simple animation using animation tags (SMIL): 1, 2, 3 Animating video using tags (SMIL + Video) Animated SVG Open banner with gradients, user-defined fonts (SVG Fonts), and animation (SMIL) tags Defining and using custom fonts (SVG Fonts) demo Complex static images: tiger, sporty car, techy car Using viewer to render clip art: Android logo, Cartman, Mono logo Falling blocks game; shows direct embedding SVG into normal non-XHTML HTML 5 and then scripting it with normal JavaScript Simple 'hello world' showing how to direct embed SVG into normal, non-XHTML HTML 5 Simple 'hello world' showing how to use the OBJECT tag (including for IE) to embed SVG Simple sample showing how to direct embed multiple SVG into your page Simple sample showing how to embed multiple SVG OBJECTs into your page and then style them with CSS SVG 1.1 test suite modified to use SVG Web instead More demos can be seen with the demo viewer; keep in mind that not all of the demos in the demo viewer work. Getting StartedA Quick Start guide is available to get going fast. More in-depth technical documentation is also available once you have read the Quick Start guide. Also, if you are using SVG Web in your own project please add yourself to the ProjectsUsingSVGWeb page! VideosSee a Tech Talk at Google recently on SVG Web and Open Web Advocacy from Brad Neuberg, a member of the Open Web Advocacy team at Google: What's NewNovember 23rd, 2009: New ReleaseJust in time for Thanksgiving is another SVG Web release. Our tradition is to name SVG Web releases after monsters from D&D just to increase the geek factor, so in that spirit our release name this time is "Gelatinous Cube": The Gelatinous Cube is a truly horrifying creature: "A gelatinous cube looks like a transparent ooze of mindless, gelatinous matter in the shape of a cube. It slides through dungeon corridors, absorbing everything in its path, digesting everything organic and secreting non-digestible matter in its wake. Contact with its exterior can result in a paralyzing electric shock, after which the cube will proceed to slowly digest its stunned and helpless prey." Fun times. Highlights of this release, thanks to many many people helping with patches, bug testing, and more: Loads of important bugs fixed Performance improvements You can now dynamically create new SVG root tags All the namespace aware functions now implemented: setAttributeNS, getAttributeNS, etc. You can now clone SVG nodes (cloneNode) You can now right-click on the SVG when using Flash to view the dynamic updated SVG source Running getElementsByTagNameNS scoped to a particular node now works, such as myGroup.getElementsByTagNameNS(svgns, 'text') and much much more The full list of issues fixed:  Issue 358 : Opera throws exception on patch to currentTranslate  Issue 413 : Implement node.getElementsByTagNameNS scoped by container node  Issue 401 : currentTranslate.setXY does translate the svg, but doesn't affect currentTranslate.getX or getY  Issue 201 : Support cloneNode  Issue 385 : Implement getAttributeNS  Issue 384 : Make sure ownerDocument defaults to 'document'  Issue 386 : Implement hasAttributeNS and hasAttribute  Issue 387 : Implement removeAttributeNS and removeAttribute  Issue 202 : Programmatically Creating the SVG node  Issue 383 : QA on Firefox 3.6 Beta  Issue 335 : Specific SVG file crashes browser when used with SVG Web  Issue 364 : onload event does not fire when image url is a security error  Issue 362 : dynamically applied color should cascade Issue 349: gradients with bounding box cooordinates are positioned wrongly on circles  Issue 371 : Linear gradients incorrectly start at left of screen rather than each circle  Issue 367 : Flash blend mode used for groups is a performance problem and can be avoided generally  Issue 331 : Animations based on events not implemented; problems with transform animations  Issue 275 : Add View Dynamic Source to context menu  Issue 297 : Aspect resolution of viewBox not honored on resize of browser  Issue 238 : SVGImageNode.as should absorb exceptions due to invalid image URL Issue 337: https generates insecure warning with IE6 (FIXED for IE7 and IE8)  Issue 388 : Cannot Add USE elements dynamically  Issue 361 : Text label is stealing mouse click Download the release now and get started! October 12th, 2009: New ReleaseYowsers! It's another release of SVG Web, this time code named Beholder: According to the classic D&D Monster Manual, the Beholder is an "aggressive and avaricious spherical monster that is most frequently found underground." In other words, you don't want to bump into this guy in a back alley. This release, roughly about 1 month of work, has contributions from many users and developers. We've knocked out a bunch of bugs and features. The full release list:  Issue 327  : Patching currentTranslate in causes error in Wikipedia Pan and Zoom tool  Issue 326  : Update config.html tool to test for SVG MIME type  Issue 316  : Background SVG is not being re-drawn on secondary pages for some browsers  Issue 307  : Window resize handler can sometimes throw exceptions on IE if Flash not ready  Issue 308  : Implement currentTranslate and currentScale and have it be a fast path  Issue 312  : For Shelley Powers: Odd error when using within XHTML document: works with Firefox, does not work with any other browser  Issue 176 : Document Makefile dependencies  Issue 233  : (regression) inconsistent size, spacing, flow of rendering  Issue 304  : tspan-tag ignore s coordinates of upper text-tag  Issue 305  : Changing shapes and paths from 'hidden' to 'visible' does not work.  Issue 306  : Regression in test_js1.html: Text that should be hidden is not  Issue 311  : Summation of transform causes shaking and invalid transformations.  Issue 254  : Lamb Animation Sample Doesn't Look Correct  Issue 315  : Reduce the number of Sprites created per Node to increase performance Issue 321: Support for animating path "d" attribute (except interpolation)  Issue 325  : Support data: URL scheme for object tag  Issue 329  : in flash renderer, images get cropped if they are moved programmatically  Issue 330  : in flash renderer, fill with image pattern does not work (programmatically)  Issue 293  : Position of image differs in native vs flash  Issue 207  : Doing transform on image dynamically throws exception  Issue 343  : Support on* events in SVG "use" element.  Issue 344  : Cache image requests for same file Download the new release and read the Quick Start guide. September 16th, 2009: New Release!Hear ye! Hear ye! The SVG Web team has pushed out another release, code named Umber Hulk. Umber Hulk: "A human-shaped creature with gaping maws flanked by pairs of exceedingly sharp mandibles. Despite their bestial appearance, umber hulks possess a significant intelligence and language of their own." Notable highlights of this release: Having Chinese characters in SVG filenames now works getCTM, currentScale, and currentTranslate are now supported, making dragging easier Inline on* style events (onclick, etc.) handlers directly in markup is now supported for SVG OBJECTs Several fixes for IE 8 Several fixes when the DOCTYPE is specified Lots of fixes around resizing an SVG image based on resizing the browser and it's container Fixes to help Shelley Power's Burning Bird site Fixes to help the Wikipedia SVG Zoom and Pan too Fixes to help Michael Neutzes' German Atlas work Fixes to help other developers in the community and much much more. Special thanks to the many people who helped with this one: Rick Masters Jeff Schiller Michael Neutze Shelley Powers Ciaranj Felix Buenemann Le Roux Bernard Glen Bremner Stokes Bradbury.e Richbk Fangqq Please keep in mind SVG Web is still in alpha. Read the full release notes or download the release. See older news. [Less]

setian

this proyect want to integrate signals, electronics, technology, interactivity and arts into a cooperating network where artists, designers, engineers, programers and similar creative people could show and share their interactive and audiovisual artistic works through the web.

setianworks

this proyect want to integrate signals, electronics, technology, interactivity and arts into a cooperating network where artists, designers, engineers, programers and similar creative people could show and share their interactive and audiovisual artistic works through the web.

animachk

I use it to tell me what animation broadcast today and yesterday I hope it can help every one to keep on watching New Animation I'm using Linux(Ubuntu) animachk can run in Linux very well i think it can also run in Windows but I'n not sure it's no problem ... [More] ++++++++++++++++++++++++++++++++++++++++++++ Now the version is: 0.4@2007-05-21 [Less]

jame-javascription-animations-made-easy

Beta Javascript lightweight animation framework. You need just a small amount of the power for a small project? Load just the module you need! Would you like a Class class, Browser class, FX class all in different namespaces? No. Everything is clean in one neat namespace:JAME Don't like the ... [More] name? var flower = JAME; You like verbose code self explanatory or you want neat short code? Use the core modules or the wrapper for a fluent api You hate switching from doc to code, code to doc? Just look at the detailed error messages when you are developing but switch to the lightweight version for the live! Who will use a library if it was not documented? I will certainly not. The actual documentation in English details everything you need to know. You are more comfortable with an other language? Japanese and French will follow soon! Need a feature not in the Core? Browse the plugins and find what you need or even better, ask for it! This library is still in progress so be patient and do not use it yet!! The animations are based on your stylesheet definitions or for further tweaking thru javascript css definitions. FX exampleA simple example of what you can do : //Explanations below code JAME.DOM.Ready(function() { var letters; var animTarget = $J("#main h2.title"); animTarget.txt(function(str){ this.empty(); letters =$J(str.split("")).wrap('span').css({opacity:0,top:-10,position:"relative"}) .filter(function(elm){ animTarget.append(elm); if(/[^\s]/.test(elm.innerHTML)) return true; }).elms; }).mouseover(function(e) { this.removeListeners('mouseover'); $J(letters).tween({opacity:1,top:0},{duration:40}).addListener('onTween',function() { this.removeListener('onTween',arguments.callee); J$("li.title").innerHTML+="boOM"; }); }); }); JAME : Javascript Animation Made Easy Lightweight Easy Fast Unobstruptive /* - Animation created: mouse over the "JAME : Javascript Animation Made Easy" to see its letters jumps up/down one after an other - Explanation of the code below: - we wait for the DOM to be ready ->this fires as soon as we can interact with the dom structure without waiting for assets like pictures to be loaded as with the onload event - then, we get the h2 tag with "title" as a class name - we then get the text within it - empty the element of its content - split each letters to wrap them within a span tag. - we add some css styles to those spans - then we reinsert each span within the title element - in the same time we eliminate the spaces from the animation (animating empty space won't do much) - we get all the spans created/filtered into the letters variable - we added a mouse over event on the title element - when the mouse over event fires: - we remove the listener (in fact all the listeners that may have been attached) right away as we want to animate the letters only the first time - animate each span tags - we listen to the first tweening event fired by the animation and when fired: - we remove the listener - then add the boOM letters into the li tag with "light" as id */ FX Core Features- queueing effects one after an other - bezier curve settings - animation can be defined in your stylesheet (stay DRY) - custom events (onStart, onTween,onComplete,onStop...) - multiple html elements animation made async or sync - easing (transition effects) at the animation level and css property level - animations presets (common fades, slides...) - animation behavior settings (what to do if animations conflict?) We intend to add text effects presets too, soon. Obviously in order to ease the development of the framework, we had to create some helpers: Javascript Extension Core Features- DOM helpers to navigate and manipulate the DOM - Native Event normalisation and extension - Custom Events class (observer pattern) for custom events - Basic queue class - Ajax function with custom events, queue, retry... And to make life even easier: - CSS parser to get what you want easily : $("#animtion > div p") - E4CSS class to deal with the stylesheet definitions - Namespace simulation thru objects Development entirely explained: Don't just use it, learn how to create it! Buggy but hey, you will understand all the inner of it. It will be a real community framework. It is as stated above a Beta... Better wait for it to be at a stable released! JAME RulesHere are a set of rules, JAME will try to stick to : (mostly from :http://dean.edwards.name/weblog/2007/03/rules/) 1. Unobtrusive behavior 2. No globals 3. No native objects extension 4. No over-extension 5. Modular 6. Easy to plug 7. Small 8. Documented 9. Open 10. By all for all In order to extend easily JAME, we use the strategy pattern as a base. (css properties supported are string, numeric, multipart, colors...) Everyone can redefine or create elements using the extension points. Therefore you can extend the library without having to care about the core. Example: You want to use the background-position to do some animation. Create a BackgroundPosition.js file, put it in the JAME.FX.CSS folder and do whatever you need and obviously load it. (well, we have already done this css property for you!) TODO LISTBelow are elements that needs to be implemented/written before we can consider the project ready for a 1.0: - Browser detection facility class - Speed performance improvements (selector parser & animation) - Garbage Collector - Better documentation - Test suite - Fix bugs - Support Opera (?) [Less]

javamote

Javamote is an animation core in javascript which has the goal to make very smooth and advanced animations with just a simple line of code. The project is still in development, and will be free for personal use.

ajaxanimator

A standards-based, online, collaborative multimedia authoring platform. Find updates to the Ajax Animator on my blog: http://antimatter15.110mb.com/wp/ Or try out the app for yourself. http://antimatter15.110mb.com/ajaxanimator

drawarea

Drawarea is digital reincarnation of pencil and paper. Demos and more infoAvailable at drawarea.com