Comment puis-je générer une texture qui ressemble à des feuilles de thé restantes?


11

Nous travaillons sur un projet pour iPhone et Windows Phone 7 où nous aimerions pouvoir générer des feuilles de thé au fond d'une tasse. Il n'a pas besoin d'avoir l'air photo-réaliste, et en fait le dessin-y est ok.

Quelle sorte de techniques devrions-nous rechercher pour y parvenir? Existe-t-il des bibliothèques (de préférence en C, mais nous pouvons traduire) qui seraient utiles?

Voici quelques exemples extraits d'une recherche Google Image

entrez la description de l'image ici entrez la description de l'image ici


Pourriez-vous être plus précis sur vos besoins? Doivent-ils tourbillonner, différents à chaque fois? Parce que s'il n'y a pas d'exigences d'animation ou d'unicité, je ne vois pas pourquoi vous ne pouvez pas simplement utiliser une photo / dessin comme texture.
phillipwei

@phillipwei Oui, ils devraient être différents à chaque fois, ou au moins suffisamment différents pour ne pas ressembler à des photos de stock ou autre.
Jedidja

Réponses:


15

Comment je le ferais probablement pour que je puisse garder un certain contrôle de l'art et ne pas passer potentiellement beaucoup de temps à essayer de modifier une méthode procédurale pour bien faire les choses ...

Tout d'abord, créez manuellement un certain nombre de sprites de touffes de feuilles de thé comme votre "pool" artistique - pas chacun comme une tasse entière de feuilles de thé, mais plutôt comme un plus petit groupe. Dites, 20 d'entre eux ou plus?

Ensuite, placez un nombre aléatoire d'entre eux à des coordonnées aléatoires sur la base "cup". Donnez à chacun une rotation et une échelle aléatoires ainsi qu'une mise en miroir horizontale et / ou verticale aléatoire. Cela devrait créer un bon résultat.

Cette approche vous donnera la liberté artistique de créer les blocs individuels pour avoir le look que vous voulez, tout en permettant une grande variété de résultats (en supposant que vous aurez le choix entre des sprites suffisants).

De plus, avec cela (et toute méthode aléatoire incluant le bruit Perlin), vous pouvez réellement amorcer le générateur de nombres aléatoires au début du processus avec une graine connue pour obtenir des résultats reproductibles. Si vous enregistrez la graine, vous pouvez recréer exactement le même motif à nouveau en réensemencant juste avant le début de la séquence. Vous pouvez même faire des choses amusantes comme demander à quelqu'un de taper son nom, transformer les lettres en un nombre (somme ASCII, etc.), puis l'utiliser comme graine comme une sorte de "ce motif de feuille de thé personnalisé pour VOUS!" chose.

Voici un pseudocode pour ce que je veux dire, si cela aide ...

var sprites = [...]; // Array of tea leaf sprites

var n_leaves = rand(5)+5; // Random number of leaves from 5-9
for (i=0; i<n_leaves; i++) {
    var sprite_index = rand(sprites.length);  // Random sprite index
    var r = rand(CUP_DIAMETER);          // Random radius for point on disk calc
    var theta = rand(2*PI);              // Random theta (rotation) for point on disk
    var sprite_x = sqrt(r) * cos(theta); // Sprite X
    var sprite_y = sqrt(r) * sin(theta); // Sprite Y
    var sprite_rotation = rand(2*PI);    // Sprite rotation
    var sprite_scale = rand(1) + 0.5;    // Sprite scale from 0.5 to 1.5
    var sprite_h_mirror = (rand(1) < 0.5 ? true : false); // If true, mirror horizontally
    var sprite_v_mirror = (rand(1) < 0.5 ? true : false);   // If true, mirror vertically
    draw_sprite(sprite_index, sprite_x, sprite_y, sprite_rotation, sprite_h_mirror, sprite_v_mirror);
}

Consultez http://mathworld.wolfram.com/DiskPointPicking.html pour une excellente discussion sur la façon de choisir un point aléatoire sur un disque et pourquoi j'utilise tout cela sqrt / sin / cos.


7

Essayez le bruit perlin avec une valeur de coupure binaire de 0,8 ou plus?

Exemple d'image téléchargée sur http://imgur.com/a/Ydc4y . La première est la deuxième image avec un seuil appliqué. Le second est le bruit perlin de base, pour lequel vous pouvez trouver plusieurs bonnes références telles que http://en.wikipedia.org/wiki/Perlin_noise et http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter26.html .

Vous pouvez jouer un peu avec le nombre et l'échelle d'octaves dans le bruit perlin pour varier la fluidité de la sortie, ainsi que le seuil pour déterminer la quantité (en moyenne - car c'est du bruit) de feuilles de thé.


3
Cela pourrait être une meilleure réponse avec quelques liens et exemples de ce qui pourrait être produit.
MichaelHouse

bonne idée, bien que des images statiques puissent être utilisées et qu'une région circulaire puisse être bloquée dans un pixel shader et que les bords de ce cercle se soient effilés sans avoir besoin de produire une valeur de bruit Perlin par pixel (d'après mon expérience, cette méthode est un peu lente ).
teodron

La génération du bruit perlin lui-même est un peu lourde; vous pouvez cependant utiliser une texture de bruit précalculée pour cet effet (et bien d'autres). Vous pouvez également utiliser la méthode pour en précalculer quelques-uns également.
dascandy

4
-1. Après avoir regardé beaucoup de feuilles de thé et beaucoup de bruit (1 / f) Perlin, je ne peux pas dire qu'ils se ressemblent tous. Le bruit de Perlin pourrait être le bon point de départ, mais l'objectif n'est pas adapté à la variante de somme (1 / f) habituelle.

1
Je suis d'accord que l'approche du bruit perlin n'est pas pratique. Pour le vérifier, j'ai essayé de recréer l'effet dans Photoshop à partir du bruit perlin. Voici le résultat . Bien que je pense que cela semble correct, le problème réside dans la quantité de réglages que j'ai dû faire. Je ne peux pas vraiment penser à un moyen de recréer tous ces ajustements procéduraux, donc je vote pour l'approche basée sur les sprites suggérée par Tim Holt.
David Gouveia
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.