Ajaxian » Canvas http://ajaxian.com Cleaning up the web with Ajax Tue, 22 May 2012 21:45:06 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Normal Mapped Lighting for Photos using Canvas http://ajaxian.com/archives/normal-mapped-lighting-for-photos-using-canvas http://ajaxian.com/archives/normal-mapped-lighting-for-photos-using-canvas#comments Sat, 09 Oct 2010 15:19:14 +0000 Dion Almaer http://ajaxian.com/?p=10427 Francois Laberge has a fun demonstration of creating 3d looking effects via lighting and normal mapping on 2d photos.

The demos progressively add features, from left to right lighting, to glow effects, to a multiple colored lighting extravaganza! Very nice work Francois!

]]> http://ajaxian.com/archives/normal-mapped-lighting-for-photos-using-canvas/feed 9 “Or so they say…” by Mr. Doob http://ajaxian.com/archives/or-so-they-say-by-mr-doob http://ajaxian.com/archives/or-so-they-say-by-mr-doob#comments Tue, 14 Sep 2010 11:00:51 +0000 Brad Neuberg http://ajaxian.com/?p=10228 Read the rest...]]>

Via Mr. Doob comes a cool canvas demo called "Or so they say..." he created. What's interesting about this demo is it uses HTML5 Audio and Canvas, including Mr. Doob's Three.js library and sequencer that he also used on The Wilderness Downtown project.

Three.js is similar to Papervision3D in the Flash world, allowing you to build up 3D scenes. Three.js then draws the 3D scene graphs using either Canvas, SVG, or WebGL. It's a very interesting library, but needs more docs (hint hint Mr. Doob!).

In the "Or so they say..." demo (source), Mr. Doob starts by setting up Three.js, the camera, and the backing renderer:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. container = document.createElement( 'div' );
  3.  
  4. camera = new THREE.Camera( 60, 800 / 600, 1, 20000 );
  5.  
  6. renderer = new THREE.CanvasRenderer();
  7. renderer.setSize( 800, 600 );
  8. renderer.autoClear = false;
  9. container.appendChild( renderer.domElement );
  10.  

The sequencer is then initialized and various 3D and time effects are added; a small snippet:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. sequencer = new Sequencer();
  3.  
  4. sequencer.add( new Vector3TravelEffect( camera.position, new THREE.Vector3( 0, 0, 200 ), new THREE.Vector3( 0, 0, 10000 )  ), keys[ 0 ] - 1, keys[ 1 ] - 1 );
  5. sequencer.add( new Vector3TravelEffect( camera.target.position, new THREE.Vector3(), new THREE.Vector3() ), keys[ 0 ] - 1, keys[ 1 ] - 1 );
  6. sequencer.add( new Part1Effect( camera, renderer ), keys[ 0 ], keys[ 1 ] );
  7.  
  8. sequencer.add( new Vector3TravelEffect( camera.position, new THREE.Vector3( 0, 0, 1000 ), new THREE.Vector3( 0, 0, 400 ) ), keys[ 1 ] - 1, keys[ 2 ] - 1 );
  9. sequencer.add( new Vector3TravelEffect( camera.target.position, new THREE.Vector3(), new THREE.Vector3() ), keys[ 1 ] - 1, keys[ 2 ] - 1 );
  10. sequencer.add( new Part2Effect( camera, renderer ), keys[ 1 ], keys[ 2 ] );
  11.  

The audio is straightforward:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. audio = document.getElementById( 'audio' );
  3. audio.currentTime = keys[ key ] / 1000;
  4. audio.play();
  5.  

Mr. Doob has some notes about performance:

It's all software rendering (no WebGL), so don't expect much performance. It's running at 20-30fps on my Mac Mini Core 2 Duo @ 2.53Ghz with Ubuntu/Linux. If you are running MacOS. I'm sorry to say that it won't run faster than 1fps... For some reason Chrome team decided to use CoreGraphics instead of Skia.

]]> http://ajaxian.com/archives/or-so-they-say-by-mr-doob/feed 0 HTML5 Canvas Image Effects: Black & White http://ajaxian.com/archives/html5-canvas-image-effects-black-white http://ajaxian.com/archives/html5-canvas-image-effects-black-white#comments Fri, 10 Sep 2010 10:30:57 +0000 Brad Neuberg http://ajaxian.com/?p=10184 Read the rest...]]>

Marco Lisci has written a tutorial on creating a black and white image effect using the Canvas tag.

The heart of his tutorial is using getImageData() and looping through the red, green, blue, and alpha values of each pixel to change it's luminance:

So, what can we use to make an image black and white? The luminance. The luminance is how much a color is luminous to the human eye and it’s used to measure the clipping white in video editing systems, for example. In video editing system a white color that “break” the screen is a white that is too white to be represented on a common TV.

This is important because by calculating the average number between red, green and blue values we could obtain a value for every pixel that represent a static mathematical representation of the color luminance.

But there’s a problem, an human eye see colors dynamically. For example, if we take similar shades of blue and green, our eyes will detect the green color more luminous than the blue. In our algorithm we could use the static average formula, but our image will be too flat, and we’ll lose a lot of color depth.

So, let’s introduce the luminance formula: red x 0.3 + green x 0.59 + blue x 0.11.

This formula calculates the luminance of a color as it’s perceived by the human eye, so the green channel has more importance than the red and the blue. In our Javascript code we calculate for every pixel the grayscale number, by using exactly this formula. Then we assign this value to the red, green and blue channels of our pixel. By doing this for every pixel we are able to get a black and white version of our original image. There are obviously other more complex methods to calculate the correct grayscale value, but they could be too heavy to be used in an HTML5 canvas element, and we can say that for an everyday use, the luminance algorithm is good.

