processi

about processes and engines

hanabi

Hanabi is a small presentation tool.

You load hanabi.js, you create an empty canvas with a given id, you point it to the image and give it a list of points :

  var source = 'path/to/my_image.png';
  var points = [
    { x: 504, y: 340, zoom: 0.5, r: Math.PI * 2 },
    { x: 504, y: 340, zoom: 3.5, r: Math.PI * 2, stop: false },
    { x: 641, y: 260, zoom: 2.0, r: Math.PI * 2 },
    { x: 832, y: 191, zoom: 2.0, r: Math.PI * 2 },
    { x: 977, y: 173, zoom: 2.0, r: Math.PI * 2 },
    { x: 1035, y: 297, zoom: 2.0, r: Math.PI * 2 },
    { x: 1037, y: 383, zoom: 4.0, r: Math.PI * 1.75 },
    { x: 497, y: 335, zoom: 2.0, r: Math.PI * 2 },
    { x: 696, y: 513, zoom: 2.0, r: Math.PI * 2.1 },
    { x: 914, y: 501, zoom: 2.0, r: Math.PI * 2 },
    { x: 363, y: 391, zoom: 2.0, r: Math.PI * 1.9 },
    { x: 86, y: 451, zoom: 2.0, r: Math.PI * 2 },
    { x: 506, y: 336, zoom: 2.0, r: Math.PI * 2 },
    { x: 321, y: 31, zoom: 2.0, r: Math.PI * 0.2 },
  ];
  Hanabi.init('can', source, points);

Then you click your way through the image.

http://github.com/jmettraux/hanabi

 

For the real thing : http://prezi.com

 

Written by John Mettraux

March 10, 2010 at 1:51 pm

Posted in javascript

%d bloggers like this: