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/

Related:  Javascript

Analog or digital You may have noticed that we’re fond of a bit of retro, so it was hard to resist this pixelated music video from Wildlife Control… from their blog: We were tinkering around with the SoundCloud API late one night several weeks ago and realized we could use the timing events and track comments to make something cool. At the time, we were thinking it would be a quick little animated ASCII thing. 5 Useful Coding Solutions For Designers And Developers Advertisement This post is the the next installment of posts featuring “Useful Coding Solutions for Designers and Developers“, a series of posts focusing on unique and creative CSS/JavaScript-techniques being implemented by talented professionals in our industry. A key talent that any Web designer must acquire is the ability to observe, understand and build on other people’s designs. This is a great way to develop the skills and techniques necessary to produce effective websites. With that in mind, let’s look at some clever techniques developed and used by top professionals in the Web design industry. We can use their examples to develop our own alternative solutions.

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 Getting Started with Processing.js Recently John Resig released Processing.js. Its a pretty interesting project, which allows Processing code to be run in the browser. This article is a quick look at why it is worth checking out, and ends with a tutorial explaining how to get started. Why Does Processing.js Matter?

Retina graphics for your website How it works There are now 4 ways to use retina.js: Automatically swapping out "src" paths on "img" tags. Automatically swapping out background image URLs in inline styles. Manually specifying the location of a high-res image variant. slabText – a jQuery plugin for creating big, bold & responsive headlines I’ve been wanting to attempt a port of Erik Loyer’s slabtype algorithm for quite some time now and seeing Paravel’s fittext jQuery plugin, in combination with a gloriously hassle-free lunch hour gave me the impetus to attempt it. This is the result – resize the browser viewport to see the effect in action. So what does the script do again? Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text. Many, many more examples can be viewed further down the page.

Three.js and Paper.js Showcase Javascript does amazing things every year. Some of the Three.js and Paper.js demos I’m showcasing here should show you how fast javascript has evolved into a language that a lot of developers use today. Three.js and Paper.js both do great things. My personal favorite is Paper.js. It has a really fun factor to it and moves smoothly. 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. dat-gui - A lightweight controller library for JavaScript. A lightweight graphical user interface for changing variables in JavaScript. Get started with dat.GUI by reading the tutorial at Packaged Builds The easiest way to use dat.GUI in your code is by using the built source at build/dat.gui.min.js.

jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready Posted by Maggie on 04/02/2009 Topics: css jQuery jQuery UI About Scriptographer is a scripting plugin for Adobe Illustrator™. It gives the user the possibility to extend Illustrator’s functionality by the use of the JavaScript language. The user is no longer limited to the same tools that are used by most graphic designers around the globe. Scriptographer allows the creation of mouse controlled drawing-tools, effects that modify existing graphics and scripts that create new ones. 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:

Related:  javascript