Resulting in code that looks as follows:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var imgd = context.getImageData(0, 0, 500, 300);
  3. var pix = imgd.data;
  4. for (var i = 0, n = pix.length; i <n; i += 4) {
  5.   var grayscale = pix[i] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
  6.   pix[i] = grayscale;       // red
  7.   pix[i+1] = grayscale;  // green
  8.   pix[i+2] = grayscale;  // blue
  9.   // alpha
  10. }
  11. context.putImageData(imgd, 0, 0);
  12.  

It would be cool to see this combined as a kind of filter that can be applied to do black and white roll-over effects of elements, similar to what you can do with SVG filters.

[via Mark Mildner]

]]> http://ajaxian.com/archives/html5-canvas-image-effects-black-white/feed 5 Design 3D Models in a Browser http://ajaxian.com/archives/design-3d-models-in-a-browser http://ajaxian.com/archives/design-3d-models-in-a-browser#comments Mon, 30 Aug 2010 11:00:37 +0000 Brad Neuberg http://ajaxian.com/?p=10090 Perfect for a Monday is a cool 3D model editor built using the Canvas tag and created by Jayesh Salvi:

]]> http://ajaxian.com/archives/design-3d-models-in-a-browser/feed 0 View Source Tutorial: Content Site Using HTML5 Canvas + CSS3 http://ajaxian.com/archives/view-source-tutorial-content-site-using-html5-canvas-css3 http://ajaxian.com/archives/view-source-tutorial-content-site-using-html5-canvas-css3#comments Mon, 30 Aug 2010 10:00:56 +0000 Brad Neuberg http://ajaxian.com/?p=10022 Via Phil Franks comes an interesting HTML5/CSS3 site for There Studio, which is a kind of coworking space in London:

The site itself has a number of circles with information bouncing on the screen that respond to mouse clicks and moves.

Let's crack the site open using View Source and see how they are doing things. First, they have a repeated background with a little plus symbol with the following style rule on the <body> tag:

PLAIN TEXT
CSS:
  1.  
  2. background: #ddd url('../images/bg.gif') 50% 0 repeat fixed;
  3.  

The textual content in each of the circles is clean semantic HTML that is search engine friendly:

PLAIN TEXT
HTML:
  1. <div class="section who first">
  2.   <h3>Who</h3>
  3.   <p>Creatives, makers, thinkers <span class="ampersand">&amp;</span> doers</p>
  4. </div>

To turn that into this:

The <h3> is first transformed into having an underline with the padding and margin being on the bottom:

PLAIN TEXT
CSS:
  1.  
  2. h3 {
  3.         border-bottom: 1px solid #ccc;
  4.         display: block;
  5.         font-size: 25px;
  6.         font-weight: normal;
  7.         padding: 0 0 10px;
  8.         margin: 0 0 8px;
  9. }
  10.  

JavaScript creates the circle. The script tags themselves are at the end of the HTML page at the bottom of the <body> tag, a good performance practice in general.

The heart of drawing each circle is in the createBall and createContentBall methods. If a ball will have HTML content, then the createContentBall method is used, otherwise the createBall method is used. Let's look at the createContentBall method; we'll break it down:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function createContentBall(className,size,color,html) {
  3.   var element = document.createElement( 'div' );
  4.   element.className = className;
  5.   element.width = element.height = size;
  6.   element.style.position = 'absolute';
  7.   element.style.left = -size + 'px';
  8.   element.style.top = -size + 'px';
  9.   element.style.cursor = "default";
  10.   canvas.appendChild(element);
  11.   elements.push( element );
  12.   var circle = document.createElement( 'canvas' );
  13.   circle.width = size;
  14.   circle.height = size;
  15.   if (className !=='image' && className !=='image first') {
  16.     var graphics = circle.getContext( '2d' );
  17.     graphics.fillStyle = color;
  18.     graphics.beginPath();
  19.     graphics.arc( size * .5, size * .5, size * .5, 0, PI2, true );
  20.     graphics.closePath();
  21.     graphics.fill();
  22.   }
  23.   element.appendChild( circle );
  24.   content = document.createElement( 'div' );
  25.   content.className = "content";
  26.   content.onSelectStart = null;
  27.   content.innerHTML = html;
  28.   element.appendChild(content);
  29.   if (className !=='image' && className !=='image first' ) {
  30.     content.style.width = (size - contentPadding*2) + 'px';
  31.     content.style.left = (((size - content.clientWidth) / 2)) +'px';
  32.     content.style.top = ((size - content.clientHeight) / 2) +'px';
  33.   }
  34.   var b2body = new b2BodyDef();
  35.   var circle = new b2CircleDef();
  36.   circle.radius = size / 2;
  37.   circle.density = ballDensity;
  38.   circle.friction = ballFriction;
  39.   circle.restitution = ballRestitution;
  40.   b2body.AddShape(circle);
  41.   b2body.userData = {element: element};
  42.   b2body.position.Set( Math.random() * stage[2], Math.random() * (stage[3]-size) + size/2);
  43.   b2body.linearVelocity.Set( Math.random() * 200, Math.random() * 200 );
  44.   bodies.push( world.CreateBody(b2body) );
  45. }
  46.  

First, we create an absolutely positioned DIV that will house our Canvas tag:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var element = document.createElement( 'div' );
  3. element.className = className;
  4. element.width = element.height = size;
  5. element.style.position = 'absolute';
  6. element.style.left = -size + 'px';
  7. element.style.top = -size + 'px';
  8. element.style.cursor = "default";
  9. canvas.appendChild(element);
  10. elements.push( element );
  11.  

Then we draw the actual circle itself using the Canvas tag and append it to our container DIV (Note that an SVG circle created programmatically could have also been used here):

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var circle = document.createElement( 'canvas' );
  3. circle.width = size;
  4. circle.height = size;
  5. if (className !=='image' && className !=='image first') {
  6.    var graphics = circle.getContext( '2d' );
  7.    graphics.fillStyle = color;
  8.    graphics.beginPath();
  9.    graphics.arc( size * .5, size * .5, size * .5, 0, PI2, true );
  10.    graphics.closePath();
  11.    graphics.fill();
  12. }
  13. element.appendChild( circle );
  14.  

