Two Lions Holding The Zürich Flag

Hachures Héraldiques

Deux Lions tenant le blason de Zürich

J’aime beaucoup le logo utilisé par la ville de Zürich : il a un look moderne, mais garde les éléments traditionnels associés à la ville, deux lions et le blason bleu et blanc. Comme sait-on que le blason est bleu et blanc ? Le logo respecte les hachures traditionnelles de l’héraldique. Pour l’azur (bleu) ce sont des lignes horizontales.

On peut voir ces motifs un peu partout en Europe, chaque fois qu’un blason doit être imprimé en noir blanc, ou gravé dans un bas relief. Les hachures pour les métaux et émaux les plus courants, sable (noir), argent (blanc), or (jaune), gueule (rouge), azur (bleu) et sinople (vert), définis par mais il existe des motifs pour des émaux plus rares.

J’aime beaucoup l’idée de représenter les couleurs avec motifs standard, donc j’ai écrit un petit programme Javascript qui prend une image et convertit les couleurs en hachures héraldiques en noir et blanc.

Le code est très simple, il utilise simplement la couleur de chaque pixel pour déterminer la hachure à utiliser. Cela fonctionne assez bien lorsque l’image a beaucoup d’aplats avec des couleurs bien saturées. Le programme supporte toutes les métaux et émaux décris sur la page de la wikipedia sur le sujet. La seule différence est que le noir est rendu en noir solide au lieu d’utiliser la hachure pour sable, ce qui donne un résultat plus proche de ce qu’on attend avec une impression en noir blanc (par opposition à un bas relief).

Pour utiliser le programme, téléchargez une image vers le serveur avec le premier bouton, cliquez sur le bouton transformer pour obtenir l’image convertie, et cliquez sur télécharger pour télécharger l’image vers votre client.

Le code est loin d’être parfait, il n’y a pas de pré-traitement, donc il faut impérativement utiliser des images avec des aplats et des lignes très contrastées (sans anti-aliasing). La limite entre l’orange et le brun est un peu problématique. À noter que les couleurs dites secondaires comme le brun (tenné) ou l’orange ont des hachures différentes selon les sources – la géné-wiki en a de différentes. Le code est disponible sur github.

Flattr this!

Two Lions Holding The Zürich Flag

Heraldic hatchings

Two Lions Holding The Zürich Flag

I really like the logo used by the city of Zürich: it has a modern look, but keeps all the traditional elements of the city, the two lions and the white and blue flag. How do you know the lower left part of the flag is blue? It has the traditional heraldry hatching for blue, horizontal lines.

You can see these patterns in many places in Europe, each time a flag had to be printed or engraved into a wall. The hatching patterns for the most common colours, black, white (silver), yellow (gold), red, blue and green, defined by , are pretty standard, but there are many other patterns for less common colours.

I really like the idea of representing colours using standard patterns, so I hacked together a quick JavaScript program that takes an image and converts it into its heraldic black and white equivalent.

The code is very simple, it just looks up each individual pixel and replaces it with the corresponding hatching – it does the job if the input is an image with flat areas with saturated colours. It supports all the colours described in the french wikipedia page on the subject. The only difference is that black is rendered as solid black, as this gives better results, and is consistent with black and white printing (as opposed to engravings).

To use it, simply upload an image, then click on the transform button, if you want to save the result, click on the download button. The code is far from perfect, there is no pre-processing, so you need images with flat colours and sharp lines (no anti-aliasing). The threshold between orange and brown is a bit problematic. The code is available on github.

Flattr this!

Convoi – Cyberpunk Publié il y a environ 3 jours par Thias Vue de nuit de Shibuya, à Tōkyō Dès le début de la conception de Convoi il me paraissait évident qu’il y aurait un monde cyberpunk, avec des voies rouillées sur des docks détrempés par les pluies acides. Si j’ai des idées assez claires sur ce qui devrait se passer dans ce monde dans le premier scénario, le monde à proprement parlé est resté quelque chose de générique, ce qui m’ennuie.

Properly Localising the Sixteen theme

