background preloader

Toxiclibs.js - Open-Source Library for Computational Design

Toxiclibs.js - Open-Source Library for Computational Design
There are several areas where toxiclibs.js stands apart to remain more idiomatic and helpful in the javascript environment. For a complete description of the conveniences added to toxiclibs.js, read the sugar file in the repository. Some examples of these differences are: loose-typed for working more naturally with javascript objects, no instanceof tests are ever usedtoxi.THREE.ToxiclibsSupport for easing work with Three.jstoxi.color.TColor additions for complete interoperability with CSS and X11 color names.toxi.geom.mesh.OBJWriter's getOutput() for getting OBJ contents back as a string (helpful in js environments that don't have file system access). Arrays / Collections The Java version frequently uses Collections, Iterators, and java-specific for-loops[2]. var len = mesh.faces.length, i = 0;for(i = 0; i < len; i++){ doSomething( mesh.faces[i] );} This section will occassionally be expanded on. Related:  Node.js | GraphicsGenerators

hapticdata/toxiclibsjs Artsology Click and drag your mouse on the canvas to create different colored rectangular shapes and create a geometric abstract "painting." Each time you make a new geometric shape, a random color combination will appear, so no two paintings will ever be the same. Experiment with different designs, whether you overlap them or keep them separate. If you come up with something you really like, take a screen shot and send it to us and we'll start a geometric art gallery. If you want some inspiration, scroll down below the canvas and check out some geometric art paintings from famous artists. Clear your canvas and start a new painting Here's a few examples of geometric abstract art painted by famous artists:

Wiki visualisations with JavaScript: Processing.js and Raphaël · Matt Ryall’s Weblog Once every few months, Atlassian holds a “FedEx day”. Developers are free to work on a project of their choosing, with the aim being to deliver something within 24 hours. For the October FedEx day, I wrote some visualisations for wiki data. My goal was to deliver some amazing visuals which could be applied to any data set. I wanted to explore the potential of two great new graphics libraries for JavaScript: Processing.js and Raphael. The specific data I used wasn’t really so important, but in this case I used the last 1000 comments on Atlassian’s Extranet. For the live demos in this public example, I’ve changed the titles and usernames in the dataset from the original Extranet ones to some automatically generated usernames and titles from a news website. Screenshots Here are some screenshots: Comments visualisation Contributors visualisation Activity visualisation Live demos Try these in Firefox 3 or higher: What they mean Tools and tricks Where raster graphics falls down is with interactivity.

Rekapi - A keyframe animation library for JavaScript Aleph Null: Color Music -- Jim Andrews Jim Andrews: concept, programming, design Jan Odvárko: color-picker Thanks to Regina Célia Pinto, David Jhave Johnston, Ted Warnell, Maarten van Emden, Christine Wilks of JSArt, and the British and Irish Poets List--especially David Bircumshaw--for feedback during dev. Aleph Null is my first piece with the new HTML 5 canvas tag which requires no plugins and works in all modern browsers, including mobile phones. Aleph Null is color music. Here is a slidvid of Aleph Null stills. Many artists have created works that construct some sort of visual music in which there is no audio. In particular, Ben F. ERASE: The 'e' key erases the canvas and changes the path the shape follows. 'Aleph null' is the first and most homely order of infinity. On the PC, Firefox provides the highest framerate. A friend reports that Aleph Null performs quite well on the Mac. I like running Aleph Null at around 30 frames per second, myself. Creating Aleph Null has been part of a re-tooling process for me.

Tween.lib - Motion Tweening for Processing.js The library is based on Philippe Maegerman's Javascript version of Robert Penner's Motion Tweening Library for ActionScript. To get started, please read the corresponding blogpost. Motion Tweening The example shows the application of two different Tweens for manipulating x and y coordinates of the graphical object. Color Tweening Tweening is not restricted to motion. In the wild Here's the result of my animated donut chart, which will be integrated in the next version of ASKKEN™. Misc There are no limitations. If you spot some bugs please add them to the issue tracker.

Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! I need ... a base framework. a DOM utility. templating. CSS animation. JavaScript animation. a CSS selector engine. data manipulation. a Class system. functional programming. a JavaScript loader. to test stuff (e.g. unit testing). to validate stuff. to write a game. to do CANVAS/2D graphics! to convert colors. to create searchable & sortable lists. single page apps. persistent storage. client-side MVC. feature/browser detection. events! WebKit-specific libraries. mobile-specific libraries. libraries for responsive designs. polyfills. analytics. hyphenation. asynchronous programming to compose my own framework! to code a site listing micro-frameworks! Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! How much library code do you really need — 50K? Sure, we all love our favorite monolithic frameworks, and sometimes we even use them fully. Micro-frameworks are definitely the pocketknives of the JavaScript library world: short, sweet, to the point. Want to add your own? Can't get enough?

worms Recommended Version 7 Update 55 Select the file according to your operating system from the list below to get the latest Java for your computer. By downloading Java you acknowledge that you have read and accepted the terms of the end user license agreement <p><span class="termhighlight">In order to optimize your experience and provide you with accurate messages, please enable javascript in your browser for the duration of your Java installation.</span></p> What is Java? Java allows you to play online games, chat with people around the world, calculate your mortgage interest, and view images in 3D, just to name a few. » What is Java FAQ» More information about Java Java software for your computer, or the Java Runtime Environment, is also referred to as the Java Runtime, Runtime Environment, Runtime, JRE, Java Virtual Machine, Virtual Machine, Java VM, JVM, VM, Java plug-in, Java plugin, Java add-on or Java download. Kill Demo Want to create cool visuals using CoffeeScript and Processing.js? Excellent, me too. Particulars In the end, this sketch weighs in under 70 lines of CoffeeScript, and was a breeze to write. While it doesn’t do anything profound, it is pretty to look at and fun to tweak. Follow this guide and soon, you too can have some pretty in-browser javascript-canvas visuals to play with. Here’s the Demo (reload for new patterns) and the Source Pregame I’ll be using BaseJSApp to start. Grab your friends First, we need Processing.js. We won’t be pre-compiling our CoffeeScript with node. Now, create a new CoffeeScript that we can work on. Some HTML Put three new script tags in /index.html linking to Processing.js, the CoffeeScript compiler, and the .coffee file: <! If you’re using BaseJSApp or Sinatra as the webserver for this app, you’ll need to tell sinatra/rack how to handle .coffee files. Pulses Processing.js relies on canvas for its awesome drawing skills. <! Easy. a Quick note on Processing Color

Shifty! Shifty is a JavaScript tweening engine designed to fit any number of tweening needs. Its features include: Speed: Shifty is optimized for performance. Playback control (play/pause/stop) Extensibility: Shifty's Tweenable object works well as the base in a prototype chain. Small download size: The standard distribution (which includes all extensions) is less than 2Kb when minified and gzipped. The core of the library (shifty.core.js) is less than 1Kb. Shifty is an excellent animation solution for scenarios in which jQuery's animate() function is either unavailable or insufficient. Another use for Shifty is computing single, specific frames of a tween, as it is used to do in Rekapi and Joe Lambert's Morf library. If used without an AMD or CommonJS script loader, Shifty exposes only one object globally: Tweenable. This snippet tweens the x variable from 0 to 10 over one second, and then alerts the final value. Please fork, use and contribute to Shifty!