Animating a Million Letters Using Three.js Introduction My goal in this article is to draw a million animated letters on the screen at a smooth frame rate. This task should be quite possible with modern GPUs. If you're coming from a traditional JavaScript animation background, this all sounds like madness. Writing efficient WebGL code Writing efficient WebGL code requires a certain mindset. But to go really fast, you need to push most of your computation to the shaders. The article's code uses the Three.js library, which abstracts away all the tedious boilerplate from writing WebGL code. Drawing multiple objects using a single draw call Here's a small pseudo-code example of how you might draw multiple objects using a single draw call. for (var i=0; i<objects.length; i++) { // each added object requires a separate WebGL draw call scene.add(createNewObject(objects[i]));} renderer.render(scene, camera); But the above method requires a separate draw call for each object. Setting up the geometry and textures Remaining concerns Summary
WebGL Water Loading... Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytraced reflections and refractions Analytic ambient occlusion Heightfield water simulation * Soft shadows Caustics (see this for details) ** * requires the OES_texture_float extension** requires the OES_standard_derivatives extension Tile texture from zooboing on Flickr
paper.js, canvas, html5 - pinocchio 2012 : les présidentielles 2012 façon Goo - Pixup Paper.js / HTML5 - canvas / Javascript Deuxième essai d'utilisation de la librairie Paper.js Attention, navigateur compatible HTML5 obligatoire (exit IE8 donc) Cet essai est inspiré d'une animation flash réalisée par Andy Foulds encore visible sur son site Déplacez votre souris sur le canvas : pour une fois, c'est vous qui les menez par le bout du nez... Pour en savoir plus sur Paper.js, c'est par ici Pour retourner à l'accueil du Workshop, c'est par là 8 Visually Impressive Javascript Powered Websites Web design has evolved into a whole new level of sophistication. Flash lost the war and HTML, CSS and Javascript overtook its place. Comparing to flash, flash has its advantages of being consistent across different platforms, and maintainability is lesser than HTML/CSS/JS. However, adobe's decision in stop supporting mobile flash has killed it. With the fall of flash, HTML, CSS and Javascript have became the best alternative solution to cater for both mobile and desktop users. Here in this post though, we aren't talking about responsive layout, it's more about the animation effects and the wow factors that can be done without flash. It's a custom made full screen carousel landing page.
Magnifying glass for image zoom using Jquery and CSS3 View codePlay Walkthrough Description Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action. The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.
28 Exciting New jQuery Tutorials & Plugins The open source movement has created a lot of new web developers. Over the past decade it’s been common to work on code projects in a private setup. But libraries such as MooTools and jQuery allow for rapid development of newer plugins and add-ons. In this gallery I’ve collected 28 plugins for jQuery users. CSS3 Swatch Book with jQuery Tablecloth.js Handsontable Complexify Plugin Turn.js Curtain.js PageScroller Sammy.js jQuery Picture jQuery Scroll Path Crafty.js FitVids.JS Blueberry Image Slider Sequence.js Rhinoslider Handlebars.js jStat Bacon timeago Caman.js Popcorn.js simpleCart.js gameQuery.js Spritely Response.js jQuery Vector Maps Blur.js Sigma.js
Augmented Reality with #Processing - Tutorial by Amnon Owed All of the visuals in the above video were created using NyArtoolkit for Processing. NyARToolkit is an augmented reality toolkit built with 100% pure Java. It is derived from ARToolkit-2.72.1. Like Processing itself it’s open source and free! In this tutorial you will learn how to use it to place computer generated imagery correctly onto real world footage. To do this in real-time NyArtoolkit uses markers – black and white images – to determine the three-dimensional position and orientation in the real world. All right so let’s start with the general setup. 1. 2. 3. 4. All right, time to recap. Example 1: Basic The first example is basic, but holds all of the important techniques that are necessary for more advanced uses of the NyArtoolkit. If you input the following image (place it in the sketch’s data subdirectory)… …into the first code example, you should end up with something like this… Example 2: Dynamic Time to get a little more dynamic. Main Sketch ARObject
Hacking for Artists Responsive 3D Panel Layout A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects. View demo Download source Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. Please notice that this is very experimental. Some of the jQuery plugins used for this: jQuery Transit for most of the CSS transitionsModernizr for checking browser support of the CSS properties The placeholder text is from Veggie ipsum. An example for the HTML structure is the following: The first slide, which is a list item, will contain four images in this example. Each element/image can have a data attribute for the transition effect. The structure that we will create dynamically is the following: Each image or element will be wrapped in a division with the class sg-box. The background images will have the style background-size: cover which will make them cover the whole panel. To call the plugin, simply do:
8 Responsive jQuery Slider Plugins Whether you’re already a pro at creating responsive web sites or your just learning what it’s all about, it’s good to have some scripts handy that you can easily integrate into your site. We all know how popular image and content sliders are now, and for good reason. So we decided to round up some jQuery slider plugins that are already responsive – meaning they will adapt to the size of their container. Flexslider FlexSlider is an awesome, fully responsive jQuery slider plugin. In other words, it resizes to fit the screen on which it is displayed, and looks good doing it. Blueberry Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts. unoslider unoslider is a fully responsive, touch enabled, mobile optimized jQuery slider plugin. Responsive Thumbnail Gallery Plugin jQuery Plugin for creating image galleries that scale to fit their container. wmuSlider Elastislide – A Responsive jQuery Carousel Plugin
Prism - coloration syntaxique Encore un outil de coloration syntaxique me direz-vous ! Il est vrai qu'on en trouve pas mal sur le Web : GeSHi (php), SyntaxHighlighter (JavaScript), Pygments (Python). Mais Prism (JavaScript et CSS) apporte d'indéniables avantages par rapport à ces concurrents : il est léger, très simple d'utilisation, facile à styler et extensible par l'ajout de plugins. De plus, il favorise l'utilisation d'une syntaxe HTML sémantiquement correcte : ce sont les éléments code qui sont utilisés pour repérer le code à mettre en évidence. Description et utilisation Téléchargement Prism est composé de deux fichiers uniquement : prism.css et prism.js. Sur cette page vous pouvez choisir (à l'heure ou nous écrivons cet article) : un des 3 thèmes proposés, d'utiliser des fichiers optimisés (réduits) ou non (pour pouvoir les modifier facilement), les langages reconnus (CSS, HTML/XML et/ou JavaScript), les plugins à ajouter. Appel des fichiers Prism Une première ligne sera localisée dans l'entête : <! Conclusion