background preloader

SeuratJS - A Raphaël plugin for creating beautiful pointillized animations.

SeuratJS - A Raphaël plugin for creating beautiful pointillized animations.
Pointillize and Pixelize all on the Client Side SeuratJS is a JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extacting color data from an image of your choice and rebuilding the original with filled graphical primitives in SVG. Seurat makes it extremely easy to alter what primitives are generated (how they look and where they appear) and how they animate. SeuratJS uses the HTML5 canvas to parse color data and, because of this, the library operates entirely on the client side. The Basics (Click the images!)

Related:  Node.js | Graphics

Sketch.js - Simple Canvas-based Drawing for jQuery Sketch.js has been tested on Chrome (OS X), Firefox (OS X), Safari (OS X), Android Browser (Honeycomb 3.1). It suffers significant performance degradation on mobile browsers due to general HTML5 Canvas performance issues. Copyright (C) 2011 by Michael Bleigh and Intridea, Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

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.

JavaScript object creation: Learning to live without "new" In this article, I'm going to discuss object creation in JavaScript using prototypal inheritance as an alternative to the new operator. One significant aspect of JavaScript is that there is rarely a single right way to do any particular task. JavaScript is a loosely-typed, dynamic, and expressive language, which means that there are usually many different ways to accomplish the same task. I'm not saying that the methods described here to create objects are the only correct ways to do so or even the best ways, but I do feel that they are closer to the true nature of the language and will help you to understand what's going on under the covers if you choose to use other methods. To help you better understand these concepts, this article describes the creation of a basic particle system with multiple rendering targets.

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. Building a Spotify App On Wednesday November 30, Spotify announced their Spotify Apps platform that will let developers create Spotify-powered music apps that run inside the Spotify App. I like Spotify and I like writing music apps so I thought I would spend a little time kicking the tires and write about my experience. First thing, the Spotify Apps are not part of the official Spotify client, so you need to get the Spotify Apps Preview Version. This version works just like the version of Spotify except that it includes an APPS section in the left-hand navigator. If you click on the App Finder you are presented with a dozen or so Spotify Apps including, Rolling Stones, We are Hunted and Pitchfork.

Rickshaw: A JavaScript toolkit for creating interactive time-series graphs Graphing Toolkit Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together. See Demo → Built on d3.js It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources A Beginner's Journey I was recently approached by someone at a .NET User Group about how to get started in HTML5, JavaScript, jQuery, CSS3, etc... The developer's primary background was writing thick client Windows applications. I figured the best place to start is to focus on the bare essentials and then work up to more advanced concepts and resources. I started to respond to the developer in an e-mail, but then I remembered what Scott Hanselman said in a recent post and video ... "Instead, consider writing a blog post or adding to a wiki with your keystrokes, then emailing the link to the original emailer."

Cubism.js Time Series Visualization foo7.6 bar−6.2 Adaptive Images Limitations I think this is one of the most flexible, future-proof, retro-fittable, and easy to use solutions available today. But, there are problems with this approach as there are with all of the one’s I’ve seen so far. In the case of Adaptive Images they are these: This is a PHP solution. I wish I was smarter and knew some fancy modern languages the cool kids discuss at parties, but I don’t. colony Colony is a neat little visualisation tool for exploring Node projects and their dependencies using d3.js. Each file is represented as a node in the graph. If one file depends on another, a link is made between the two files. Each file is coloured based on the module they belong to. By hovering over a node, you can see the file's name, the files it depends on (light), and the files that depend on it (dark).

New methods in jQuery 1.6 jQuery is an actively-developed JavaScript library with a fairly rapid release cycle. As well as general enhancements, performance tweaks and bug fixes, new methods are frequently added to the library. In this article we’ll take a look at the new methods that have been added to the 1.6+ release and some of the enhancements. Delaying the ready event with the holdReady() method The holdReady() method is used to delay the firing of jQuery’s ready event, a cornerstone event which is popularly used to execute custom code once the DOM is ready to be manipulated. 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