Ceux des générations X et Y se souviendront peut-être d'André Cartier, mieux connu sous le nom d'André dans l'émission pour enfants Passe-Partout (1977-1979). Pourquoi parler de lui sur mon blogue ? Pour plusieurs bonnes raisons :

1. parce que c'était le personnage le plus geek de la distribution de Passe-Partout puisqu'il était débrouillard et possédait un savoir-faire DIY inné (c'est vrai, il semblait naïf et un peu attardé). C'était un héros obscur qui nous a inspiré à sa façon.
   
2. parce qu'il a eu le rôle de sa vie en 1989 dans une excellente publicité pour les supermarchés Provigo où il faisait la promotion des figurines des joueurs du club de hockey Canadiens de Montréal. Pour chaque figurine vendue, 60 sous étaient remis à l'organisme Parents Anonymes. Possiblement une levée de fonds dans le but de retrouver les parents inconnus de Passe-Partout, Passe-Carreau et Passe-Montagne ?
3. parce qu'il a donné la réplique à Pierre Curzi dans l'émission Youhou. Le premier est disparu de la carte, le second est devenu politicien à l'Assemblée Nationale du Québec. La vie est parfois injuste avec nos idôles.
   
4. parce que j'ai une anecdote à son sujet.
   

Suite à sa disparition de nos écrans, André a écrit un livre. Oui oui, un bouquin sérieux qui s'adresse aux adultes. Voyons ici le synopsys pour nous mettre l'eau à la bouche :

Pays-Perdu (1997)
Naufragé affectif, un jeune enseignant échoue dans un village perdu du Québec profond. Dans ce microcosme de société, il ne tarde pas à découvrir la politicaillerie, les intérêts et le luttes intestines sordides, l'érotisme pitoyable (ah ouin?!), et des manigances d'autant plus insupportables qu'on les subit en circuit fermé.

Mais, dans ce pays perdu, il rencontre l'amour sous plusieurs masques : l'amour bestial (oyoyoye!) et possessif, l'amour maladif, l'amour impossible. Il découvre aussi l'affection de ses élèves.

Avouez que ça a l'air bon en titi. Il fallait à tout prix lire ça. Un ami, plus déterminé que moi à trouver cet énigmatique récit, décida de téléphoner à l'éditeur (éditions Stanké) qui l'informa que le livre était discontinué. Puis, il essaya d'entrer en contact avec André à l'aide de différents subterfuges. Sans succès.

Mais les Internets étant un refuge inespéré dans les moments de désespoir, on nota que quelqu'un avait mis en vente l'item rarissime pour 116$ sur Amazon.ca. Après une courte réflexion, on décida de ne pas le lire à n'importe quel prix. En fouillant un peu plus sur le web, on dénicha une librairie qui prétendait le tenir dans son stock de marchandise usagée.

Le problème, c'est qu'il fallait se rendre dans un quartier malfamé de Laval. Misère! Comme Mononc Serge, nous avons mis de côté notre orgueil et traversé le pont Papineau pour se rendre compte que le monde civilisé s'arrêtait à la Rivière des Prairies (je cite les paroles du grand poète)...

Nous voilà prêts à entrer dans cette boutique, déterminés à retrouver le Saint-Graal de la littérature. Le commis nous indiqua que les livres qui se vendent le moins se trouvent ici et là, bref à peu près partout sur les deux étages que compte le magasin. À trois personnes (ma copine, ce gars-là et moi-même), nous nous mettons à fouiller parmi les milliers de livres de ce bric-à-brac.

Comme par magie, le livre se distingua des autres par un halo de lumière divine. Le livre tant convoité était maintenant entre nos mains. On passa à la caisse pour immédiatement se retrouver sous le seul de la pauvreté après avoir déboursé les trois dollars demandés. Mais l'enthousiasme était au rendez-vous, c'était un moment de pur bonheur.

Sur le chemin du retour, assis sur le siège arrière de la voiture, notre ami barbu commença à lire à haute voix quelques passages au hasard. Ce n'était pas particulièrement bon alors on s'est contenté de ces seuls extraits pour ne pas dénaturer l'estime qu'on avait pour André. Du temps s'est écoulé, aucun de nous n'a lu son livre et on se demande toujours dans quel pays imaginaire il est passé.

Lorsque j'ai écrit mon dernier billet sur mes expérimentations HTML5, j'ai expliqué comment dessiner un coeur sous prétexte que la St-Valentin approchait. Pour être franc, ce n'était pas mon objectif principal. J'ai eu l'idée de dessiner un coeur lorsque j'ai reçu mon compte de taxes de la ville de Montréal et que j'ai aperçu le logo en forme de rosace composée de 4 coeurs. Le premier billet reflète donc le premier but à atteindre (bien que la façon d'y arriver et le résultat sont différents) et celui d'aujourd'hui démontre comment je suis arrivé à faire une reproduction approximative du logo de Montréal en utilisant le canvas HTML5.

Bien sûr, j'ai triché ici et là alors je laisserai le soin aux designers graphiques soucieux des détails de relever les imprécisions, mon approche de programmeur étant surtout basée sur l'apprentissage du calcul des arcs, cloner le canvas, la translation et rotation d'éléments ainsi que le calcul de courbes quadratiques. Je suis quand même assez satisfait du résultat.

Pour vous aider à suivre, j'ai préparé un graphique pour illustrer les étapes à suivre.



À partir d'un canvas de 500 pixels de côté, je récupère les références, j'applique la couleur rouge aux propriétés du trait et de remplissage et je définis l'épaisseur du tracé avec une valeur qui me semble raisonnable à l'oeil.

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.strokeStyle = '#CE2123';
context.fillStyle = '#CE2123';
context.lineWidth = 18;

Pour faciliter le travail et pour centrer le logo au milieu du canvas, je déplace mon origine au centre calculé.

context.translate(canvas.width/2, canvas.height/2);

Je crée les deux premiers arcs de cercles qui se trouvent complètement au haut du logo (étape 1).

// arc haut gauche
context.beginPath();
context.arc(-50, -150, 50, 130*(Math.PI/180), 0*(Math.PI/180));
context.stroke();
context.closePath();

// arc haut droit
context.beginPath();
context.arc(50, -150, 50, Math.PI, 50*(Math.PI/180));
context.stroke();
context.closePath();

À l'extrémité de l'arc gauche, je place un cercle central (étape 2). L'idée est que je clonerai ce gabarit pour le dupliquer pour compléter la rosace avec moins d'efforts.

// cercle interne
context.beginPath();
context.arc(-70, -98, 25, 0, Math.PI*2, false);
context.fill();
context.closePath();

Premier clonage et rotation (étape 3).

// copie à gauche avec rotation
context.save();

var canvas1 = canvas.getContext('2d');
context.rotate(270*Math.PI/180);
canvas1.drawImage(canvas, -221, -222);

Deuxième clonage (étape 4).

context.restore();

var canvas2 = canvas.getContext('2d');
context.rotate(180*Math.PI/180);
canvas1.drawImage(canvas, -250, -192);

Enfin, je trace la croix centrale qui donne l'illusion d'une juxtaposition de quatre coeurs (étape 5).

// lignes
context.beginPath();
context.moveTo(0, -100);
context.lineTo(0, 150);
context.closePath()
context.stroke();

context.rotate(90*Math.PI/180);

context.beginPath();
context.moveTo(29, -125);
context.lineTo(29, 125);
context.closePath()
context.stroke();

context.rotate(270*Math.PI/180);

context.translate(0, 27); // centre
context.save();

Ce n'est pas tout. Si on regarde comme il faut le croisement des deux axes qu'on vient de tracer, on voit que chaque angle a une courbure. C'est ici que j'ai utilisé les courbes quadratiques mais j'aurais très bien pu utiliser la composition avec globalCompositeOperation en source-in (étape 6).

// courbes quadratiques pour le centre
context.translate(7, 7);

// la preuve que j'y suis allé à tâton,
// j'étais tanné de remplacer la valeur dans les appels suivants!
var curve = 35;

context.beginPath();
context.moveTo(0, curve);
context.quadraticCurveTo(0, 0, curve, 0);
context.lineTo(0,0);
context.fill();

context.restore();
context.save();

context.translate(-7, 7);

context.beginPath();
context.moveTo(-curve, 0);
context.quadraticCurveTo(0, 0, 0, curve);
context.lineTo(0,0);
context.fill();

context.restore();
context.save();

context.beginPath();

context.arc(0, 0, 3, 0, Math.PI*2, false);
context.fill();
context.closePath();

context.translate(7, -7);

context.beginPath();
context.moveTo(0, -curve);
context.quadraticCurveTo(0, 0, curve, 0);
context.lineTo(0,0);
context.fill();

context.restore();
context.save();

context.translate(-7, -7);

context.beginPath();
context.moveTo(-curve, 0);
context.quadraticCurveTo(0, 0, 0, -curve);
context.lineTo(0,0);
context.fill();

Voilà le logo terminé.



Selon le site de la ville, l'emblème de Montréal, créé en 1981, s'inspire des armoiries et représente une fleur dont les quatre pétales forment une interprétation graphique des initiales de la Ville de Montréal: V et M. Au centre, un croisement rappelle que Montréal a toujours été au carrefour des grandes voies de communication et de civilisation.

Enfin, les quatre coeurs créés par le jeu des lignes représentent l'attachement des Montréalais et des Montréalaises à leur ville. La ligne ondoyante qui encercle l'ensemble stylisé rappelle que Montréal est une île; la forme à la fois végétale et aquatique exprime la richesse de l'environnement naturel et le souci qu'a la population de le préserver (source).

La St-Valentin approche à grands pas et on le sait, il n'y a rien de plus romantique qu'envoyer un coeur en HTML5 à sa bien-aimée. Genre.

