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. 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 Related:  Javascript

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. 1. Designing a timeline is one of the tasks that frequently need to be solved when it comes to the design of portfolios. How is this done? Here is the HTML: <div class="timeslot"><span>2009</span><p>Duis acsi ullamcorper humo decet, incassum validus, appellatio in qui tation roto, lobortis brevitas epulae. And here is the CSS:

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. Each jumbo pixel in the grid is a plain old <div> with a coloured background, while scenes are broken down into reusable sprites to keep things snappy. Cute 8-bit dinosaurs, robots & zombie dogs all make an appearance, with SoundCloud comments embedded at the correct time-index – a nice touch. I strongly suspect there’s some nice tooling behind this, if the large arrays of data in the source are anything to go by. The song isn’t half bad, either Analog or digital – Wildlife control

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 cookies, you consume 150 calories. This is the HTML for that example. When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>, you consume <span data-var="calories"> calories</span>. And this is the JavaScript. Write your document with HTML and CSS, as you normally would. Try out some examples. Proposition 21: Vehicle License Fee for State Parks The way it is now: California has 278 state parks, including state beaches and historic parks. What Prop 21 would do: Proposes to charge car owners an extra $18 on their annual registration bill, to go into the state park fund. Analysis: Suppose that an extra $18 was charged to 100 % of California taxpayersvehicle registrations. Fc = 2 KHz Q = 0.8 Unstable

A Quick Look Into The Math Of Animations With JavaScript Advertisement In school, I hated math. It was a dire, dry and boring thing with stuffy old books and very theoretical problems. Even worse, a lot of the tasks were repetitive, with a simple logical change in every iteration (dividing numbers by hand, differentials, etc.). It was exactly the reason why we invented computers. These tools and the few geometry lessons I had gave me the time and inspiration to make math interesting for myself. There is a lot of math in the visual things we do, even if we don’t realize it. Going From 0 To 1 Without Being Boring If you’ve just started programming and are asked to go from 0 to 1 with a few steps in between, you would probably go for a for loop: for ( i = 0; i <= 1; i += 0.1 ) { x = i; y = i; … } This would result in a line on a graph that is 45 degrees. A simple way to make this movement a bit more natural would be to simply multiply the value by itself: for ( i = 0; i <= 1; i += 0.1 ) { x = i; y = i * i;} Not A Sin, Just A Natural Motion Want more?

JSONLint - The JSON Validator. 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. Three.js Earth demo Bugatti Veyron Demo Panorama Demo Spherical Harmonics Trails Cube Map Refraction Geometries Geo Metry Video Demo paper.js Chain Smoothing Rounded Rectangles Voronoi Division Raster Nyan Rainbow Vector meets Canvas 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. Calculated and preset word combinations This can be achieved by presetting the word combinations (using <span class="slabtext"> wrappers) within the markup [1] . The following word combinations are calculated by the script

Preview – Impressionist | 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. Update: Impressionist is now on github and will be developed openly. I am a big fan of impress.js framework. )The last few presentations I made were all on impress.js and I was quite blown away by the visually rich stuff that I could create with it. Finally, I made up my mind. Here is the first look of what this tool looks like (no, its not ready for primetime consumption, yet – hence I have right now is a screencast.) I am really looking forward to some help from folks to help me test this out. Note: Some of the bugs show up in the video itself and I am working on fixing them.

Developer Network Tutoriel sur l’API Google Maps avec la géolocalisation HTML5 Ce tutoriel vient en complément au Tutoriel de géolocalisation en HTML5, et vous apprendra à exploiter les informations de géolocalisation que vous y avez obtenu sur une carte Google Maps. Nous allons réaliser une application qui affiche votre position sur une carte et trace votre parcours en suivant vos déplacements. L’API Google Maps Tout d’abord, il est essentiel de bien comprendre ce qu’est une API. Toute application web peut choisir d’autoriser des développeurs tiers à utiliser une partie de ses fonctionnalités. Ces fonctionnalités peuvent être accédées de plusieurs manières : en téléchargeant une bibliothèque de fonctions pour l’inclure sur son siteen récupérant une donnée précise en construisant une URL (Google Charts)En incluant directement la bibliothèque en ligne Concernant Google Maps, on est dans ce dernier cas, c’est à dire qu’on va directement inclure la bibliothèque Google Maps dans notre Javascript. Inclure Google Maps Création de la structure de notre page Et voilà !

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. But Scriptographer is also a webpage on which users can exchange scripts and ideas. Scriptographer gives the tool back into the hand of the user and confronts a closed product with the open source philosophy. If that sounds good to you, download it today. Credits: Main Developer, Concept, API Design and Web Development: Jürg Lehni API Documentation, API Design, Testing: Jonathan Puckey Web Design: Urs Lehni & Jürg Lehni Web Application Server: Headline Font: Superstudio by Jonathan Hares Project supported by ECAL and funded by HES-SO

remybach/jQuery.superLabels - GitHub

Related:  JavascriptwebdevSort - Web/EtcSoftjavascript librariesjavascript