skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mardi 31 janvier 2012

Dans quel pays se cache André ?

Publié par Infinite Loop, à 20 h 07 5 commentaires

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é.


Tags: Le coin du geek, Livres

samedi 28 janvier 2012

Emblème de Montréal en canvas HTML5

Publié par Infinite Loop, à 11 h 53 0 commentaire

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).


Tags: HTML, JavaScript, Montréal

mercredi 25 janvier 2012

Dessiner un coeur avec le canvas HTML5 et passer pour un grand sentimental

Publié par Infinite Loop, à 08 h 33 2 commentaires

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.


Tags: HTML, JavaScript

dimanche 22 janvier 2012

Citation no. 144 sur les hommes politiques

Publié par Infinite Loop, à 20 h 23 0 commentaire

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

- Sir George Bernard Shaw


Tags: Citations

samedi 21 janvier 2012

Dessiner une spirale dans un canvas HTML5

Publié par Infinite Loop, à 11 h 32 0 commentaire

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é).


Tags: HTML, JavaScript

lundi 16 janvier 2012

Ahuntsic, d'hier à aujourd'hui

Publié par Infinite Loop, à 08 h 01 4 commentaires

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.


Tags: Montréal

samedi 14 janvier 2012

C'est urgent parce que ça ne l'est pas

Publié par Infinite Loop, à 10 h 20 2 commentaires

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.


Tags: Lois et principes

mardi 10 janvier 2012

Que contient le CV de Dieu ?

Publié par Infinite Loop, à 19 h 22 0 commentaire

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.


Tags: Livres

dimanche 8 janvier 2012

Logo de Radio-Canada en canvas HTML5

Publié par Infinite Loop, à 11 h 20 0 commentaire

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.


Tags: HTML, JavaScript

jeudi 5 janvier 2012

Canvas 2D HTML5 en 10 étapes faciles

Publié par Infinite Loop, à 18 h 38 3 commentaires

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.


Tags: HTML, JavaScript

mardi 3 janvier 2012

Coup de coeur musical

Publié par Infinite Loop, à 10 h 59 0 commentaire

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.


Tags: Musique

dimanche 1 janvier 2012

Citation no. 143 sur le chien et le chat

Publié par Infinite Loop, à 11 h 18 0 commentaire

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


Tags: Citations

Messages plus récents Messages plus anciens Accueil
S'abonner à : Messages (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ▼  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ▼  janvier 2012 (12)
        • Dans quel pays se cache André ?
        • Emblème de Montréal en canvas HTML5
        • Dessiner un coeur avec le canvas HTML5 et passer p...
        • Citation no. 144 sur les hommes politiques
        • Dessiner une spirale dans un canvas HTML5
        • Ahuntsic, d'hier à aujourd'hui
        • C'est urgent parce que ça ne l'est pas
        • Que contient le CV de Dieu ?
        • Logo de Radio-Canada en canvas HTML5
        • Canvas 2D HTML5 en 10 étapes faciles
        • Coup de coeur musical
        • Citation no. 143 sur le chien et le chat
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft