Activate your free membership today | Log-in

Monday, August 30th, 2010

View Source Tutorial: Content Site Using HTML5 Canvas + CSS3

Category: Canvas, Tutorial, View Source

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.

Related Content:

5 Comments »

Comments feed TrackBack URI

Thank you for this. More articles like this, please.

Comment by cyberdyne — August 30, 2010

WordPress has a ‘read more’ tag for a good reason…

Comment by sixtyseconds — August 30, 2010

“View Source Tutorials” – would be a great reoccurring feature!

Comment by khs4473 — August 30, 2010

This is a copy of Mr.doob’s Ball Pool http://mrdoob.com/projects/chromeexperiments/ball_pool/

Comment by Liburn — August 30, 2010

can I apply a css class to a canvas Class, for example:

// Circle Class
function Circle(x, y, width, height){
this.x = x;
this.y = y;
}

//css
.circlebg {
background: #8f8;
}

and do something like this:
circle.className = “circlebg”;

thanks

Comment by juankuq — October 29, 2010

Leave a comment

You must be logged in to post a comment.