Lien vers là où tout a commencé: https://dkvz.eu/breves/91

Il est temps de continuer notre série sur le dévloppement, l'art, et la méthode, ou comment arriver à ses fins étape par étape.

Aujourd'hui: Le slip.

- Attends, sérieusement tu vas dessiner un slip sur ton site vitrine hautement professionnel?

A une époque où il y a des conventions de furries, des porte-écrans Apple à €1000 et des chats sans poils, c'est un type qui dessine des slips vectoriels qui vous dérange? Il est peut-être temps de grandir et considérer le sujet avec maturité. Comme moi, quoi.

Même Wikipedia aborde le sujet de façon encyclopédique, avec illustrations sérieuses.

De toutes manières le slip est essentiel pour notre développement artistique parce qu'il a des courbes, contrairement au t-shirt. Pour moi c'est évident mais j'imagine que tout ça est encore frais pour vous.

Commençons la méthode par son commencement: un Croquis de Départ Sommairement Annoté, dit aussi CDSA.

Bon euh... C'est un peu plus compliqué que le pantalon.

C'est courant en développement: être face à un problème qui semble au delà de vos capacités.

En réalité, avec patience, méthode, discipline, détermination et Google, vous pouvez transformer tout ça en expérience d'apprentissage hautement transférable dans d'autres domaines de compétence par la même magie associative de notre cerveau qui fait qu'on est persuadés que notre horoscope dans Marie-Claire ne peut pas correspondre aussi précisément sans qu'il y ait une réalité concrète entre le mouvement des corps célestes, nos dates de naissance, et le futur.

Oui, le cerveau est à la fois extrêmement stupide et extrêmement habile, mais ce post est trop long pour parler de dualité universelle **bruit de météorisme**.

Bon mais du coup comment on va faire avec ces courbes...

Je décide de partir sur des courbes dites QUADRATIQUES (c'est SVG qui dit, moi j'appelle ça des courbes "Q"). Les vrais gens utilisent souvent plutôt les courbes de bezier, mais perso j'ai jamais rien compris à ces trucs avec double poignées de contrôle dans Photoshop ou Gimp.

Il y a aussi les ARCS qui consistent à définir des ellipses avec deux rayons puis faire des intersections dans euh... Ouais non, on va faire des courbes simples avec un point de contrôle ce sera bien.

Quand j'ai dessiné mon schéma je pensais qu'il fallait déterminer la position de ce point:

Alors vu qu'il allait me falloir le centre du cercle j'ai dû commencer à réfléchir avec des sinus et des PI et tout ça. Obligé.

Sauf qu'en fait c'est un autre point qu'il faut pour la courbe:

Du coup, pas besoin de la trigonométrie. Comme pour le pantalon je pars sur des dimensions globales 0-100 sur les deux axes et j'arrive à ceci après avoir écrit le chemin extérieur:

Il y a un truc qui me dérange dans ce design... Bien sûr! Un slip ça peut pas être carré. C'est logique, vous avez déjà vu un slip carré?

Retirons 1/4 de la dimension Y avec noter bon vieil attribut magique viewBox:

<svg viewBox="0 0 100 75" width="400" height="300">
  <path fill="transparent" stroke="#000"
    d="M0 0 H100 
       V35 
       Q60 35 60 75
       H40
       Q40 35 0 35
       Z" 
  />
</svg>

Beaucoup mieux. Il manque juste quelques détails, une ligne supérieure, et les deux courbes de la fameuse POCHE KANGOUROU.

Et là je me rends compte que ces courbes doivent commencer ou finir au milieu des courbes Q du slip. Et je vois pas trop comment trouver cette dimension sans du sinus pythagorien.

On est à 45° sur un cercle de rayon 40 donc la hauteur du point en partant du bas devrait être:

40*cos(PI/4)

J'utilise les radians parce que je suis ingénieur. Reste plus qu'à soustraire la hauteur totale (75) du résultat et j'ai la position Y du point. Le problème c'est 40*sin(PI/4) ça fait genre 28.2842712474 ce qui a un peu trop décimales pour mon élégante échelle 0-100 donc j'ai essayé 27, 28, 29 etc. et J'ai choisi celui qui donnait le meilleur résultat (ITERATION PAR ESSAI/ERREUR) — à savoir 28.

Pour la position X il faut utiliser le cosinus. La beauté de cet exercice c'est qu'on ne saura jamais si je me sous gouré parce que cos(PI/4) et sin(PI/4) ça vaut la même chose. Les choses sont bien faites parfois. De toutes façons on voit clairement sur mon croquis que c'est la même valeur. Oui. Même exercice pour créer l'autre courbe.

Nous arrivons au code suivant:

<svg viewBox="0 0 100 75" class="center-image responsive-img" style="max-width: 400px">
  <-- Le contour: -->
  <path fill="transparent" stroke="#000"
    d="M0 0 H100 
       V35 
       Q60 35 60 75
       H40
       Q40 35 0 35
       Z" 
  />

   <-- La... LIGNE SUPERIEURE: -->
  <line x1="0" y1="10" x2="100" y2="10" stroke="#000" />

   <-- Les deux courbes intérieures: -->
  <path fill="transparent" stroke="#000" 
    d="M28 43 Q40 35 40 10" />
  <path fill="transparent" stroke="#000" 
    d="M72 43 Q60 35 60 10" />
</svg>

Soit:

Sauf que comme pour le pantalon, j'utilise les coordonnées 0 et maximales ce qui fait que le tracé dépasse de la ZONE DESSINABLE.

Tripotons le viewBox avec -5 sur les deux origines et +10 sur les deux maxima. Comme ceci:

viewBox="-5 -5 110 85"

Ce qui nous amène à la question: pourquoi viewBox est genre le seul attribut au monde à être en camelCase?

Nonon je m'égare, on obtiens plutôt le résultat final:

Je vous avais dit qu'on y arriverait.