Comment dessiner comme un Crayon ?

Question

Crayon Physics Deluxe est un jeu commercial qui est sorti récemment. Regardez la vidéo sur le lien principal pour avoir une idée de ce dont je parle.

Il vous permet de dessiner des formes et de les faire réagir avec la physique appropriée. Le but est de déplacer une balle vers une étoile à travers l'écran en utilisant les engins et les formes que vous construisez.

Alors que le jeu est essentiellement une enveloppe pour le populaire Moteur physique Box2D mais il comporte une fonctionnalité dont je suis curieux de savoir comment elle est mise en œuvre.

Son dessin semble très comme un crayon. Vous pouvez voir la texture du crayon et, au fur et à mesure qu'il dessine, l'épaisseur et l'obscurité varient, comme dans le cas d'un vrai crayon.

(source : kloonigames.com )

(source : kloonigames.com )

La texture de fond est disponible gratuitement aquí .

Quel type d'algorithme serait utilisé pour rendre ces lignes d'une manière qui ressemble à un Crayon ? S'agit-il d'une simple texture appliquée avec une épaisseur et une obscurité aléatoires ou y a-t-il quelque chose de plus ?

Answer 1

Je me souviens avoir lu (il y a longtemps) une brève description d'un algorithme permettant de le faire :

• pour la forme générale de la ligne, on divise le segment en deux en un point aléatoire, et on éloigne légèrement ce point de sa position (la variation dépendant de la distance du point à l'extrémité). Répétez l'opération de manière récursive/aléatoire. De cette façon, vos lignes ne sont pas "parfaites" (ligne droite).

• pour un segment donné, vous pouvez "dépasser" un peu, en étendant une extrémité ou l'autre (ou les deux). De cette façon, vous n'avez pas des articulations parfaites. . Si je me souviens bien, le mieux était de prolonger les extrémités d'origine, mais vous pouvez faire de même pour les sous-segments si vous voulez les diviser visiblement.

• dessiner les lignes avec le motif/le tampon

• il y avait aussi la possibilité (déjà mentionnée) de dessiner avec une opacité de début et de fin différente (pour imiter la tendance à relâcher le stylo à la fin du dessin)

• Vous pouvez utiliser une taille différente pour le tampon au début et à la fin de la ligne (également pour imiter la tendance à relâcher le stylo à la fin du dessin). Pour le même effet, vous pouvez aussi dessiner la ligne deux fois, avec une petite variation pour l'une des extrémités (attention à l'alpha dans ce cas, car la ligne sera dessinée deux fois).

• Enfin, pour une ligne donnée, vous pouvez faire les modifications précédentes plusieurs fois (c'est-à-dire dessiner la ligne deux fois, avec des variations différentes) : l'homme a tendance à répéter une ligne s'il fait des erreurs.

Salutations

Answer 2

Si vous agrandissez l'image, vous pouvez voir un motif de timbre répétitif il y a probablement un petit assortiment qu'il utilise lorsqu'il se déplace de a à b - il pourrait même les faire pivoter .

L'oscillation de la ligne ne doit pas être si difficile à faire. Divisez-la en plusieurs segments aléatoires, choisissez des positions légèrement éloignées de la route directe et dessinez des splines.

Answer 3

Voici un papier qui utilise beaucoup de mathématiques pour simuler le dépôt de cire sur du papier en utilisant un modèle de friction. Mais je pense que votre meilleure chance est d'utiliser un motif répétitif, comme l'a mentionné un autre lecteur, et de faire varier l'opacité en fonction de la pression.

Pour les parties imparfaites du dessin au trait, j'ai une entrée de blog décrivant comment le faire en utilisant des courbes de Bézier.

Answer 4

Vous pouvez baser l'obscurité sur la vitesse. Il s'agit simplement de mesurer la distance parcourue par le curseur entre cette image et la dernière image (rappelez-vous le théorème de Pythagore) et ensuite, lorsque vous allez dessiner ce segment de ligne à l'écran, ajustez l'alpha (opacité) en fonction de la distance que vous avez mesurée.

Answer 5

Il existe un document intitulé Imitation des lignes de crayon dessinées à la main qui couvre un peu de ce que vous recherchez. Bien qu'il ne présente pas une vue très détaillée de l'algorithme, les auteurs couvrent les bases des étapes qu'ils ont utilisées.

Ce document comprend des descriptions de haut niveau sur la façon dont ils ont généré les lignes, ainsi que sur la façon dont ils ont généré les textures pour les lignes, et ils obtiennent des résultats qui sont similaires à ce que vous voulez.