background preloader

Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael

Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael
Advertisement Before drawing anything in a browser, ask yourself three questions: Do you need to support older browsers?If the answer is yes, then your only choice is Raphaël. It handles browsers all the way back to IE 7 and Firefox 3. Raphaël even has some support for IE 6, although some of its underlying technology cannot be implemented there.Do you need to support Android? Paper.js, Processing.js and Raphaël are the leading libraries for drawing on the Web right now. Choosing the right framework will determine the success of your project. All of the code in this article is open source and can be run on the demo page that accompanies this article. Overview It’s all JavaScript once the page runs, but the frameworks take different paths to get there. PaperScript is a JavaScript extension that makes it possible to write scripts that don’t pollute the global namespace. Processing.js is based on a framework named Processing, which runs in the Java Virtual Machine. Getting Started Paper.js: (al)

http://coding.smashingmagazine.com/2012/02/22/web-drawing-throwdown-paper-processing-raphael/

Tangle: a JavaScript library for reactive documents Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn. This is a simple reactive document. When you eat 3 drag Retina graphics for your website How it works When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. For example, if you have an image on your page that looks like this: <img src="/images/my_image.png" />

Tutorial: Controlling Processing.js with jQuery UI « Joseph Harrington Years ago when I was first learning to code, I stumbled upon Processing and we quickly became great friends. As it often goes though, the years went by and I started hanging out with bigger and more dangerous languages, and Processing and I drifted apart. Every so often I would think back on the good times we had and wonder what he was up to. But recently we bumped into each other on the street! Well, not exactly – but lately I’ve been catching up with Processing’s web-friendly doppelgänger, Processing.js. If the original Java-based language ever had any shortcomings, it was that sharing your program (or sketch, as it’s referred to in the Processing world) meant exporting it as a Java applet and embedding it in a webpage.

A visual editor for impress.js at Harish Sivaramakrishnan Update : More bug fixes, more stability~ Alpha 3 is now hosted. Do give it a spin. Please note that this is still early and has some distance to go before it can be called stable. Please do log issues on github. Webkit only. Loosely Coupled, Reusable UI Components in Backbone.js This article assumes a fairly good understanding of the Backbone.js MV* library. There is a lot of good material on the web for learning Backbone, including the Backbone home page at backbonejs.org. Intro untitled Source code: Documentation: Introduction Constructive Solid Geometry (CSG) is a modeling technique that uses Boolean operations like union and intersection to combine 3D solids. This library implements CSG operations on meshes elegantly and concisely using BSP trees, and is meant to serve as an easily understandable implementation of the algorithm. All edge cases involving overlapping coplanar polygons in both solids are correctly handled. Example usage:

jq-tiles Pig ham: hock pork loin brisket pastrami frankfurter andouille. Sausage: ground round sirloin ball tip beef ribs. Pork turkey: shoulder, filet mignon chuck t-bone bacon. Learning JavaScript Design Patterns Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Design patterns also provide us a common vocabulary to describe solutions.

Slicebox - 3D Image Slider Creative Lifesaver Honest Entertainer Brave Astronaut Affectionate Decision Maker Faithful Investor Groundbreaking Artist Selfless Philantropist Example 4: Same like example example 3, with a higher disperse factor

Developer Guide: Developer Guide Loading... On this page, you will find a list of official AngularJS resources on various topics. Just starting out with AngularJS? untitled Jump to progress the Jarallax.jumpToProgress method allows the user to animate the Jarallax animation to a position in the animation. This is a very handy method for navigation. Into the Land of Functional Programming with JavaScript Enter JavaScript…Running examplesFunctions are “first-class citizens”Closures and scopesPartial ApplicationMemoizationLazy evaluationNot a functional language but Enter JavaScript… JavaScript is an interesting language. Syntactically it resembles C, C++ and Java, but it was also inspired by a functional language: Scheme, which is a dialect of Lisp.

Related: