Tag Archives: html5

Google I/O – Another clever thing by Google

Google is famous with their cleverness – to make little happy joyful things. We developers are all familiar with their tricks, such as “snowy day” , or “do a barrel roll”.

And it’s time for a new trick!

Google IO Game

Google IO Game, Google IO Game

The purpose is simple: get the ball from “input” to “output”.  You are given a variety of “pieces” to make your machine. The pieces include redirectors, elevators, walls,… and so on. Can you make the best machine with only fewest pieces? Let’s try!

Some beautiful machines:

[youtube=http://www.youtube.com/watch?v=nWrKGB67uFQ]

[youtube=http://www.youtube.com/watch?v=kwh1hSPiIfQ">http://www.youtube.com/watch?v=kwh1hSPiIfQ]

Enjoy!

A quick experiment on HTML5 Canvas

Photobucket

/** Vietnamese: một thử nghiệm nhỏ lên trang canvas của HTML5 **/

HTML5 is out for a while, and many people have already play with it. Inspired by the great article here, I managed to make a simple dirty experiment.


<!DOCTYPE html>

<html lang="en">

  <head>

    <title>Good night</title>

  </head>

  <body><script type="text/javascript">
  if ( !window.requestAnimationFrame ) {

    window.requestAnimationFrame = ( function() {

      return window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

        window.setTimeout( callback, 800 / 60 );

      };

    } )();

  }
</script><script type="text/javascript">
var canvas, context;
var xx = new Array();
var yy = new Array();
for (var i = 0; 40 > i; i++) {
   xx[i] = Math.random()*600;
   yy[i] = Math.random()*150;
}

init();
animate();
function init() {
  canvas = document.createElement( 'canvas' );
  canvas.width = 600;
  canvas.height = 400;
  context = canvas.getContext( '2d' );
  document.body.appendChild( canvas );
}
  
function animate() {
  requestAnimationFrame( animate );
  draw();
}
function draw() {
  var time = new Date().getTime() * 0.001;
  var x = Math.cos( time ) * 250 + 300;
  var y = Math.sin( time ) * 250 + 300;
  
  if(150 >= y) {context.fillStyle = 'rgb(250,250,250)';}
  else {
    if (200 >= y) {
      context.fillStyle='rgb(200,200,200)';
    } else {
      context.fillStyle='rgb(14, 14, 14)';
    }
  }
  
  context.fillRect( 0, 0, 600, 400 );
    
  context.fillStyle = 'rgb(255,255,0)';

  context.beginPath();
  
  context.arc( x, y, 15, 0, Math.PI * 2, false );
  context.closePath();
  context.fill();
  
  context.fillStyle = 'rgb(0,0,255)';
  context.fillRect(0, 215, 600, 400);
  
   for (var i = 0; 15 > i; i++) {
      
      context.fillStyle = 'rgb(255,255,255)';
      context.beginPath();
      context.arc(xx[i], yy[i], 1, 0, Math.PI * 2, false );
      context.closePath();
      context.fill();
  
      if (y > 200) {
          if (Math.floor(time) % 2 == 0) {
            context.fillStyle = 'rgb(255,255,255)';
            context.beginPath();
            context.arc(xx[i], yy[i] + 215, 1, 0, Math.PI * 2, false );
            context.closePath();
            context.fill();
          } else {
            context.fillStyle = 'rgb(255,255,255)';
            context.beginPath();
            context.arc((yy[i] / 150) * 600, (xx[i] / 600)*150 + 215, 1, 0, Math.PI * 2, false );
            context.closePath();
            context.fill();
          }
        }
      } 
    }
    </script>
  </body>
</html>

You can view the example online here.

Free ads: thanks for the start-up Handcraft for letting me quickly “craft” this product.