How To Make Stem Bloom Into A Leaf?

[lgdelacruz]

I’m trying to bloom this stem: A stem is basically an elongated rectangle.

Into this leaf:

I’m trying to animate the blooming of this stem into this leaf. However, I struggle to make it look organic. How can I achieve this animation and make it look like an organic leaf blooming.

Thanks,
Lester

[kfrajer]

Check the easing function:

• Easing (smooth transitions) with functions instead of two variables? - Processing 2.x and 3.x Forum

• Lerp and linear interpolation: https://www.youtube.com/watch?v=8uLVnM36XUc

This is done in java. You should be able to translate it easily to p5.js. If you run into any problem, show your code please (a small version).

Kf

[jeremydouglass]

@lgdelacruz

A stem is basically an elongated rectangle. […] However, I struggle to make it look organic.

I hope you found a solution!

One thing is about organic shapes in general is that they are almost never elongated rectangles. Instead, the are often an iteration of many similar shapes, changing slightly in distance, angle, and/or size each time.

Here are a couple crude examples in Processing(Java).

void draw(){
  fill(0);
  
  // stem 1
  rect(width/3, height, 10, -frameCount);
  
  // stem 2
  for(int i=0; i<frameCount; i++){
    translate(0,-1);
    rotate(-0.002);
  }
  ellipse(2*width/3, height, 10, 10);
}

There is a lot of discussion of this in Shiffman’s The Nature of Code.

with very best regards,
Jeremy