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

  • \$\begingroup\$ 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. \$\endgroup\$
    – phillipwei
    Apr 3, 2012 at 14:48
  • \$\begingroup\$ @phillipwei Yes they would have to be different each time, or at least reasonably different enough that it wouldn't feel like stock photos or whatever. \$\endgroup\$
    – Jedidja
    Apr 3, 2012 at 17:33

2 Answers 2


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 http://mathworld.wolfram.com/DiskPointPicking.html 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.


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

Uploaded example image to https://i.stack.imgur.com/nepNF.jpg . 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 http://en.wikipedia.org/wiki/Perlin_noise and http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter26.html .

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.

  • 3
    \$\begingroup\$ This could be a better answer with some links and examples of what could be produced. \$\endgroup\$
    – House
    Apr 3, 2012 at 14:14
  • \$\begingroup\$ 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). \$\endgroup\$
    – teodron
    Apr 3, 2012 at 15:13
  • \$\begingroup\$ 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. \$\endgroup\$
    – dascandy
    Apr 3, 2012 at 15:34
  • 4
    \$\begingroup\$ -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. \$\endgroup\$
    – user744
    Apr 3, 2012 at 15:56
  • 1
    \$\begingroup\$ 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. \$\endgroup\$ Apr 3, 2012 at 16:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .