Pixeliser et pointiller vos images à la volée avec SeuratJS

Incorporé au sein de Raphaël (et non pas Raphaël Goetter cette fois-ci), cette petite bibliothèque JavaScript va simplifier le travail des graphiques vectoriels sur le Web. En effet, SeuratJS est un plugin créé par Greg Smith va permettre de faciliter le travail des développeurs, puisque vous allez avoir la possibilité de pixeliser et pointiller des images à la volée.

Selon le créateur, le plugin porte bien son nom, lire Georges Seurat, fonctionne en extrayant les données de couleur d’une image de votre choix et reconstitue une image issue de l’original en lui ajoutant plein de primitifs graphiques en SVG.

Voici ce qu’indique Smith au sujet du plugin :

SeuratJS is a JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extacting color data from an image of your choice and rebuilding the original with filled graphical primitives in SVG. Seurat makes it extremely easy to alter what primitives are generated (how they look and where they appear) and how they animate.

SeuratJS uses the HTML5 canvas to parse color data and, because of this, the library operates entirely on the client side.

Voici quelques exemples de ce qui peut être fait :

Pour mettre en œuvre cette bibliothèque c’est très simple. Après avoir récupéré les sources du projet, incluez le fichier seurat.js au sein de votre projet. Ensuite, vous allez pouvoir jouer avec l’objet JavaScript, composé de différentes options :

• imageSource – A path to the image you are going to pointalize. This is the only REQUIRED setting
• step – A number determining the pixels between color samples in the image. Used for both the x and y directions. By default 10
• shape – A string indicating which built in primitive generator to use. Either ‘circ’ or ‘rect’. By default ‘circ’
• attributes – An associative array describing the attibutes each primitive will have to start. By default {stroke: “none”}
• animator(element,x,y,step) – A function to provide each primitive with an animation. element is a generated primitive with the color sample from (x,y). step is as described above
• generator(paper,x,y,color,step,attributes) – A function to create an element object corresponding to sample (x,y) from the image. paper is the Raphael object we are drawing to. step and attributes are as described above. Must return Raphaël element object

Ainsi, vous pouvez par exemple définir un pointillisme en rectangle en incluant dans un premier temps la bibliothèque dans l’entête de votre fichier :

Puis, incluez le code JavaScript suivant :

Et voici le rendu :

SeuratJS peut être téléchargé gratuitement depuis la page d’accueil du projet ou par l’intermédiaire de GitHub.

Plutôt sympa comme bibliothèque non ?