A priori la conception de page html n’a pas de grand rapport avec le spectacle vivant. Et pourtant …
Je suis convaincu que “la mixité des genres” et l’émergence d’évènements qui proposent au public de participer, nous invitent à utiliser les navigateurs (sous toutes les plateformes) afin de mettre en relation le public et les artistes.
http://www.creativeapplications.net/flash/light-invaders-flash-webapp-openframeworks/ en est un bel exemple.
L’apparition récente d’une nouvelle version du standard HTML est un outil de plus afin de développer et créer des pages plus attractives sans avoir à forcément passer par le développement sous un logiciel propriétaire (Flash par exemple).
Avec le HTML5 et Javascript, il est désormais simple d’intégrer une interactivité puissante.
En guise d’introduction, j’ai revisité la première page de mon ancien siteafin d’y intégrer une animation. Ce qui m’intéressait surtout était de créer une animation qui tourne en fond de page et qui réalise un dessin avec certains paramètres aléatoires sur la base des lettres de mon nom. Ce qui donne
La lecture de http://diveintohtml5.org/ m’a beaucoup aidé.
J’utilise sur cette page une technique assez simple (ceux qui sauront lire le code de la page constateront qu’il est assez court) :
1 – Avec une fonction de la bibliothèque jquery, je charge comme animation de fond une fonction d’un script javascript (anibg.js)
2 – Je dessine le canvas.
//______________________________________________
En détail, ça donne :
1. Pour pouvoir utiliser les fonctions de la bibliothèque jquery
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>
Rien de plus, la bibliothèque est en ligne pas besoin de la charger quelque part sur son site et de se préoccuper de la mise à jour, …
Pour charger le canvas “backgroundCanvas” en tâche de fond de page il suffit d’écrire :
<script type=”text/javascript”>
$(document).ready(function() { new AniBg(“backgroundCanvas”).start(); }); </script>Auparavant en début de page j’ai chargée la page Javascript anibg.js qui a une fonction AniBg(“le nom de mon canvas”).
La voici :
function AniBg(canvasId) { var canvas = document.getElementById(canvasId); this.start = function() { size = SCREEN_WIDTH/12; for (i = 0; i < letterRules.length; i ++) { letterStore[i] = new letters(letterRules[i][1], letterRules[i][2], size); letterStore[i].color = randomRGBA(); } beginAnimateBackground(); } function beginAnimateBackground() { var context = canvas.getContext(‘2d’); var val_alf = Math.abs(Math.sin(frame*A_RADIAN/2.))/2.; for (i = 0; i < letterStore.length; i ++) { var letter = letterStore[i] if (frame > 25) { letter.velX = randomRange(-4, 4); letter.velY = randomRange(-2, 2); } letter.update() letter.render(context, letterRules[i][0]) } frame++; setTimeout(beginAnimateBackground,10); }Le manière de dessiner les lettres m’a été inspirée par un post de Richard Powell sur son excellent blog.
2. Plus loin, je définis le canvas par
<div id=”backgroundHolder”> <canvas id=”backgroundCanvas” width=”1000″ height=”800″></canvas> <div>Le cas épineux du navigateur Internet Explorer dont la version est antérieure à la 9, oblige à écrire :
<!–[if lt IE 9]> <script src=”./js/excanvas.js”></script> <![endif]–>afin de voir la page fonctionner de manière normale même sur les navigateurs plus anciens.
Coté performance, c’est un peu décevant. En effet ma première page est gourmande en traitement. J’ai essayé diverses optimisations mais il s’avère que le javascript sur une page html demande encore un gros effort de la machine pour faire un dessin relativement simple (dessiner des lettres avec des traits).