Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

We are working on a project for iPhone and Windows Phone 7 where we'd like to be able to generate tea leaves at the bottom of a cup. It doesn't have to look photo-realistic, and actually cartoon-y is ok.

What sort of techniques should we research to accomplish this? Are there any libraries (preferably in C, but we can translate) that would be helpful?

Here are some samples pulled from a Google Image search

enter image description here enter image description here

share|improve this question
Could you be more specific on your requirements? Do they need to be swirling around, different each time? Because if there are no animation or uniqueness requirements I don't see why you can't just have a photo/drawing used as a texture. – phillipwei Apr 3 '12 at 14:48
+1 because this is interesting. – Josh Petrie Apr 3 '12 at 15:27
@phillipwei it's quite obvious they have to be quite different each time, otherwise why should he be asking that? – o0'. Apr 3 '12 at 15:39
Awesome question! :) – Tim Holt Apr 3 '12 at 16:02
666 trifecta! 6 votes on the question, and 6 on the two answers :) – Tim Holt Apr 3 '12 at 17:37
up vote 14 down vote accepted

How I'd probably do it so I could maintain some art control and not potentially spend a long time trying to tweak a procedural method to get it just right...

First, manually create a number of sprites of tea leaf clumps as your art "pool" - not each as an entire cup's worth of tea leaves, but more like a smaller grouping. Say, 20 of them or so?

Then place a random number of them at random coordinates on the "cup" base. Give each a random rotation and scale plus random horizontal and/or vertical mirroring. This ought to create a good result.

This approach will give you the artistic freedom in creating the individual clumps to have the look you want, while allowing for a huge variety of results (assuming sufficient sprites to choose from).

Additionally, with this (and any random method including Perlin noise based), you could actually seed the random number generator at the start of the process with a known seed to make reproducible results. If you save the seed, you are able to exactly recreate the same pattern again by reseeding just before the sequence starts. You could even do fun things like have someone type in their name, turn the letters into a number (sum ASCII, etc.), then use that as the seed as some kind of "this tea leaf pattern customized for YOU!" thing.

Here's some pseudocode for what I mean, if that helps...

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);

Check out for a great discussion about how to pick a random point in a disk and why I am using that whole sqrt/sin/cos thing.

share|improve this answer

Try perlin noise with a binary cutoff value of 0.8 or so?

Uploaded example image to . The first is the second image with a threshold applied. The second is basic perlin noise, for which you can find multiple good references such as and .

You can play a bit with the number and scale of octaves in the perlin noise to vary how smooth the output will look, as well as the threshold to determine how much (on average - as it's noise) tea leaves there will be.

share|improve this answer
This could be a better answer with some links and examples of what could be produced. – Byte56 Apr 3 '12 at 14:14
good idea, although static images can be used and a circular region can be clamped in a pixel shader and the edges of that circle feathered out without needing to produce a per-pixel Perlin noise value (from my experience, this method is a bit slow). – teodron Apr 3 '12 at 15:13
Generating the perlin noise itself is a bit heavy; you can use a precomputed noise texture for this (and plenty other) effect though. You can also use the method to precompute a few too. – dascandy Apr 3 '12 at 15:34
-1. Having looked at a lot of tea leaves, and a lot of sum(1/f) Perlin noise, I can't say they look at all alike. Perlin noise might be the right starting point, but the goal is not suitable for the usual sum(1/f) variant. – user744 Apr 3 '12 at 15:56
I agree that the perlin noise approach is impractical. To verify it I tried recreating the effect in photoshop starting from perlin noise. Here's the result. While I think it looks okay, the problem lies in the amount of tweaking I had to do. Can't really think of a way to recreate all of that tweaking procedurally, so I vote for the sprite based approach suggested by Tim Holt. – David Gouveia Apr 3 '12 at 16:19

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.