Blog des Gens Compliqués

Comment dessiner un t-shirt SVG

28/11/2019 21:19:27+01:00|Par DkVZ
3 minutes de lecture (facile)

Ben alors là on en est déjà au t-shirt? J'ai vraiment pas vu le temps passer alors là dis donc!

Ce post est la suite d'une série sur l'art et le développement personnel pour laquelle on a bien pris soin de suivre l'ordre anatomico-vestimentaire normal:

Aujourd'hui: le t-shirt. Avec tout ça vous allez pouvoir ouvrir votre propre ligne vestimentaire en ligne comme Kanye West.

Alors allons-y et soyons bref comme d'habitude puisque j'ai appelé ces articles "brèves" n'est-ce pas.

Le système de coordonnées est toujours le même, de 0 à 100 sur les deux axes. Néanmoins, pour une fois, on va prévoir le coup et ne pas dessiner aux extrémités de la toile (dit aussi ZONE OUSKON DESSINE) et commencer à dessiner à au moins 5 unités de distance des extrémités.

Qui sait, peut-être qu'on ne devra pas tordre le viewBox cette fois-ci (clin d'oeil clignotant). Voici le croquis initial:

Plan du futur dessin
Purée tu sais même pas dessiner un truc droit?

Avec toute notre expérience ça devrait être du gateau, je commence mon chemin, puis j'arrive là:

Début du dessin sur Codepen

Et... Je sais pas où mettre les coordonnées du point suivant. Peut-être que ce serait pas mal sur un angle droit depuis la dernière ligne? Genre comme ça:

Suite du dessin

Admettons que l'on fixe une distance pour la ligne de manche, comment on peut trouver ce point?

J'ai essayé de me souvenir de l'école primaire et les histoires d'hypoténuse et autres bidules pythagoriciens mais euh...J'ai pas envie de calculer des racines carrées de machin bidules et des sinus de trucs.

Essais mathématiques
C'est à l'envers non?

Plan B: taper des coordonnées au hasard et utiliser une approche incrémentale dite aussi "essai erreur" jusqu'à tomber sur un truc plus ou moins droit.

C'est un peu le thème de cette série et du processus de création et d'apprentissage: on prend une horrible base d'à-peu-près et on la déguise en t-shirt après un nombre inavouable d'essais.

Sauf pour cette fois. Juste en entrant des chiffres plus ou moins logiques j'ai pu obtenir quelque chose qui semble très proche d'un angle droit en deux ou trois essais. Mais bon, comment vous le dire, j'ai beaucoup d'expérience hein.

Plus qu'à répéter ça de l'autre côté et on est bons:

<svg viewBox="0 0 100 100" height="400" width="400">
  <path fill="transparent" stroke="#000"
    d="M5 25 L20 10
       L40 5
       Q50 12 60 5
       L80 10
       L95 25
       L85 35
       L74 25
       V95
       H26
       V25
       L15 35
       Z"
  />
</svg>

Bon... Je pense qu'on va quand même être obligés de tripoter le viewBox parce que là on dirait un t-shirt comme ceux que je mettais quand j'étais ado et si on combine mes autres oeuvre ça va cacher le slip et les 4/9èmes du pantalon.

Etape 1: réduire le max de coordonnées Y à 80 au lieu de 100, ce qui nous donne un rapport de 1,25 entre la plus petite et la plus grande dimension, ce qui nous oblige également à dimensionner l'image sur, par exemple, une hauteur de 375 et largeur de 400.

Vous vous demandez peut-être où je veux en venir avec ces dessins bizarres... He bien, je vais vous le dire.

Commentaires

Il faut JavaScript activé pour écrire des commentaires ici

Ajouter un commentaire

Votre commentaire a été ajouté
(enfin, je pense)