Projet d’une application permettant de créer et personnaliser son modèle de tartan. Ce projet et ses fonctionnalités principales ont été imaginés suite à des discussions avec un couple de kiltmakers.
Work in progress : développement des algorithmes
Afin d’acquérir de nouvelles connaissances dans l’utilisation des éléments canvas, input et celle des pseudo-classes CSS, j’ai codé des fonctionnalités séparément pour m’entraîner.
– Le canvas
Fonctionnalités étudiées
See the Pen MacLeod Tartan-Test by Sebastien (@Sebastien-S) on CodePen.
- Afficher le tartan visuellement en reproduisant l’alternance des fils ;
- Afficher la couleur des fils composants le tartan ;
- Afficher la composition des bloques composant le tartan :
- Présenter et modifier la couleur des fils et leur quantité ;
- Prévisualiser la composition de chaque bloque ;
- Changer de modèle de tartan avec des modèles prédéfinis ;
- Transformer l’affichage en modifiant l’ordre des blocs (alternatives) ;
Pour le moment, toute la section de présentation de la composition des bloques (sur la gauche) n’affecte pas le rendu sur le canvas mais hérite des modifications de la palette et fonctionne indépendamment pour le moment.
– Les champs de texte
Pour les professionnels, la palette et le design d’un tartan sont notés sous la forme de chaînes de caractères qui suivent un pattern spécifique. Je me suis basé sur les normes utilisées par le registre des tartans écossais.
La palette sera notée comme ceci :
K=BLACK;DR=#8B0000#DARK RED;G=GREEN;
Si la composition du design est symétrique, elle sera notée :
DR/8 G64 K44 G/64
Si la composition est asymétrique, alors elle sera notée :
...DR8 G64 K44 G64...
Fonctionnalités développées
- Limiter la validation des input en fonction d’un pattern spécifique ;
- Convertir une chaîne de caractères en listes et sous-listes d’input :
- Diviser une chaîne de caractères selon un pattern spécifique ;
- Extraire des informations de chaque segments de la chaîne de caractères ;
- Afficher la conversion de la chaine de caractères en tableau d’objet JS ;
- Afficher la composition de chaque bloque avec le nombre total de fils utilisés ;
See the Pen TreadsCount – converter by Sebastien (@Sebastien-S) on CodePen.
Pour essayer ce composant, vous pouvez coller la chaîne suivante dans le champs ‘Symmetrical / Reflective pattern’ :
A/2 A2 C14 D24 // A4 E6 A2 F12 // B4 C8 A/2
ou cette autre chaîne, dans le champs ‘Asymmetrical / Repeating pattern’ :
…A2 A2 C14 D24 . A4 E6 A2 F12 . B4 C8 A2…
Pour le moment, le résultat obtenu en cliquant sur le bouton ‘Tisser’ sera semblable car ici tout l’intérêt réside uniquement dans le traitement de ces deux notations différentes.
Par la suite, un traitement devra être effectué en fonction de la notation utilisée.
– La palette
Fonctionnalités étudiées
- Convertir une chaine de caractères en palette de couleurs ;
- Ajouter / supprimer une pastille de couleur sur la palette ;
- Actualiser la chaine de caractères à chaque modification de la palette ;
- Présenter une liste de couleurs définie au sein de laquelle choisir ;
- Afficher les caractéristiques de chaque couleur de la liste ;
- Ajouter une couleur personnalisée dans la liste si elle n’existe pas déjà ;
See the Pen palette by Sebastien (@Sebastien-S) on CodePen.
La chaîne de caractères peut comporter des options pour qualifier les couleurs personnalisées. Une fonctionnalité pourra être ajoutée pour conserver, afficher et modifier ces options.