Then we create another DIV to house the HTML content itself:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. content = document.createElement( 'div' );
  3. content.className = "content";
  4. content.onSelectStart = null;
  5. content.innerHTML = html;
  6. element.appendChild(content);
  7. if (className !=='image' && className !=='image first' ) {
  8.    content.style.width = (size - contentPadding*2) + 'px';
  9.    content.style.left = (((size - content.clientWidth) / 2)) +'px';
  10.    content.style.top = ((size - content.clientHeight) / 2) +'px';
  11. }
  12.  

Notice that we are setting content.onSelectStart to null above; this is so that when you run the mouse button over the text it doesn't select (An alternative way to do this is to use the HTML pointer-events CSS property).

Next comes code to deal with the physics of the circles, which uses Box2D.js, a JavaScript physics engine ported from Flash:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var b2body = new b2BodyDef();
  3. var circle = new b2CircleDef();
  4. circle.radius = size / 2;
  5. circle.density = ballDensity;
  6. circle.friction = ballFriction;
  7. circle.restitution = ballRestitution;
  8. b2body.AddShape(circle);
  9. b2body.userData = {element: element};
  10. b2body.position.Set( Math.random() * stage[2], Math.random() * (stage[3]-size) + size/2);
  11. b2body.linearVelocity.Set( Math.random() * 200, Math.random() * 200 );
  12. bodies.push( world.CreateBody(b2body) );
  13.  

Basically, we define a circle, give it a radius, density, friction, and restitution, and then add it to our collection of shapes with a position and linear velocity. Box2D will then handle the physics and we can just take the values back out to draw things on the screen with a setInterval, which happens in the loop method:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function loop() {
  3.   delta[0] += (0 - delta[0]) * .5;
  4.   delta[1] += (0 - delta[1]) * .5;
  5.   world.m_gravity.x = 0 // -(0 + delta[0]);
  6.   world.m_gravity.y = -(100 + delta[1]);
  7.   mouseDrag();
  8.   world.Step(timeStep, iterations);
  9.   for (i = 0; i <bodies.length; i++) {
  10.     var body = bodies[i];
  11.     var element = elements[i];
  12.     element.style.left = (body.m_position0.x - (element.width>> 1)) + 'px';
  13.     element.style.top = (body.m_position0.y - (element.height>> 1)) + 'px';
  14.     if (ballRotation && element.tagName == 'DIV') {
  15.       var rotationStyle = 'rotate(' + (body.m_rotation0 * 57.2957795) + 'deg)';
  16.       element.style.WebkitTransform = rotationStyle;
  17.       element.style.MozTransform = rotationStyle;
  18.       element.style.OTransform = rotationStyle;
  19.     }
  20.   }
  21. }
  22.  

This method gets called with a setInterval periodically. Basically, we apply a delta and a gravity at each time step; see if the mouse is being pressed down (with hooks for touch devices like the iPhone to see if a finger is being pressed down); tell the Box2D World about our gravity and delta and to make an iteration step; and finally use the computed physics values from Box2D to apply CSS3 rotation transforms on our parent DIV and move the element's CSS top and left values around the screen.

]]> http://ajaxian.com/archives/view-source-tutorial-content-site-using-html5-canvas-css3/feed 5 Real World Canvas Tips from Hakim El Hattab http://ajaxian.com/archives/real-world-canvas-tips http://ajaxian.com/archives/real-world-canvas-tips#comments Wed, 25 Aug 2010 10:00:27 +0000 Brad Neuberg http://ajaxian.com/?p=9992 Read the rest...]]>

From Hakim El Hattab (who has some very nifty HTML5 experiments up) comes some nice tips on using the Canvas tag:

Cross browser implementation

There are no real discrepancies between the canvas outputs of different browsers so long as the JavaScript code is written correctly (if not, browsers tend to try and fix things for you, often resulting in varying results).

Performance

When working with animation on canvas, performance can be a challenge since bitmap operations are very processing expensive, especially at high resolutions. One important optimization rule to follow is to reuse as many pixels as possible between frames. What I mean by that is the fewer pixels that need to be processed each frame, the faster your program will run. A good example of this is when erasing pixels with the clearRect(x,y,w,h)method, it is very beneficial to clear and redraw only the pixels that have changed and not, for instance, a full screen 1920x1280 sized canvas. Unlike the Flash Player’s redraw regions, this management of “dirty rectangles” needs to be done manually for canvas.

State stack & transformation

The canvas can be manipulated via transformations such as rotation and scaling, resulting in a change to the canvas co-ordinate system. This is where it’s important to know about the state stack for which two methods are available: “save” (pushes the current state to the stack) and “restore” (reverts to the previous state). This enables you to apply transformation to a drawing and then restore back to the previous state to make sure the next shape is not affected by any earlier transformation. The states also include properties such as the fill and stroke colors.

Compositing

A very powerful tool at hand when working with canvas is compositing modes which, amongst other things, allow for masking and layering. As an example, you can check out Bakemono, where composite modes are used to mask the eye and mouth. There's a wide array of available composite modes and they are all set through the canvas context's “globalCompositeOperation” property.

Anti-aliasing

To allow for sub-pixel drawings, all browser implementations of canvas employ anti-aliasing (although this does not seem to be a requirement in the HTML5 spec). Anti-aliasing can be important to keep in mind if you want to draw crisp lines and notice the result looks blurred. To work around this you will need to either round to integer values or offset by half a pixel depending on if you’re drawing fills or strokes.

Clearing the canvas

To clear the entire canvas of any existing pixels you would normally use the clearRect(x,y,w,h) function but there is another option available. Whenever the width/height of the canvas are set, even if they are set to the value they already have, the canvas is reset. This is good to know when working with a dynamically sized canvas as you will notice drawings disappearing.

[via Mr. Doob]

Cross browser implementation