Ce n'est pas comme si j'avais fait ça souvent dans ma vie (surtout que j'ai rencontré ma copine à l'époque où le HTML 4.x était encore à la mode). Alors je me suis tourné vers les explications de la géométrie pour enfants qui illustre une méthode facile en utilisant des arcs de cercles. On peut imaginer le tracé par le schéma suivant :

Le code :

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.translate(100,100);

context.strokeStyle = '#FF0000'; // rouge, évidemment
context.lineWidth = 5;

context.beginPath();
context.arc(0, 0, 50, 90*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(0, 100, 50, 270*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 0, 50, Math.PI, 90*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 100, 50, 180*(Math.PI/180), 270*(Math.PI/180), false);
context.stroke();
context.closePath();

Résultat :

"Ah que c'est cute !"
- Une fille qui tombe en amour avec le HTML5

J'avoue qu'au début, je pensais utiliser une équation pour calculer une cardioïde mais la pointe du bas si caractéristique à la représentation qu'on se fait d'un coeur stylisé était absente. Ainsi, elle y est, malgré qu'elle soit un peu trop prononcée.

Sans blague, célébrez-vous cette fête de l'amour ? Quel est l'intérêt qu'à date fixe, une fois par année, on honore celle qu'on aime avec les moyens les plus prévisibles qui soient alors que notre douce moitié s'attend inévitablement à recevoir au minimum une boîte de chocolats, un bouquet de fleurs et à passer la soirée au restaurant ? Est-ce que ça ne devrait pas plutôt être le contraire et faire les efforts nécessaires également les autres jours de l'année ? Comme si une journée unique était suffisante pour nous donner bonne conscience. On souhaite tous être différents mais on finit toujours par faire comme les autres. N'existe-t-il pas un moyen pour chaque couple de piger une date au hasard dans le calendrier où chacun réserverait une surprise à l'autre ? Il est grand temps de se réapproprier cette fête pour l'éloigner de son côté commercial.

Les hommes politiques et les couches doivent être changés souvent... pour les mêmes raisons.

Bon matin chers lecteurs. J'espère que tout comme moi, vous vous êtes remis de votre consommation de bière d'hier soir et que vous vous sentez d'attaque pour expérimenter un peu plus le canvas HTML5.

Le petit exercice que j'ai à proposer aujourd'hui sera de tracer une spirale dans le canvas en utilisant un minimum de JavaScript.

Pour débuter, on déclare un canvas dans notre document HTML.

<canvas id="myCanvas" width="500" height="500" style="background-color:black;"></canvas>

En CSS, on lui appliquera une couleur de fond, par exemple noir. Ceci permettra de donner de la flexibilité dans le cas où on voudrait modifier dynamiquement la couleur de fond après avoir fait le tracé car les deux éléments sont complètement dissociés.

<button onclick="document.getElementById('myCanvas').style.backgroundColor='green';">Changer la couleur de fond</button>

On récupère une référence au canvas avant de commencer à dessiner :

var canvas = document.getElementById('myCanvas');

if(canvas && canvas.getContext){

   var context = canvas.getContext('2d');

   // placer ici le code pour tracer la spirale
}

Une fois une référence obtenue, on se déplace au centre du canvas qui correspondra aussi avec le point central de la spirale.

context.translate(250,250);
context.moveTo(0,0);

On définit les propriétés de la couleur du tracé ainsi que de l'épaisseur de la ligne.

context.strokeStyle = '#FFCC33'; // orange
context.lineWidth = 2;

Après avoir déclaré quelques variables dont celles définissant le nombre de circonvolutions (un mot savant pour décrire un tour autour d'un point central) et l'espacement entre chacune, on lance une boucle qui calculera chaque point nécessaire pour tracer la spirale.

var x, y;
var degresEnRadian = 0;
var circonvolutions = 15;
var espacement = 2;

for(var degres = 0; degres<=(360*circonvolutions); degres++){
   degresEnRadian = degres * (Math.PI/180);
   x = espacement * degresEnRadian * Math.cos(degresEnRadian);
   y = espacement * degresEnRadian * Math.sin(degresEnRadian);

   context.lineTo(x,y);
}

Si vous ne voyez rien apparaître, c'est que vous n'avez que défini le trajet qu'empruntera la spirale. Pour la voir apparaître, il suffit d'invoquer la méthode stroke() du canvas, une seule fois, immédiatement après la boucle for.

context.stroke();

Le résultat devrait avoir l'air de ceci (vous pouvez compter le nombre de spires à partir de la fin du tracé sur l'axe des x jusqu'au centre pour voir que ça égale le nombre de circonvolutions demandé).

L'histoire a toujours suscité de l'intérêt chez moi et vivre dans le moment présent pour préparer le futur est une si grande priorité quotidienne qu'on oublie parfois de jeter un oeil au passé, sachant très bien qu'il demeurera statique. Or, quand vient le temps d'y consacrer un peu de temps, on se rend compte que les documents se font plus rares qu'on l'imaginait, qu'ils ont disparus ou se sont détériorés.

Depuis mon enfance, je fréquente ce quartier puisque mes grands-parents y ont habité une bonne partie de leur vie. Je garde un bon souvenir de ma grand-mère qui me remettait un billet de 5$ pour aller acheter une boîte complète de paquets de cartes de hockey Pro Set à la pharmacie Jean Coutu sur Fleury... Ensuite, j'ai fait mes études au CEGEP Ahuntsic et lorsque j'ai emménagé dans mon premier appartement avec ma copine (la seule et unique Madame Code 18 !), le quartier était en tête de liste et nous y sommes resté 5 ans. Puis, nous avons acheté une maison à moins de 2 km de là parce qu'on apprécie la qualité de vie.

Parce que j'y demeure, je m'intéresse grandement à l'histoire de mon quartier. Le paysage urbain se transforme et je suis déjà témoin de quelques changements qui feront que certaines particularités seront vite oubliées. Pour commencer, j'ai débuté mes recherches sur le web et je suis resté des heures à épier les magnifiques albums photos de Philippe Du Berger sur Flickr (un must si vous vous intéressez à Montréal).

Une image de 1907 tirée des archives BANQ illustre une partie du quartier.



À l'époque, le boulevard Gouin s'appelait Back River Road alors que le chemin du Grand Sault changea de nom pour la rue Lajeunesse en 1912 (selon le nom d'une auberge près du Sault-au-Récollet - source). Sur celle-ci, on y trouvait l'hôtel Péloquin du côté ouest qui faisait face à l'hôtel Marcotte de l'autre côté de la rue (lot 237) .



L'hôtel Marcotte fût l'hôte du Montreal Hunting Club, de la Banque Provinciale du Canada et par la suite d'un poste de police (déménagé, maintenant un Carrefour Jeunesse Emploi), jumellé à une caserne de pompier. Le bâtiment actuel a été construit en 1929.



Un article du journal La Patrie paru en 1911 indique que son concurrent, l'hôtel Péloquin fût rasé par les flammes. Il semble que la famille Péloquin avait une certaine notoriété puisqu'on retrouve aussi l'avenue Péloquin immédiatement à l'est de St-Hubert. Selon le répertoire historique des toponymes montréalais, Jean-Baptiste Péloquin cèda cette avenue à la municipalité du village d'Ahuntsic le 28 juin 1900.

Sur les lots illustrés au haut de la carte, on voit aussi le nom de certains propriétaires, dont la famille Major (est-ce parent avec le Rona Major & Major ?). On voit aussi ce qui allait devenir le boulevard Henri-Bourassa à partir de 1954 (anciennement rue Kelly et boulevard Paradis) qui prenait fin à la rue Lajeunesse avant d'être prolongée à l'ouest suite à une série d'expropriations.

Au coin de la rue Berri et du boulevard Gouin, une maison fût démolie pour faire place à une clinique médicale (photo de 1976).



Sur le site web de BANQ, un document de 1911 annonce la construction d'une nouvelle école "qui fera l'orgueil de la population" au coût de 20000$ (selon l'évaluation foncière de la ville de Montréal, l'immeuble (terrain et bâtiment) valait 1,5 millions en 2011). Quelle est-elle ? Il s'agit de l'école Saint-Nicolas, dirigée par les clercs de Saint-Viateur qui, lors de sa fermeture, devint le restaurant La Vieille École (voyez la publicité télé comme c'est alléchant!). Si je me fie au numéro de téléphone de l'annonce, la crêperie Bretonne Ty-Breiz a le même numéro (dans le 514) et siégeait à la même adresse (déménagée sur Jean-Talon ?). Lorsque le restaurant mit la clé sous la porte, le bâtiment fût repris par l'église de la Communauté chrétienne Béthel de Montréal, dont son pasteur considéré comme un escroc à diamants a fait manchette en 2010 au sujet d'argent détourné appartenant au Parc Safari.



Dans le secteur, l'ancien restaurant Harvey's au coin du boulevard Henri-Bourassa et Christophe-Colomb avait pris feu et a été démoli pour y construire des unités de condos. Quelques années auparavant, l'ancien restaurant chinois Hanchow (situé au coin de Fleury et Lajeunesse), abandonné depuis longtemps, eut aussi une nouvelle vocation de condominiums en étant transformé en Square Fleury (par le même constructeur Jules Maltais).



Merci à Kate McDonnell (@elzadra) pour la photo du restaurant.

Plus récemment, comme si la bannière avait une malédiction, on apprenait que l'ancien Harvey's situé coin Lajeunesse et Louvain, devenu plus tard le restaurant Georgina, fermait ses portes pour être converti en d'autres unités de condos par le promoteur Mondev.



Des condos, encore des condos. Le même sort avait été réservé au restaurant La Fondrie qui, si ma mémoire est bonne, était situé ici. Aux dernières nouvelles, c'est un motel douteux de la rue Lajeunesse qui disparaîtra pour faire place à... d'autres condos! Tant mieux, la rue prend du mieux parce qu'on se doute bien que ce ne sont pas des touristes qui viennent profiter des siestes bon marché...

Ce ne sont que quelques exemples des changements qui ont eu lieu dans le quartier lors des 100 dernières années. Si vous avez des vieilles photos ou anecdotes, n'hésitez pas à me contacter, je serais heureux que vous les partagiez avec moi.

C'est quelque chose qui me trotte dans ma tête depuis quelques mois déjà et ce dans le but de trouver une solution à un problème chronique en entreprise : que les employés de la production se fassent constamment interrompre par les gestionnaires pour des soi-disant urgences.

Un imprévu cause des retards dans la production, interrompt la concentration des employés, détourne le focus pour être redirigé vers de nouvelles priorités, repousse les échéanciers du travail en cours, peut mette en péril la date promise inscrite dans le cahier de livraison, nécessite de travailler sous pression et parfois en temps supplémentaire.

Les urgences surviennent majoritairement dans deux contextes :

1. un oubli ou un changement d'idée de la part du client
   
2. la mauvaise planification du gestionnaire de projet
   

Nul besoin de rappeler que l'erreur est humaine et qu'il faut savoir faire face à ces exceptions. Mais quand ça devient abusif, quelqu'un, quelque part, doit mettre ses culottes et freiner l'ardeur des fautifs. Parce que c'est faux de croire que tout est toujours urgent. Si c'était le cas, ça deviendrait la norme (et honnêtement, personne ne souhaite ça).

Or, j'ai constaté le fait suivant : certains chargés de projets que j'ai cotoyé présentent toutes leurs requêtes comme étant urgentes. Toutes. Que ce soit par le biais de promesses faites pour plaire au client ou par égoïsme pour prioriser leurs projets au détriment des autres, ils exagèrent volontairement l'urgence des requêtes.

Comment savoir si ce sont de vraies urgences ou simplement un moyen détourné d'accentuer la pression sur la production des employés ? Bien que je sois en faveur d'aider dans des situations exceptionnelles, quand un chargé de projet présente toutes ses requêtes comme urgentes, ce n'est rien de moins que de l'abus. Il ne faut pas prendre son équipe pour des cons et en créer là où il n'y en a pas. Quoique pour un gestionnaire, c'est inmanquablement le meilleur moyen de se faire détester de ses employés.

Alors comment résoudre cette plaie qu'est l'invention d'urgences qui n'en sont pas ? Si on était dans une équipe sportive, quand les joueurs n'ont plus confiance en le coach, le rendement se met à déraper. Souvent, c'est l'entraîneur qui écope puisque c'est plus facile de remplacer le gestionnaire que de transformer plusieurs éléments de l'équipe (après tout, c'est eux qui sont sur le terrain dans le feu de l'action et qui livrent les résultats).

Comme je suis du genre à laisser une chance aux gens de s'ajuster, le premier réflexe devrait être d'en glisser un mot au principal intéressé. Si la situation persiste, j'aurais tendance à virer la chose au ridicule et à la tourner à l'avantage des employés en instaurant un système permettant de contrôler la fréquence des dérangements et de prise en charge des urgences. Ainsi, à tous les débuts de mois, chaque chargé de projet se verrait remettre un certain nombre de coupons donnant le privilège de déranger un employé pour répondre à une urgence de son choix (comme dans Indiana Jones et la Dernière Croisade, il devra choisir judicieusement faute de quoi, il devra en subir les conséquences).

Si un chargé de projet écoule la totalité de ses coupons, il pourra acheter un nouveau carnet en déposant un montant forfaitaire dans une tirelire commune dont le contenu serait à son tour utilisé pour récompenser les employés à la fin de la semaine ou du mois, par exemple en payant une bière au prochain 5 à 7. Ainsi, ça devient amusant, ça limite les interventions en permettant au gestionaire d'utiliser son jugement pour décider de ce qui est réellement urgent et en cas d'abus, ça reste équitable pour les troupes qui obtiennent en retour un élément de motivation. Au final, ça arrange tout le monde.

Bien sûr, ce système n'est pas sans faille puisqu'il n'est pas à l'abris de la contrebande de coupons et de la contrefaçon/fabrication de faux. Chaque billet pourrait avoir une date d'expiration optionnelle, une valeur d'échange (comme une devise) pour une petite, moyenne ou grande urgence, certains billets pourraient être assignés à des projets spécifiques (un taux de change pourrait être applicable si on veut transférer un coupon d'un projet à un autre). Parce qu'il faut être bon joueur, si l'employé refusait de prendre en charge une requête urgente, celui-ci pourrait payer une taxe symbolique au gestionnaire qui pourra à son tour avoir le privilège de récupérer un coupon.

Ce sont quelques idées pour un premier jet et je suis convaincu qu'il y a quelque chose d'intéressant à faire avec ça. Je compte sur vous pour me faire part de vos idées originales et vos suggestions.

P.s. j'aurais aimé mettre en place ce type de système la semaine dernière dans l'entreprise pour laquelle je travaille mais contre toute attente, j'ai eu plus urgent à faire... Laissez-moi savoir si vous en avez implanté un similaire, je suis curieux de connaître les résultats.

Voici un court résumé du dernier livre que j'ai offert en distraction à mon cerveau : Le C.V. de Dieu de Jean-Louis Fournier.

L'idée initiale est que Dieu a tout fait et s'ennuie. Alors il rédige son curriculum vitae et se rend dans une grande société pour un entretien. Sur un ton humoristique, il est question des raisons qui l'ont poussé à créer les différentes choses, de combien rapportent les droits d'auteur sur ses inventions, le tout entrecoupé d'un aperçu de son test de psychologie, d'un extrait de son dossier médical (le cardiologue note que son coeur est neuf et n'a jamais servi), son casier judiciaire, d'une correspondance entre lui et le Pape (qui vire aux insultes) et d'un épisode où il se plaint de son fainéant de fils qu'il qualifie de "bon à rien". Au final, l'auteur dévoilera si sa candidature a été acceptée ou rejetée.

Le jeu de questions et réponses selon la perspective de Dieu et son intervieweur est intéressante mais trop peu développée à mon goût. On se serait attendu qu'un Dieu-Tout-Puissant soit plus créatif et ludique dans ses explications. Qui sait si l'auteur ne s'est pas retenu pour éviter de choquer certaines personnes ?

C'est un livre à prendre à la légère, très court à lire, que j'aurais mieux fait de feuilleter en une heure directement à la bibliothèque. Parce que pour 12$, il existe des récits beaucoup plus riches en contenu, qui ont nécessité plus de recherche et qui procurent un plus grand plaisir littéraire.

Malgré tout, je suis content de l'avoir lu pour l'idée originale et par divertissement mais je recommanderais davantage God's Debris de Scott Adams (oui, l'auteur de Dilbert) si le sujet vous intéresse.

Pour poursuivre l'exploration du canvas HTML5, je me suis dit qu'un petit exercice pour mieux comprendre l'utilisation des cercles serait intéressant. J'ai choisi de reproduire le pattern du logo de la société Radio-Canada en HTML5, sans me soucier pour l'instant de l'espacement exact entre les éléments qui le composent.



On construira le logo en commençant par l'extérieur car le plus gros problème sera d'arriver à reproduire les arcs externes qui sont tronquées sans dessiner par-dessus les portions existantes. C'est pourquoi je les créerai en premier et j'effacerai dès le départ la zone superflue du cercle.

Pour commencer, créer 4 cercles complets (aux extrémités d'un +).

var context = canvas.getContext('2d');

context.fillStyle = '#FC0814'; // le logo est rouge

// haut
context.beginPath();
// centre(x, y), rayon, angle de départ, angle final, anticlockwise
context.arc(150, 50, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

// gauche
context.beginPath();
context.arc(50, 150, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

// droite
context.beginPath();
context.arc(250, 150, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

// bas
context.beginPath();
context.arc(150, 250, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

On efface un carré à l'intérieur pour ne conserver que l'extrémité des arcs.

context.clearRect(25, 25, 250, 250); // x, y, width, height

Une fois le centre libre, on place un cercle de même rayon en plein milieu.

context.beginPath();
context.arc(150, 150, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

Ici, j'aurais pu construire un autre + de cercles à l'intérieur et effacer, comme on vient de le faire, une zone carrée en plein milieu pour y dessiner ensuite le cercle central. En cours de route, j'ai décidé d'aller de l'avant avec une méthode alternative, question que ce tutoriel soit plus formateur. Nous allons dessiner des demi-cercles en travaillant avec des angles de départ et d'arrivée.

Les angles sont calculés en radians (vous verrez plus loin comment les obtenir à partir des degrés). Ce qu'il faut comprendre, c'est que l'angle de départ commence toujours à l'extrémité droite du cercle sur l'axe des x (considéré 0 et 360 degrés, 0Π ou 2Π ou à 3h sur une horloge). En tournant dans le sens des aiguilles d'une montre, 90 degrés (ou Π/2) sera à 6h (ou au point cardinal sud), 180 degrés (ou Π) sera à 9h (à l'ouest) et 270 degrés (3Π/2) sera à midi (au nord).

Si le concept des radians vous répugne, vous pouvez simplement appliquer cette formule mathématique pour convertir des degrés (0 à 360) en radians :

var degres = 90;
var radians = degres * (Math.PI/180);

J'utilise les deux façons dans le code qui suit :

// haut
context.beginPath();
context.arc(150, 85, 50, 0, Math.PI, true);
context.closePath()
context.fill();

// bas
context.beginPath();
context.arc(150, 215, 50, 0, Math.PI, false);
context.closePath()
context.fill();

// gauche
context.beginPath();
context.arc(85, 150, 50, 90*(Math.PI/180), 270*(Math.PI/180), false);
context.closePath()
context.fill();

// droite
context.beginPath();
context.arc(215, 150, 50, 270*(Math.PI/180), 90*(Math.PI/180), false);
context.closePath()
context.fill();

Il ne reste que des quarts de cercles à mettre à chaque coin. Comme nous savons déjà comment dessiner des demi-cercles, on fera de même pour faire les quartiers en ajustant les angles.

En tentant de faire le premier quart, c'est possible que vous n'arriviez pas du premier coup au résultat attendu :



C'est qu'il ne faut pas oublier de relier le centre en appliquant le point de départ de l'arc avec la méthode lineTo() pour dessiner toute la surface.

// haut gauche
context.beginPath();
context.lineTo(85, 85); // ligne importante pour créer un quart de cercle
context.arc(85, 85, 50, 180*(Math.PI/180), 270*(Math.PI/180), false);
context.closePath()
context.fill();

// haut droit
context.beginPath();
context.lineTo(215, 85);
context.arc(215, 85, 50, 270*(Math.PI/180), 0, false);
context.closePath()
context.fill();

// bas gauche
context.beginPath();
context.lineTo(85, 215);
context.arc(85, 215, 50, 90*(Math.PI/180), 180*(Math.PI/180), false);
context.closePath()
context.fill();

// bas droite
context.beginPath();
context.lineTo(215, 215);
context.arc(215, 215, 50, 0, 90*(Math.PI/180), false);
context.closePath()
context.fill();

Voilà, le pattern du logo est complété.



Mais une minute! Ça veut dire qu'on aurait pu dessiner les arcs de la première étape en omettant d'appeler la méthode lineTo()! Oui, tout à fait, mais vous auriez eu à calculer à tâton les angles exacts. En maintenant vous connaissez deux façons de faire. Le code alternatif pour dessiner l'arc du haut sans effacer de zone ressemblerait à ceci :

context.beginPath();
context.arc(150, 50, 50, 210*(Math.PI/180), 330*(Math.PI/180), false);
context.closePath()
context.fill();

Maintenant que vous êtes à l'aise à manipuler cercles, angles et arcs, libre à vous de reproduire le logo de la SRC dans l'ordre qui vous plait.

Dans ce billet, je vous présenterai les notions élémentaires nécessaires pour débuter avec le canvas HTML5. À la fin de ce tutoriel, vous devriez être en mesure de réaliser des oeuvres graphiques complètement inutiles (la seule limite est votre imagination). Si ce n'est pas le cas, vous trouverez un exemple de mon cru à la fin accompagné de son code source.

Vous aurez besoin :

• un fureteur qui supporte le HTML5 (si vous insistez pour utiliser une version antérieure à Internet Explorer 9, je vous monterai plus loin comment le rendre compatible)
• du JavaScript
• jQuery (optionnel mais comme j'en utilise dans mes exemples...)

1. Créez un document HTML5 puis incluez-y une balise canvas

<canvas id="myCanvas" width="800" height="600">
   Le canvas HTML5 ne fonctionne pas avec ton browser déficient :-(
</canvas>

2. Référence au contexte

Comme on dessinera en deux dimensions, on invoquera le contexte 2D du canvas (tout en s'assurant que le fureteur le supporte).

var canvas = $('#myCanvas');

if(canvas && canvas.get(0).getContext){
   var context = canvas.get(0).getContext('2d');

   // ...
)

3. Tracer une ligne

On commence par une ligne droite horizontale en déterminant les points de départ et d'arrivée. On ajustera les coordonnées x et y du point d'arrivée si on veut obtenir une ligne verticale ou diagonale (le point 0, 0 représente le coin supérieur gauche de la zone du canvas).

context.beginPath();
context.moveTo(50, 25); // x, y
context.lineTo(250, 25); // x, y
context.closePath()
context.stroke();

4. Dessiner un carré

On utilisera fillRect, parce qu'après tout, un carré est un rectangle avec des côtés égaux.

context.fillRect(50, 75, 50, 50); // x, y, width, height

5. Dessiner un rectangle

context.fillRect(50, 175, 100, 50); // x, y, width, height

6. Définir seulement le contour

Attention, le contour est extérieur à la forme donc le rectangle semble légèrement plus grand.

context.strokeRect(200, 175, 100, 50);

7. Dessiner un cercle parfaitement rond

Ce qui peut être mêlant ici, c'est que la coordonnée x, y représente le centre du cercle. Il faut l'aligner en conséquence.

context.beginPath();
// centre(x, y), rayon, angle de départ, angle final, anticlockwise context.arc(100, 325, 50, 0, Math.PI*2, false);
context.closePath()
context.fill();

8. Changer de couleur

Vous n'aimez pas la couleur noire par défaut ? Modifiez la propriété du contexte avant de dessiner. La couleur sera retenue pour tous les futurs traits.

context.fillStyle = '#0000FF';
context.fillRect(50, 400, 100, 50); // x, y, width, height

9. Ajouter du texte

Parce qu'on est fier, on signe son oeuvre.

context.font = "18px Arial";
context.fillStyle = '#7E2217';
context.fillText("http://code18.blogspot.com", 200, 450);

Tadaaaaam ! Voici le résulat :


Euh, j'avais pas dit 10 étapes faciles ? Voici donc la dixième.

10. Donner un sursis au condamné

En cas d'incompatibilité avec une version d'Internet Explorer périmée, on peut inclure en entête le script magique ExplorerCanvas de Google Code et souhaiter que tout se passe pour le mieux (les deux exemples de ce billet sont supportés à 100%).

<!--[if IE]><script src="ExplorerCanvas/excanvas.js"></script><![endif]-->

Allez, on peut faire mieux. Comme par exemple reproduire les barres de calibrage d'un écran de télévision (couleurs obtenues à partir de cette image).

// merci de ne pas me faire remarquer que
// je n'ai pas pris soin d'optimiser le code :-)

$(document).ready(
  function(){
 var canvas = $('#myCanvas');

 if(canvas && canvas.get(0).getContext){

     var context = canvas.get(0).getContext('2d');

     var top = ['F4F4F6', 'FFF461', '7EF3F6', '00FD41', 'FF74FF', 'FF204E', '5260FD'];
     var middle = ['8696FF', '3C281D', 'FF8CFF', '161616', '77F0F5', '131011', 'EDECF1'];
     var bottom = ['5F8CDD', 'FDFDFD', '7237D5', '101214', '0D0E11'];

     var screenWidth = 800;
     var screenHeight = 600;

     var h = 0;
     var colWidth = 0;
     var colWidthTop = parseInt(screenWidth/top.length);
     var colWidthMiddle = parseInt(screenWidth/middle.length);
     var colWidthBottom = parseInt(screenWidth/bottom.length);

     offset = 0;
     colWidth = colWidthTop;
     $(top).each(
  function(){
      context.fillStyle = '#' + this;
      context.fillRect(offset, 0, colWidth, screenHeight); // x, y, width, height
      offset += colWidth;
  }
     );

     offset = 0;
     colWidth = colWidthMiddle;
     h = screenHeight*0.25;
     $(middle).each(
  function(){
      context.fillStyle = '#' + this;
      context.fillRect(offset, screenHeight - h, colWidth, screenHeight - h); // x, y, width, height
      offset += colWidth;
  }
     );

     offset = 0;
     colWidth = colWidthBottom;
     h = screenHeight*0.20;
     $(bottom).each(
  function(){
      context.fillStyle = '#' + this;
      context.fillRect(offset, screenHeight - h, colWidth, screenHeight - h); // x, y, width, height
      offset += colWidth;
  }
     );
 }
  }
);

Wow, c'est dont ben beau! Je pense que je devrais en faire un agrandissement pour l'encadrer dans mon salon.



Je vous l'avais dit, ça ne sert pas à grand chose mais c'est joli.

Hier soir, j'étais invité à un dernier party pour célébrer le nouvel an entre amis (oui un lundi soir, jusqu'à 3h du matin - désolé, nous on ne travaille pas aujourd'hui!). Alors que le buffet prenait place dans la cuisine, le salon s'était transformé en salle de jam à multiple instruments. Après une session improvisée à la guitare classique, piano et tam tam qui était assez agréable à l'oreille, je me suis mis à faire connaissance et à discuter avec quelques convives pour finalement nous rendre compte que nous avions une grande compatibilité dans nos goûts musicaux.

Sans vouloir irriter personne (de toute façon, la fête tirait à sa fin), la musique pop/dance est progressivement disparue pour faire place à un marathon de "connais-tu ça" vraiment intéressant (du moins pour nous). Mon coup de coeur à retenir fût Ewan Dobson, un canadien récipiendaire de plusieurs prix et qui joue de la guitare fingerstyle en s'accompagnant d'effets sonores et parfois visuels (vous n'avez qu'à voir ses montages dans ses autres performances). Malgré l'apparente simplicité, son exécution est parfaite et l'effet est saisissant.



Veuillez excuser sa coquetterie dans le port du chapeau de Raiden (ou de paysan chinois), il paraît qu'il a été diagnostiqué à la fois du trouble du déficit de l'attention, du trouble obsessionnel compulsif et du syndrome de la Tourette. N'empêche qu'il fait de la musique hallucinante qui mérite d'être partagée.

La différence entre un chien et un chat :

• Le chien pense : ils me nourrissent, ils me protègent, ils doivent être dieu.
• Le chat pense : ils me nourrissent, ils me protègent, je dois être dieu.

- Ira Lewis