Convoi – Cyberpunk
Publié il y a environ 3 jours par Thias
Vue de nuit de Shibuya, à Tōkyō
Dès le début de la conception de Convoi il me paraissait évident qu’il y aurait un monde cyberpunk, avec des voies rouillées sur des docks détrempés par les pluies acides. Si j’ai des idées assez claires sur ce qui devrait se passer dans ce monde dans le premier scénario, le monde à proprement parlé est resté quelque chose de générique, ce qui m’ennuie.

This blog currently uses the sixteen WordPress theme. Friday I turned on a multi-language plugin (xili) and theoretically, everything should have worked out of the box:

Sixteen has been already translated into French, Spanish, Russian, Japanese, Arabic and supports translation into more languages.

In practice French did not work out of the box: the french locale files were corrupt, not to mention badly translated, and the plugin uses the timeago JQuery module without setting up localization, you always get English relative time. So here are the steps to fix the Sixteen theme (version 1.3.0.4) for French. Modulo the localization files, this should hopefully work for other languages:

  1. Backup everything
  2. Replace the content of the french localization file sixteen/languages/fr_FR.po with this one.
  3. Use a tool like poedit to generate a new version of sixteen/languages/fr_FR.mo. If the file is zero byte long, there is a problem.
  4. Replace the file sixteen/js/jquery.timeago.js with the latest version (1.4.1).
  5. Download the locale specific timeago configuration for the language you need, in my case it was jquery.timeago.fr.js, put these files into the sixteen/js/ directory.
  6. Replace the content of file sixteen/functions.php with this updated version

If you don’t care about French, you skip steps two and three, but note that the compiled localization files for Spanish are empty, and missing for Arabic, Japanese and Russian, so I doubt these will work straightaway.

Flattr this!

Table de Résolution

🐉

Une des particularités du jeu Rêve de Dragon est sa table de résolution qui est multiplicative. Au lieu d’additionner caractéristique et compétence, comme c’est le cas dans la majorité des jeux, ces deux données sont multipliées. C’est une de ces idées qui sont élégantes sur le papier, et un peu lourdes à mettre en œuvre. Je vois régulièrement sur le web des maîtres de jeu qui simplifient ce système en remplaçant la table par une addition, convaincus que cela revient au même.

Si c’est une simple multiplication, pourquoi faire une table ? Il se trouve que les joueurs ne sont pas très rapide pour faire des produits de tête. De fait, la formule est relativement simple :

Caractéristique × (Difficulté + 10) / 2 

Arrondi au supérieur pour les caractéristiques paires, et vers l’inférieur pour les caractéristiques impaires.
On peut évidemment juste coder cette fonction en javascript et obtenir à nouveau la table.

Note : la colone à -10 est une exception, la valeur est Caractéristique/4.

Flattr this!

Light dithering

As I’m mostly working on back-end and pipelines those days, I don’t do much user facing code. To compensate a bit I have been playing around with Javascript and Html5. While I can’t say that Javascript is elegant, it is very easy to play around with, the modern equivalent of Basic, I suppose.

So I wrote a small dithering function, it uses a simpler error distribution matrix than Floyd–Steinberg as it only distributes the error on the pixels to the right and below the one considered. The algorithm also uses some randomisation to avoid patterns.

In order to respect traditions, this one dithers the classical Lenna image. Just click on the button to load the image and the button to dither the image.

Image: Lenna

Flattr this!

French Flag

Ligatures et petits drapeaux

Peut-être parce que j’ai une écriture abominable, j’adore la typographie. Un sujet qui me fascine en particulier ce sont les ligatures, je trouve merveilleuse l’idée que lorsqu’on assemble des lettres, on se retrouve avec quelque chose d’autre que la séquence de ces lettres. L’autre chose sujet qui me passionne ce sont les caractères exotiques, les caractères chinois, les kanji, tout naturellement, mais aussi la ménagerie de caractères ethniques, techniques ou simplement bizarres que l’on retrouve dans le zoo de l’écriture que l’on appelle communément unicode.