There are no real discrepancies between the canvas outputs of different browsers so long as the JavaScript code is written correctly (if not, browsers tend to try and fix things for you, often resulting in varying results).

Performance

When working with animation on canvas, performance can be a challenge since bitmap operations are very processing expensive, especially at high resolutions. One important optimization rule to follow is to reuse as many pixels as possible between frames. What I mean by that is the fewer pixels that need to be processed each frame, the faster your program will run. A good example of this is when erasing pixels with the clearRect(x,y,w,h)method, it is very beneficial to clear and redraw only the pixels that have changed and not, for instance, a full screen 1920x1280 sized canvas. Unlike the Flash Player’s redraw regions, this management of “dirty rectangles” needs to be done manually for canvas.

State stack & transformation

The canvas can be manipulated via transformations such as rotation and scaling, resulting in a change to the canvas co-ordinate system. This is where it’s important to know about the state stack for which two methods are available: “save” (pushes the current state to the stack) and “restore” (reverts to the previous state). This enables you to apply transformation to a drawing and then restore back to the previous state to make sure the next shape is not affected by any earlier transformation. The states also include properties such as the fill and stroke colors.

Compositing

A very powerful tool at hand when working with canvas is compositing modes which, amongst other things, allow for masking and layering. As an example, you can check out Bakemono, where composite modes are used to mask the eye and mouth. There's a wide array of available composite modes and they are all set through the canvas context's “globalCompositeOperation” property.

Anti-aliasing

To allow for sub-pixel drawings, all browser implementations of canvas employ anti-aliasing (although this does not seem to be a requirement in the HTML5 spec). Anti-aliasing can be important to keep in mind if you want to draw crisp lines and notice the result looks blurred. To work around this you will need to either round to integer values or offset by half a pixel depending on if you’re drawing fills or strokes.

Clearing the canvas

To clear the entire canvas of any existing pixels you would normally use the clearRect(x,y,w,h) function but there is another option available. Whenever the width/height of the canvas are set, even if they are set to the value they already have, the canvas is reset. This is good to know when working with a dynamically sized canvas as you will notice drawings disappearing.

]]> http://ajaxian.com/archives/real-world-canvas-tips/feed 12 Want to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvas http://ajaxian.com/archives/want-to-pack-js-and-css-really-well-convert-it-to-a-png-and-unpack-it-via-canvas http://ajaxian.com/archives/want-to-pack-js-and-css-really-well-convert-it-to-a-png-and-unpack-it-via-canvas#comments Sun, 22 Aug 2010 19:30:36 +0000 Chris Heilmann http://ajaxian.com/?p=10102 Read the rest...]]> Jacob Seidelin of nihilogic fame (remember his Super Mario in JavaScript solution) is one of my unsung heroes of JavaScript. His solutions have that Dean Edwards "genius bordering on the bat-sh*t-crazy" touch that make you shake your head in disbelief when they come out but later on become very interesting.

One of his posts from 2008 entitled "Compression using Canvas and PNG-embedded data" had a good idea: if you want to compress JavaScript and CSS you could reverse engineer a packing algorithm in JavaScript or you could use a lossless packing system that is already in use and supported in browsers. In this case the packed format is PNG and the way to unpack it is by using the canvas API's getImageData() method:

PLAIN TEXT
JAVASCRIPT:
  1. var x = function(z, m, ix ) { // image, callback, chunk index
  2.   var o = new Image();
  3.   o.onload = function() {
  4.     var s = "",
  5.         c = d.createElement("canvas"),
  6.         t = c.getContext("2d"),
  7.         w = o.width,
  8.         h = o.height;
  9.     c.width = c.style.width = w;
  10.     c.height = c.style.height = h;
  11.     t.drawImage(o, 0, 0);
  12.     var b = t.getImageData( 0, 0, w, h ).data; //b : bucket of data
  13.     for(var i= 0; i <b.length; i += 4) {
  14.       if( b[i]> 0 )
  15.         s += String.fromCharCode(b[i]);
  16.     }
  17.     m(s, ix);
  18.   }
  19.   o.src = z;
  20. }

As there are quite some interesting competitions going on that need really small JavaScript solutions Alex Le took up Jacob's work and wrapped it in a build script that concatenates, packs and converts to a PNG and unpacks it for the 10K competition with a JavaScript. In the process Alex also found some bug in Internet Explorer 9's canvas implementation as it only reads the first 8192 bytes of a PNG and returns 0 for the others :(.

It is pretty amazing how efficient this way of packing is. What we need to test now is when and if it is worth while to have the unpacking done on the client. Imagine adding your JS and CSS to the end of an image and cropping it in CSS to have all the info you need in an app in a single HTTP request. Let the games begin.

]]> http://ajaxian.com/archives/want-to-pack-js-and-css-really-well-convert-it-to-a-png-and-unpack-it-via-canvas/feed 19 JavaScript Gameboy Emulator: Memory and GPU http://ajaxian.com/archives/javascript-gameboy-emulator-memory-and-gpu http://ajaxian.com/archives/javascript-gameboy-emulator-memory-and-gpu#comments Wed, 18 Aug 2010 11:00:50 +0000 Brad Neuberg http://ajaxian.com/?p=10041 Read the rest...]]>

Jack Vaughn posted on Ajaxian recently about a new blog series on building a Gameboy emulator using JavaScript. Now Parts II and III have been posted in the series:

In the Memory section, Imran Nazar builds up a JavaScript MMU that can interpret the different parts of the Gamboy's memory:

In the previous part of this series, the computer was introduced as a processing unit, which fetches its instructions from memory. In almost every case, a computer's memory is not a simple contiguous region; the GameBoy is no exception in this regard. Since the GameBoy CPU can access 65,536 individual locations on its address bus, a "memory map" can be drawn of all the regions where the CPU has access.

[CC-A by Michael Ngilen]

In the third part Imran is now ready to actually draw things to the screen, using the Canvas tag:

Nintendo's internal name for the GameBoy is "Dot Matrix Game"; its display is a pixel LCD of dimensions 160x144. If each pixel in the LCD is treated as a pixel in a HTML5 <canvas>, a direct mapping can be made to a canvas of width 160 and height 144. In order to directly address each pixel in the LCD, the contents of the canvas can be manipulated as a "framebuffer": a single block of memory containing the entirety of the canvas, as a series of 4-byte RGBA values.

Next in the series will be a blog post on backgrounds and patterns.

]]> http://ajaxian.com/archives/javascript-gameboy-emulator-memory-and-gpu/feed 4 Canto.js: An Improved Canvas API http://ajaxian.com/archives/canto-js-an-improved-canvas-api http://ajaxian.com/archives/canto-js-an-improved-canvas-api#comments Thu, 29 Jul 2010 04:10:24 +0000 Michael Mahemoff http://ajaxian.com/?p=9889 Read the rest...]]> Javascript author extraordinaire David Flanagan released Canto.js recently, a lightweight wrapper API for canvas, introduced here and documented at the top of the source code. Example:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke();
  3.  

Notice three things:

  • canto() returns an abstraction of the canvas - a "Canto" object.
  • As with jQuery and similar libraries, there's method chaining; each method called on a Canto also returns the Canto.
  • lineTo() has been extended to support multiple lines being drawn in a single call.

Instead of setting the ink properties and then painting it, you can do it all in one step:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke({lineWidth: 15, strokeStyle: "red"});
  3.  

And plenty more syntactic sugar - check out the API in the source code comments. Sweet!

Thanks @pkeane.

]]> http://ajaxian.com/archives/canto-js-an-improved-canvas-api/feed 19 Canvas Color Cycling http://ajaxian.com/archives/canvas-color-cycling http://ajaxian.com/archives/canvas-color-cycling#comments Tue, 27 Jul 2010 00:21:55 +0000 Michael Mahemoff http://ajaxian.com/?p=9881 Read the rest...]]>

Interest in Canvas, as well as mobile apps, has led to a renaissance of old-school 8-bit graphics. Joe Huckaby of Effect Games has been playing around with color cycling, leading to some stunning effects.

Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory.

There's a neat optimization going on here too: instead of clearing and redrawing the entire scene with each frame, he only updates the pixels that change:

In order to achieve fast frame rates in the browser, I had to get a little crazy in the engine implementation. Rendering a 640x480 indexed image on a 32-bit RGB canvas means walking through and drawing 307,200 pixels per frame, in JavaScript. That's a very big array to traverse, and some browsers just couldn't keep up. To overcome this, I pre-process the images when they are first loaded, and grab the pixels that reference colors which are animated (i.e. are part of cycling sets in the palette). Those pixel X/Y offsets are stored in a separate, smaller array, and thus only the pixels that change are refreshed onscreen. This optimization trick works so well, that the thing actually runs at a pretty decent speed on my iPhone 3GS and iPad!

]]> http://ajaxian.com/archives/canvas-color-cycling/feed 13 IE9 supports Canvas…. hardware accelerated! http://ajaxian.com/archives/ie9-supports-canvas-hardware-accelerated http://ajaxian.com/archives/ie9-supports-canvas-hardware-accelerated#comments Wed, 23 Jun 2010 21:54:00 +0000 Dion Almaer http://ajaxian.com/?p=9702 Read the rest...]]> Huge news. My canvas crusade is done. IE9 is supporting canvas, and it is hardware accelerated, in the third preview release:

With the third platform preview, we introduce support for the HTML5 Canvas element. As you know our approach for standards support is informed both by developer feedback and real word usage patterns today, along with where we see the web heading. Many web developers have asked us to support this part of HTML5 and we definitely took this feedback into account as we prioritized our work.

Like all of the graphics in IE9, canvas is hardware accelerated through Windows and the GPU. Hardware accelerated canvas support in IE9 illustrates the power of native HTML5 in a browser. We’ve rebuilt the browser to use the power of your whole PC to browse the web. These extensive changes to IE9 mean websites can now take advantage of all the hardware innovation in the PC industry.

Preview 3 completes the media landscape for modern websites with hardware accelerated video, audio, and canvas. Developers now have a comprehensive platform to build hardware accelerated HTML5 applications. This is the first browser that uses hardware acceleration for everything on the web page, on by default, available today for developers to start using for their modern site development.

The third platform preview continues to support more of DOM and CSS3 standards that developers want. Examples here include DOM Traversal, full DOM L2 and L3 events, getComputedStyle from DOM Style, CSS3 Values and Units, and CSS3 multiple backgrounds.

Also included in the third platform preview is support for using the Web Open Font Format (WOFF) through CSS3 font face.

Oh, and Acid3 is coming along too..... as well as a lot of performance improvements.

Congrats to the IE team.

]]> http://ajaxian.com/archives/ie9-supports-canvas-hardware-accelerated/feed 25 Liquid Particles http://ajaxian.com/archives/liquid-particles http://ajaxian.com/archives/liquid-particles#comments Fri, 11 Jun 2010 07:58:25 +0000 Dion Almaer http://ajaxian.com/?p=9557 Read the rest...]]> Sit back and enjoy:

The bulk of the code is just:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function run()
  3. {
  4.         ctx.globalCompositeOperation = "source-over";
  5.         ctx.fillStyle = "rgba(8,8,12,.65)";
  6.         ctx.fillRect( 0 , 0 , canvasW , canvasH );
  7.         ctx.globalCompositeOperation = "lighter";
  8.        
  9.         mouseVX    = mouseX - prevMouseX;
  10.         mouseVY    = mouseY - prevMouseY;
  11.         prevMouseX = mouseX;
  12.         prevMouseY = mouseY;
  13.        
  14.         var toDist   = canvasW / 1.15;
  15.         var stirDist = canvasW / 8;
  16.         var blowDist = canvasW / 2;
  17.        
  18.         var Mrnd   = Math.random;
  19.         var Mabs   = Math.abs;
  20.         var Msqrt  = Math.sqrt;
  21.         var Mcos   = Math.cos;
  22.         var Msin   = Math.sin;
  23.         var Matan2 = Math.atan2;
  24.         var Mmax   = Math.max;
  25.         var Mmin   = Math.min;
  26.        
  27.         var i = numMovers;
  28.         while( i-- )
  29.         {
  30.                 var m  = movers[i];
  31.                 var x  = m.x;
  32.                 var y  = m.y;
  33.                 var vX = m.vX;
  34.                 var vY = m.vY;
  35.                
  36.                 var dX = x - mouseX;
  37.                 var dY = y - mouseY;
  38.                 var d = Msqrt( dX * dX + dY * dY );
  39.                 var a = Matan2( dY , dX );
  40.                 var cosA = Mcos( a );
  41.                 var sinA = Msin( a );
  42.                
  43.                 if( isMouseDown )
  44.                 {
  45.                         if( d <blowDist )
  46.                         {
  47.                                 var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
  48.                                 vX += cosA * blowAcc + .5 - Mrnd();
  49.                                 vY += sinA * blowAcc + .5 - Mrnd();
  50.                         }
  51.                 }
  52.                
  53.                 if( d <toDist )
  54.                 {
  55.                         var toAcc = ( 1 - ( d / toDist ) ) * canvasW * .0014;
  56.                         vX -= cosA * toAcc;
  57.                         vY -= sinA * toAcc;
  58.                 }
  59.                
  60.                 if( d <stirDist )
  61.                 {
  62.                         var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * .00022;
  63.                         vX += mouseVX * mAcc;
  64.                         vY += mouseVY * mAcc;         
  65.                 }
  66.                
  67.                
  68.                 vX *= friction;
  69.                 vY *= friction;
  70.                
  71.                 var avgVX = Mabs( vX );
  72.                 var avgVY = Mabs( vY );
  73.                 var avgV = ( avgVX + avgVY ) * .5;
  74.                
  75.                 if( avgVX <.1 ) vX *= Mrnd() * 3;
  76.                 if( avgVY <.1 ) vY *= Mrnd() * 3;
  77.                
  78.                 var sc = avgV * .45;
  79.                 sc = Mmax( Mmin( sc , 3.5 ) , .4 );
  80.                
  81.                
  82.                 var nextX = x + vX;
  83.                 var nextY = y + vY;
  84.                
  85.                 if( nextX> canvasW )
  86.                 {
  87.                         nextX = canvasW;
  88.                         vX *= -1;
  89.                 }
  90.                 else if( nextX <0 )
  91.                 {
  92.                         nextX = 0;
  93.                         vX *= -1;
  94.                 }
  95.                
  96.                 if( nextY> canvasH )
  97.                 {
  98.                         nextY = canvasH;
  99.                         vY *= -1;
  100.                 }
  101.                 else if( nextY <0 )
  102.                 {
  103.                         nextY = 0;
  104.                         vY *= -1;
  105.                 }
  106.                
  107.                 m.vX = vX;
  108.                 m.vY = vY;
  109.                 m.x  = nextX;
  110.                 m.y  = nextY;
  111.                
  112.                 ctx.fillStyle = m.color;
  113.                 ctx.beginPath();
  114.                 ctx.arc( nextX , nextY , sc , 0 , radCirc , true );
  115.                 ctx.closePath();
  116.                 ctx.fill();          
  117.         }
  118. }
  119.  
]]> http://ajaxian.com/archives/liquid-particles/feed 6 Canvas optimization tip: Get image data as infrequently as possible http://ajaxian.com/archives/canvas-image-data-optimization-tip http://ajaxian.com/archives/canvas-image-data-optimization-tip#comments Thu, 27 May 2010 12:01:46 +0000 Dion Almaer http://ajaxian.com/?p=9372 Read the rest...]]> We have learned to touch the DOM as little as possible for performance sakes. Batch up changes, and do one call to innerHTML say. Talk over the evil boundary of the DOM as infrequently as possible.

Well, Selim Arsever has found a similar tip for Canvas that caused a ~40% performance improvement on some of his code. He had an example that did pixel twiddling, looking like:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. canvas = document.getElementById("canvas");
  3. context = canvas.getContext("2d");
  4. image = context.getImageData(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  5.  
  6. var pixels = SCREEN_WIDTH*SCREEN_HEIGHT;
  7. while(--pixels){
  8.    image.data[4*i+0] = r; // Red value
  9.    image.data[4*i+1] = g; // Green value
  10.    image.data[4*i+2] = b; // Blue value
  11.    image.data[4*i+3] = a; // Alpha value
  12. }
  13. context.putImageData(image, 0, 0);
  14.  

After listening to Stoyan talk perf, he wondered if there was an issue with the image.data access, and changed the code to:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. canvas = document.getElementById("canvas");
  3. context = canvas.getContext("2d");
  4. image = context.getImageData(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  5.  
  6. var pixels = SCREEN_WIDTH*SCREEN_HEIGHT;
  7. var imageData = image.data; // here we detach the pixels array from DOM
  8. while(--pixels){
  9.    imageData[4*i+0] = r; // Red value
  10.    imageData[4*i+1] = g; // Green value
  11.    imageData[4*i+2] = b; // Blue value
  12.    imageData[4*i+3] = a; // Alpha value
  13. }
  14. image.data = imageData; // And here we attache it back
  15. context.putImageData(image, 0, 0);
  16.  

He wrapped this all up in a benchmark that showed the perf diff. It actually really seemed to matter when using closures for namespaces:

]]> http://ajaxian.com/archives/canvas-image-data-optimization-tip/feed 9 Music score notation in the browser http://ajaxian.com/archives/music-score-notation-in-the-browser http://ajaxian.com/archives/music-score-notation-in-the-browser#comments Wed, 12 May 2010 10:11:10 +0000 Dion Almaer http://ajaxian.com/?p=9264 Read the rest...]]> PLAIN TEXT
CSS:
  1.  
  2. score {
  3.   title: Hip Tune
  4.   artist: Hip Person
  5.  
  6.   bar { v8 C4 D4 E4 F4 (C4 E4 G4) }
  7.   bar { v8 C4 D4 E4 F4 (C4 E4 G4) } repeat 3
  8. }
  9.  

What if you could write music in a notation like the above? And have it render as something like this:

Mohit Muthanna has implemented music notion in Canvas. He has the beginnings of it right now, and still needs to tie in a nice DSL to write it out.

Jono of Mozilla worked on a simple text based DSL which was nice as you could just tweak text in a textarea and you are done.

The current API looks like this:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function VexNotationDemo1(b) {
  3.     b = new Vex.Music.Artist(b, {
  4.         scale:0.9, width:900
  5.     });
  6.     var c = b.CreateScore(),
  7.         d = b.CreateScore();
  8.     b.DrawScore(c);
  9.     var e = GetBar1(b,c);
  10.     b.DrawBar(e);
  11.     e = GetBar2(b,c);
  12.     b.DrawBar(e);
  13.     e = GetBar3(b,c);
  14.     b.DrawBar(e);
  15.     e = GetBar4(b,c);
  16.     b.DrawBar(e);
  17.     c = GetBar5(b,c);
  18.     b.DrawBar(c);
  19.     b.DrawScore(d);
  20.     c = b.CreateContinuingBarFrom(c,d);
  21.     b.DrawBar(c);
  22.     d = GetBar7(b,d);
  23.     b.DrawBar(d)}
  24.    
  25.     function GetBar4_2(b,c) {
  26.         c = b.CreateBar(c);
  27.         var d = c.AddLine();
  28.         d.AddNote(b.CreateNote({keys:["f##/4"],duration:"h"}));
  29.         var e = [];
  30.         e.push(b.CreateNote({keys:["a##/4"],duration:"16"}));
  31.         e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));
  32.         e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));
  33.         e.push(b.CreateNote({keys:["f##/5"],duration:"16"}));
  34.         e.push(b.CreateNote({keys:["f#/4","a/4","f/5"],duration:"16"}));
  35.         e.push(b.CreateNote({keys:["f#/4","a/4","f/5"],duration:"16"}));
  36.         d.AddNotes(e);
  37.         e = b.CreateBeam(e);
  38.         d.AddBeam(e);
  39.         e = b.CreateNote({keys:["db/4"],duration:"32"});
  40.         var f = b.CreateNote({keys:["f#/4"],duration:"32"}),
  41.             g = b.CreateNote({keys:["db/4"],duration:"32"}),
  42.             h = b.CreateNote({keys:["f#/4"],duration:"32"});
  43.         d.AddNote(e);
  44.         d.AddNote(f);
  45.         d.AddNote(g);
  46.         d.AddNote(h);
  47.         b = b.CreateBeam([e,f,g,h]);
  48.         d.AddBeam(b);
  49.         return c;
  50. }
  51.  

SVG could be a good choice for this too, with semantics in place. Then it would be cool to have a player, that reads it and pumps out the <audio> :)

]]> http://ajaxian.com/archives/music-score-notation-in-the-browser/feed 5 Hummingbird: Real time view of your Web traffic http://ajaxian.com/archives/hummingbird-real-time-view-of-your-web-traffic http://ajaxian.com/archives/hummingbird-real-time-view-of-your-web-traffic#comments Mon, 10 May 2010 20:58:31 +0000 Dion Almaer http://ajaxian.com/?p=9249 Read the rest...]]>

Michael Nutt and Benny Wong have created a fun realtime web analytics product called Hummingbird. It comes with awesome buzzwords too! Node! Canvas! Web Sockets! MongoDB!

To add tracking, you simple sprinkle in Gilt.Hummingbird.track(env) like this:

Which calls the client:

Which, as you can see, sets up a tracking gif on the server. You can then access the monitoring server to watch things moving:

Very nice indeed!

]]> http://ajaxian.com/archives/hummingbird-real-time-view-of-your-web-traffic/feed 1 Blowing up HTML5 video http://ajaxian.com/archives/blowing-up-html5-video http://ajaxian.com/archives/blowing-up-html5-video#comments Thu, 22 Apr 2010 15:59:42 +0000 José Jeria http://ajaxian.com/?p=9072 Read the rest...]]> Sean Christmann has been experimenting with canvas and HTML 5 video. The results? Blowing up a HTML5 video:

html5boom

He considers the implementation to be ”bit of hackish” though and explains why:

Don’t ask me why, but copying pixel data out of a video tag is expensive, so expensive that drawing it into a temporary canvas, and then drawing pieces of that temp canvas onto a final canvas is faster then just referencing the video tag repeatedly within the same loop. That’s why you’ll see 2 Canvases in the source code for the demos. I’m sure there’s a technical reason for this duplication process, but it’s a lazy reason.

Check out Sean's blog entry for more details.

Editor's Note: This is the first posting from long time Ajaxian community member, José Jeria. We look forward to having him posting as he sees fun things around the Web. Welcome! Here is an introduction by José:

I am a self-taught developer that started doing web development back in 97 in Stockholm Sweden. I worked in different web agencies and ended up in Munich Germany after joining an American company called Razorfish. I worked as a web developer mainly coding HTML / CSS and JavaScript etc for 8 years before I got into developing back-end in Java (J2EE) as well.

The most fun I have though, is when developing rich front-ends though (I am very keen on user interface design). I have been, for the last 5 years, developing intranet web applications in data-warehouse environments using different frameworks, such as JSF, Spring MVC and lately my new favorite: Ext-GWT.

]]> http://ajaxian.com/archives/blowing-up-html5-video/feed 0 HTML5 is my Arcade. Akihabara. http://ajaxian.com/archives/html5-is-my-arcade-akihabara http://ajaxian.com/archives/html5-is-my-arcade-akihabara#comments Thu, 22 Apr 2010 11:40:49 +0000 Dion Almaer http://ajaxian.com/?p=9070 Read the rest...]]>

Akihabara is a set of libraries, tools and presets to create pixelated indie-style 8/16-bit era games in Javascript. What does it consist of?

Akihabara is composed of a number of libraries that use HTML5 canvas tag and some standard hooks.

Gamebox module is complete and compact enough for making games: it allows multiple grouped objects moving simultaneously, it helps with collisions, rendering and moving objects. It provides monospaced pixel-fonts rendering too. It handles keyboard, double buffering and evenutally FSEs. For now do not support audio via the HTML5 audio tag but only because I don't any skill on music/SFX for adding audio to the shipped demos :). I'm going to add this kinda soon.

Gamecycle module provides a complete generic game cycle: intro, menus, crossfading between stages/lifes, gameover and ending. You can use the same game cycle for many games and implement only the main game.

Toys module provides lots lots of common routines during the game developing: from effects for screen titles to HUD handling to platform/SHMUP/RPG oriented routines, like jumping characters, Z-Indexed objects, bullets, sparks, staff rolls, bonus screens, dialogues etc.

Help module provides some Javascript-specific functions, such object copying, randomizing functions, string/array handlers and the akihabaraInit function, that automatically sets a comfortable preset of configurations: 25fps, double-sized display for non-mobile devices, dynamic frameskip.

Tool module provides simple developing tools. Actually there is only a cel-composer: it can compose an image stacking a set of frames for animating objects, applying a number of filters to each frame.

Trigo module provides some math stuff for moving objects toward a direction or following a round path.

Iphopad module provides a touchpad for touch-based device (for now, Android and iDevices).

When you are debugging a game you can simply add some parameters to give you great new info (debug bars, double buffering, touch UI events, set FPS, and much more).

View source on the games to see state machines and info such as:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. kill: function(by) {
  3.   this.frame=8;
  4.   this.accz=-8;
  5.   maingame.addSmoke(this,"flame-red");
  6.   this.killed=true;
  7.   maingame.playerDied({wait:50});                                   
  8. }
  9.  

Awesome work Francesco.

]]> http://ajaxian.com/archives/html5-is-my-arcade-akihabara/feed 2 “Visualize” data as graphs http://ajaxian.com/archives/visualize-data-as-graphs http://ajaxian.com/archives/visualize-data-as-graphs#comments Fri, 16 Apr 2010 14:17:52 +0000 Dion Almaer http://ajaxian.com/?p=8991 Read the rest...]]> How do you visualize data in interesting ways but allow the data to be accessible for all? The jQuery Visualize work is the latest library that groks HTML and replaces the table with pretty graphs:

The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability to transform them into a chart or graph visualization. For example, table row data values serve as chart bars, lines or pie wedges; table headers become value and legend labels; and the title and caption values provide title labels within the image. Visualize also automatically checks for the highest and lowest values in the chart and uses them to calculate x-axis values for line and bar charts. Finally, the plugin includes two different CSS styles — one light and one dark — that can be used as is, or can serve as a starting point to customize chart and graph presentation to match any application style.

jvisualize

Someone pointed out that "accessible" means many things. If you have a 10,000 row table, it may not be easy to consume.... but hey!

]]> http://ajaxian.com/archives/visualize-data-as-graphs/feed 0 Move on Objective-C, CS5 to generate Canvas and JS http://ajaxian.com/archives/move-on-objective-c-cs5-to-generate-canvas-and-js http://ajaxian.com/archives/move-on-objective-c-cs5-to-generate-canvas-and-js#comments Mon, 12 Apr 2010 10:20:17 +0000 Dion Almaer http://ajaxian.com/?p=8955 Read the rest...]]>

We have been reminded of MAX showing Flash CS5 generating basic HTML5 code (Canvas/JS).

That's right. Adobe is a tools company. Although it helps to own the platform (hence keeping Flash alive and wanting it to win) as the competition to build the best tools is a given, that doesn't mean that they can't compete on other platforms. To be frank, it isn't like the Web has a ton of amazing tools to compete against anyway in fact, so I fully hope that with the success of HTML5 in the coming years, we see great tools from Adobe to help us deliver experiences. Especially for creative designer types... Adobe really gets those chaps (and chapesses).

What tools would you like to see from Adobe? Maybe we can get them to dust off their SVG? ;)

Check out the launch of Creative Suite 5.

]]> http://ajaxian.com/archives/move-on-objective-c-cs5-to-generate-canvas-and-js/feed 5 Open Web Video Puzzle http://ajaxian.com/archives/open-web-video-puzzle http://ajaxian.com/archives/open-web-video-puzzle#comments Thu, 01 Apr 2010 11:10:37 +0000 Dion Almaer http://ajaxian.com/?p=8808 Read the rest...]]> This is a fun one. The Open Video Sliding Puzzle takes a running video (from the public videos project) cuts it up, and builds a sliding puzzle on the fly.

openvideoslider

How does it work? Why Canvas and HTML5 video of course:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2.     for (var i=0;i&lt;12;i++){
  3.         var can = document.getElementById('c'+(i+1));
  4.         var ctx = can.getContext('2d');
  5.         pieces_can.push(can);
  6.         pieces_ctx.push(ctx);
  7.     }
  8.     i = setInterval(function(){
  9.         var sWidth = dWidth = 160;
  10.         var sHeight = dHeight = 120;
  11.         dx = dy = 0;
  12.         var source = document.getElementById('puzzle_image');
  13.         for(var i=0;i&lt;12;i++) {
  14.             sx = (i*sWidth)%640;
  15.             sy = ((Math.floor(i/4))*sHeight);
  16.             pieces_ctx[i].drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
  17.         }
  18.     }, 30);
  19.  

The bulk of the code is setting up and playing the puzzle.

]]> http://ajaxian.com/archives/open-web-video-puzzle/feed 7