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. 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. Using all three libraries is easy if you have some familiarity with JavaScript. Getting Started Start by importing each library. Setting Up Paper.js Setting Up Processing.js

A Quick Look Into The Math Of Animations With JavaScript Online JavaScript beautifier Raphaël—JavaScript Library chernikovalexey/Kumquat - GitHub Home of the Tagtool Developer Network borismus/pointer.js Olympe Network - Hébergement gratuit et sans publicité - Cloud computing gratuit vesln/jack - GitHub Andy Best | Interactive Media Art, Music and Electronics. Raw WebGL 101 — Part 1: getting started By Erik Möller, Chris Mills Introduction WebGL allows you to create real 3D content and render it in a web browser. WebGL is the web implementation of OpenGL ES2 (Embedded Systems 2), and therefore allows us to run real 3D across any system with a browser that supports it and the graphics capabilities to handle such visually rich content. In web technology terms, WebGL is the 3D drawing context of the HTML5 <canvas> element. This tutorial series, created by Erik Möller in video format (with Chris Mills transcribing to create the written articles), will take you through Raw WebGL (no libraries) from the beginning, building up to more complicated topics with each successive article to help you really understand what is going on under the hood. This article gets you started with the basics, and forms a transcription of the material covered in Erik's WebGL video tutorial from the beginning to time 22:25. Getting prepared To get started with WebGL, and this article series, you should have: if (!

Retina.js | 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" /> The script will check your server to see if an alternative image exists at this path: "/images/my_image@2x.png" How to use JavaScript The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). Place the retina.js file on your server Include the script on your page <script type="text/javascript" src="/scripts/retina.js"></script> (put it at the bottom of your template, before your closing </body> tag) That's it! Steps: Download Download zip Download source Contribute