background preloader

Programmation

Facebook Twitter

Pixel Distortions with Bilinear Filtration in HTML5 Canvas. InShare4 In this post I want to describe simple methodology of pixel image distortion on “clean” javascript in 2D – Canvas without the use of the special libraries and shaders, by the direct access to the pixels of the image. I hope, it will be interesting and useful both for general development and for the decision of some tasks. Canvas and pixels I will not describe the object of Canvas fully, there is a certain documentation for this purpose. We will stop on the issues that are interesting to us. Firstly, it’s the receipt of 2D context: This context is able to do great things with two-dimensional graphic, including the ability to get the direct access to the pixels in the set area: And we are going to change these pixels.

Function of distortion We will make a few functions for other distortions. Hash-table So, we got the possibility to know, what texels to take for every pixel. Bilinear filtering Conclusion That’s actually all. You can try it in real time on JSFiddle. Advertisement p.s. Using the Fullscreen API in web browsers. One thing which has been very important when it comes to creating special end user experiences have been the ability to show something fullscreen, effectively hiding all the other content etc. Remember when web sites gave you instructions how to configure your web browser with hiding toolbars and more, just to get a slightly better user experience? Or maybe it’s just me… :-) Either way, some time ago we got fullscreen support in web browsers where the user could choose to view the current web site in fullscreen.

That’s all good and well, but as an extension to that, as web developers we want to be able to trigger that. Either for the entire web site or just a specific element. And now we can! Requesting fullscreen We now have access to a method called requestFullScreen, so far implemented in Firefox, Google Chrome, Safari and Internet Explorer.

What the code above does is just getting a reference to the documentElement and request for it to be displayed fullscreen. Cancelling fullscreen. Button Event Attribute. 2D Shadow Effects. Applying shadows using BlendmodeIn Part One we drew out some plain black shadows, but we want to use these shadow shapes for something more than drawing black areas on the screen. As everyone* knows, shadows aren't black but just darken whatever would normally be there. Flash can do this nice and speedily by using BlendModes. Very briefly, the BlendMode of a display object decides how it is drawn on top of other objects. By default everything has BlendMode.NORMAL which just draws objects over one-another.

But there are a wide variety of BlendModes available which vary how the colours of overlapping objects will be mixed or combined to produce the finished image. We are interested in using BlendMode.HARDLIGHT. Easy. Limited range lightsIn Part One we dealt with just drawing shadows in what was assumed to be an infinitely large pool of light. Each frame, instead of just clearing the area you draw the shadows to instead fill it with a dark "ambient light" colour. That's a lot of edges. Box2D tutorials - Introduction - iforce2d. Last edited: April 07 2014 Chinese version -> 中文 Introduction Box2D is the world's most ubiquitous 2D physics engine. It's light, robust, efficient and highly portable. It has been battle-proven in many applications on many platforms, and it's open-source and free.

Check out the Box2D website at A physics engine simulates the physics of objects to give them believable real-life movement. Although it can be used for other applications, the project was born primarily as a library for use in games, and games make up the majority of software using Box2D. Box2D is written in C++, but has been ported to many different languages by the user community.

A physics engine is not a game engine. Box2D C++ tutorials The user manual explains almost everything you need to know about using the library, at least for C++. Looking around on the net, I found some people have already done a pretty good job of this: Basic usage Requirements Dedication Feedback.

Five ways to create objects… 1. Simple Object Literal myApp.notepad = {}; myApp.notepad.writeable = true; myApp.notepad.font = 'helvetica'; myApp.notepad.setFont = function(theFont) { myApp.notepad.font = theFont; } 2. Nested Object Literal 3. MyApp.Notepad = function(defaultFont) { var that = {}; that.writeable = true; that.font = defaultFont; that.setFont = function(theFont) { that.font = theFont; } return that; } myApp.notepad1 = myApp.Notepad('helvetica'); 4.

MyApp.Notepad = function(defaultFont) { this.writeable = true; this.font = defaultFont; this.setFont = function(theFont) { this.font = theFont; } } myApp.notepad1 = new myApp.Notepad('helvetica'); 5. MyApp.Notepad = function(defaultFont) { this.font = defaultFont; } myApp.Notepad.prototype.writeable = true; myApp.Notepad.prototype.setFont = function(theFont) { this.font = theFont; } myApp.notepad1 = new myApp.Notepad('helvetica'); The first two examples are best suited for creation of one-time objects.