Les dernier arrivés dans la communauté des caractères sont les emoji, une création d’origine nipponne, qui donne le titre de caractère à proprement parler à un sourire, la floraison des cerisiers, ou un envahisseur extra-terrestre 8 bits. Naturellement, il y a des réfractaires, des gens qui arguent que ce ne sont pas de vrais caractères. Ces mêmes gens n’ont pas objecté sur le fait que nous avions un caractère pour représenter le mot « et », l’esperluette dont personne ne connaît le nom. Nous avons aussi des caractères pour des abominations comme le ©opyright, que personne ne saurait prononcer, ou bien des petits drapeaux noir et blancs.

Les 絵文字 (emoji) sont apparus sur les téléphone mobiles japonais et n’ont été standardisé que lorsque les entreprise américaines ont réalisé qu’elles devaient inter-opérer avec ces téléphones, tous capables d’envoyer des e-mails. Pour tout simplifier, chaque opérateur nippon utilisait un standard différent pour ces caractères. Parmi ces caractère se trouvaient quelque petits drapeaux pour les pays importants : le Japon, bien sûr, mais aussi la Corée du Sud, la Chine, les États-Unis, la France, l’Espagne, l’Italie, la Russie, le Royaume Uni et l’Allemagne.

Durant le processus de standardisation, les pays qui ne faisaient pas partie de la liste ont, curieusement, objecté à cette discrimination. Comme souvent dans ces cas là, un curieux compromis a été trouvé : au lieu d’encoder chaque drapeau comme un caractère, il est encodé sur deux caractères spéciaux, deux lettres magiques qui correspondent au pays. Ainsi tous les pays pouvaient être représentés par leur code, et le système de rendu et la fonte sont libres de représenter ce code avec un drapeau. Ainsi la Suisse est représentée ainsi : 🇨🇭 (CH) et la France 🇫🇷 (FR). Sous Mac OS X 10.7, la séquence pour la Suisse reste CH, celle pour la France devient un petit drapeau français.

Ce système a l’avantage de rester compatible avec les système existants tout en laissant la possibilité d’ajouter de nouveaux pays dans les fontes, il n’en reste pas moins compliqué : une séquence de plusieurs caractère unicode correspond a un seul caractère dans le système des téléphones mobiles japonais et à une ligature à l’affichage. Pour tout simplifier, ces caractères ont des valeurs au dessus de 65535, ils ne peuvent donc être exprimés avec deux octets. À l’époque où Java et Javascript ont été conçu, on se disait encore que 16 bits suffiraient pour tous les caractères, et ils utilisaient le système UCS2 qui a entretemps été transformé en utf-16. Le résultat, chacun des deux caractères du drapeau français doit à son tour être encodé sur deux mots de 16 bits (appelés surrogate pair en anglais). La séquence hexadécimale de ce drapeau devient donc : D83C,DDEB,D83C,DDF7, ce qui fait que du code quelque peu ancien pensera que ce drapeau est en fait quatre caractères. Rien n’est simple…

J’ai généré une liste complète des drapeaux en emoji.

Flattr this!

Light coding

I was kind of sick this week-end, so I ended up sleeping a lot, doing various minor chores and some light coding and general fiddling in my blog. I have added some breadcrumb micro data, and generally played around with the Rich Snippet Tool from Google, we will see how various search engine will pick up the meta-data I added to this blog.

I have tagged a few reviews that seem to be understood by the tools, I don’t know if they are relevant enough to appear on web results, but there is a certain irony in having meta-data tags fall from grace a few years ago and seem them become more prevalent. Having a pure XML stream and generate the content HTML from it would be cleaner, but in practice having a single place with the data ensures the data stays in sync, plus everybody hates XML.

I also registered this blog with the bing webmaster tools, which offered me 50$ worth of advertising, if only I lived in the US… Finally I made a new version of the emoji-clock, this one handles half hours.

var date = new Date();
var halfhour = (date.getHours() * 2 + Math.round(date.getMinutes() / 30));
var offset = ((halfhour / 2) + 11) % 12
if (halfhour % 2 == 0) {
  var emo = 0x1F550 + offset;
} else {
  var emo = 0x1F55C + offset;
}
var h = high_surrogate(emo);
var l = low_surrogate(emo);
clock = String.fromCharCode(h) + String.fromCharCode(l);
document.getElementById("emoclock").textContent = clock;


Flattr this!

Emo-clock

One of the striking aspect of Mac OS X 10.7 Lion is the extent to which it borrows from iOS. One amusing aspect of this mobile phone influence, is that the system now supports Emoji characters, which have been standardised within Unicode recently. While Emoji are technically characters, they are small icons, and are rendered both in iOS and in Mac OS X Lion as colour bitmaps. Having a font that is both a bitmap and colour is something I had not seen since the Amiga.

Beside cute animals, the Emoji range also contains some semi-useful icons, including ones that represent clocks faces for the twelve hours (between 0x1F550 and 0x1F55B), so I thought I would hack a small javascript that would display the icon corresponding to the current time. In trying to do this, I uncovered one annoying limitation of javascript: it cannot handle characters that do not fit on 16 bits, if you look at the code points mentioned above, they do not fall within the Basic Multilingual Plane (BMP). If you try to call String.fromCharCode(0x1F550) on Safari, you won’t get an error, just a bogus character in the private area (0xF550).

The workaround for this problem is to understand that javascript does not really work with unicode characters, but with utf-16 elements (regardless of the encoding of the page). You can therefore encode your character using Surrogates. Building the surrogate pair implies some bit manipulations. In the end not much has changed in the last twenty years: access to exotic characters invariably involves hacking around with code-point and escape sequences. On the C64, you had to choose between lower-case and graphical characters…

Here is the resulting code (I factored out the surrogate calculation, mostly to avoid escaping problems with WordPress). If you use web-browser that supports emoji, you should see the actual code in action in the top-right corner of this page, if emoji are not supported, you will probably see an empty square.

var date = new Date();
var hour = (date.getHours() + Math.round(date.getMinutes() / 60) + 11) % 12;
var emo = 0x1F550 + hour;
var h = high_surrogate(emo);
var l = low_surrogate(emo);
clock = String.fromCharCode(h) + String.fromCharCode(l);
document.getElementById("emoclock").textContent = clock;


Flattr this!

De l’Université de Genève aux Princes du Schleswig-Holstein

Bâtiment de l'Université de Genève ⓒ Carl O'Brien – Creative Common Attribution 2.5 License

Hors donc l’Université de Genève a fini par se décider à entrer dans le XXIᵉ siècle et d’organiser ses alumni en leur offrant un portail web. J’ai donc été invité à participer en entrer mes informations. Ce qui m’a paru étrange, c’est que j’ai été, depuis l’obtention de mon diplôme, membre de la Société Académique de Genève. Elle dispose d’un site web sommaire qui est surtout remarquable par ses erreurs d’encodage sur la page d’entrée. On y trouve néanmoins une présentation de sa mission:

La Société a pour but de contribuer au développement de l’enseignement et de la recherche de l’Université de Genève.
Elle gère son patrimoine propre ainsi que celui des Fonds qui lui ont été confiés ; elle en utilise les revenus dans les limites prévues par ses statuts et ceux réglementant les donations et dispositions testamentaires dont elle a bénéficié.

Faire partie de cette association est plus un acte de civisme qu’autre chose. De fait, son existence était complètement sorti de ma tête jusqu’au moment où j’ai commencé à écrire ce billet. Il faut dire que j’ai oublié de communiquer l’un de mes multiples changements d’adresses, donc je n’ai pas reçu de nouvelles de la dite association depuis des années. Visiblement cela ne m’a pas manqué.

Clairement la société académique ne pouvait reprendre la gestion des alumni de l’université, peut-être que cela ne contribue pas développement de l’enseignement et de la recherche dans l’université ? Bref, on a jugé nécessaire qu’une nouvelle organisation était nécessaire. Sans aller jusqu’à évoquer les sempiternels anglo-saxons qui sont plutôt occupés ces jours, l’École Polytechnique Fédérale de Lausanne avait déjà tout cela le siècle dernier : l’Association des Diplômés de l’École Polytechnique Fédérale de Lausanne (A³-EPFL pour faire court).

Je suis membre de l’A³-EPFL depuis l’obtention de mon doctorat. Dès le début, j’ai bénéficié d’un portail où je peux mettre mes informations et entrer en contact avec d’autres alumni. J’ai aussi eu droit à une adresse e-mail permanente, de rabais pour acheter du matériel informatique (notamment les offres Neptun de Apple). L’A³-EPFL dispose de section régionales qui organisent aussi des vistes. Je viens de participer à l’une d’entre-elles, mais en tant que guide vu que l’objet était les bureaux de Google à Zürich. Bref c’est une affaire qui fonctionne.

Mettre en place un réseau d’alumni à posteriori est naturellement bien plus difficile, surtout si on créé une nouvelle organisation. J’ai donc eu droit à divers messages m’invitant à vérifier mon identité, puis à entrer des informations dans un formulaire web pour vérifier que j’était effectivement un alumni. Il est clair que des informations comme le nom, le prénom, l’année et le type du diplôme sont des données hautement secrètes : après tout elles ont seulement été publiées dans le journal… Bref, après que l’on ait validé le fait que j’ai obtenu un diplôme de l’université de Genève (moi-même je commence à avoir des doutes), je peux finalement me connecter au portail.

J’aurais jugé l’interface web de très bonne qualité, à mon sortir de la dite université, en 1997. Je commence à entrer mes informations, l’encodage est de l’Iso Latin-1, donc mes petites manies typographiques résultent en une collection de point d’interrogation. J’essaye d’uploader la photo que j’utilise pour ce genre de site, j’ai droit à une boîte à dialogue qui m’annonce que seul les fichiers JPG sont acceptés (j’avais utilisé un fichier PNG). Lorsque j’essaye d’entrer informations professionelles, l’interface se bloque et m’annonce que j’ai entré des données invalides simplement parce que j’ai eu le malheur d’évoquer un 31 avril. Naturellement elle n’explique pas quel champ est invalide, ça serait trop simple. Point de petit calendrier interactif comme on en trouve partout ces jours. J’entre néanmoins mon emploi actuel, et je me retrouve devant les choix suivants pour les branches :

  • Édition, information, marketing
  • Activités associatives, culturelles, récréatives
  • Activités financières et assurances
  • Agriculture, exploitation forestière
  • Conseil, activités juridiques ou comptables
  • Commerce
  • Construction
  • Enseignement
  • Hôtellerie/restauration

Il est clair que l’Université de Genève prépare mieux aux métiers de la construction que l’informatique. À ce stade, dépité, j’ai regardé le code HTML du site afin de comprendre qui était l’auteur de cette chose. Je peux au moins déclarer que l’honneur de mon alma mater est sauf : le site n’a probablement pas été fait des étudiants de l’institution. Je peux affirmer cela, non pas du fait qu’elle ne forme pas d’informaticiens, comme semblent le croire certains, mais simplement parce que le code Javascript est écrit en allemand. Hors tout le monde sait qu’un Genevois se suiciderait avec une cuillère en plastique plutôt que de parler la langue de Goethe. Le code regorge de trésors comme celui-ci :

{
  var box = document.suche.page;
  var box2 = box.options[box.selectedIndex].value;
  if(document.suche.data.value=='Rechercher')
    { document.suche.data.value=''; }
      if(box2==9) {
        document.suche.action="../lookbook/start.php"; } 
	else if(box2==4) {
	document.suche.action="../home/art.php"; } 
	else if(box2==2) {
	document.suche.action="../resources/dok.php"; } 
	else if(box2==7) {
	document.suche.action="../resources/termin.php"; } 
	document.suche.submit();
}

La validation des données semble être faite du côté client, avec, en cas d’erreur, des messages d’erreur en allemand. S’il n’y a pas de calendrier pour sélectionner les dates, il semblerait que le code pour ce faire est néanmoins inclus. Le portail n’est d’ailleurs pas hébergé sur le domaine de l’université, comme on aurait pu s’y attendre, mais celui du réseau des alumni de l’internat Louisenlund. Il ne s’agit pas d’une université, mais d’un gymnase dans le Schleswig-Holstein qui semble compter parmi ses alumni les princes des familles Schleswig-Holstein, von Hessen, Rantzaus et Sayn-Wittgensteins.

Je me considère comme plutôt cynique, surtout pour les questions ayant trait à l’interaction entre les grandes organisations et l’informatique, mais là, je dois avouer que je suis impressionné…

Flattr this!