All are useful. Like this: Like Loading... Javascript Orienté Objet : syntaxe de base des classes JS à l’intention des développeurs PHP. Ce tuto a pour cible les développeurs qui ont une expérience du PHP (5) et qui veulent se lancer dans un projet Javascript qui dépasse le simple scripting. Cela va donc commencer par savoir écrire des classes en JS. Pour avoir galéré en tant que développeur puis en tant que lead technique avoir formé de bons développeurs PHP à faire des applications Web où le JS représente plus d’un tiers du code et la moitié du temps de dev, j’ai pu constater les énervements classiques lorsqu’on commence à vouloir faire des choses sérieuses en JS.

Le but ici n’est pas de rentrer dans la théorie du langage JS ou même d’être exhaustif (voir à la fin de cet article des ressources qui le font très bien) mais de vous fournir un template pour commencer à écrire vos classes. Quand on arrive du PHP, du C ou même de Java, JavaScript peut être franchement surprenant. Concrètement il y a 2 choses à comprendre pour éviter les erreurs classiques et partir sur une bonne base de code pour programmer avec des objets :

Box2D, Web workers, Better performance. Sponsor: Register today for New Game, the conference for HTML5 game developers. Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco. Register now! WARNING: There is a bug with Chrome 15.0.874.5 dev (and probably earlier in the 15 dev channel series) that fires requestAnimationFrame twice per paint, which leads to very different results that you want. To see this correctly, use Canary or Chrome Stable. (this post should have been called "Fixin' muh shit") Following up on a recent post on Box2D, Web workers, and Page Visibility API, we will now take a closer look at performance with Box2D and Web workers. Intro I was initially pleased with the early work on Box2D and Web workers. Out of sync How to verify GPU Tracing Below is an example of a trace from my MacBook Air: Exactly... huh?

Success! Box2dWeb Tutorials & Demos. WORLD CAMERA. Here we'll learn how to follow a Box2Dweb object with the camera. Box2D does not have a "camera", so we will have to move the stage according to body position. I have used a little bit of css and translate function associated with "canvas". 1) We will create a canvas element inside a div. Here the outer div with id cover will act as our viewport with dimensions 600px x 420px. The canvas has a width of 2000px. 2) Here the body will move only in x direction so this method will work only to keep the body in the center of the screen in x direction. 3) Let's see in Detail. If the object were in the shaded black region, it will not be possible to center the object in the middle of the screen.

Line 7 checks whether the object is in between the two regions. Line 11 - 13 --> But if the object were in the extreme right shaded black region if can't be centered. 4) Lines 38 - 50 deals with movement of camera when the object moves. Line 17 --> Initial position of the object is stored. Programmation objet avancée : la conception avant tout (design patterns à l'emploi) Bonjour à tous, Voici un tutoriel qui a pour objectif d'aider les personnes à mieux cerner ce qui se cache derrière la programmation orientée objet. Moi-même venant d'un langage impératif, il a été plutôt difficile de cerner les penchants et les aboutissants de cette philosophie.

Après un temps d'adaptation on commence à comprendre les mécanismes et comment les objets doivent se lier entre eux. C'est alors en persévérant et en se renseignant sur diverses sources internet (une grande partie imputable à developpez.com) que l'on se rend compte qu'il faut adopter une certaine rigueur et des bons principes pour avoir un code robuste, suffisamment robuste pour qu'une adaptation ne bouleverse pas tout le code en cascade. C'est en glanant principalement des codes créés par les gens de mon entourage et des divers post sur les forums que je me suis décidé à créer ce tutoriel : Apprendre aux gens ce qu'est le paradigme objet (son contexte) pour mieux concevoir vos futurs programmes.

Box2D & JavaScript tutorials by Seth Ladd. A suite of Javascript libraries and tools designed for working with HTML5. Recent Updates Follow @CreateJS November 2014 Added Unit Tests to EaselJSUpdates in preparation for new releases (coming soon). New class model, with big performance increases October 2014 Added 'Extras' to EaselJSTons of updates and pull requests in all libs July 2014 Major Updates to EaselJS Graphics The Story Why we built CreateJS About CreateJS CreateJS is a suite of modular libraries and tools which work together to enable rich interactive content on open web technologies via HTML5. Featured Projects Community Show & Tell. Ion Drift A port of the Flash game Ion Drift, b10b was able to build a CreateJS version in less than a day that hit target framerates on even the lowest devices, and outperformed ports to other libraries.

By b10b b10b.