Difference between revisions of "Doc:Realistic Rain Animation"

From Synfig Studio :: Documentation
Jump to: navigation, search
m
m (Text replace - "{{Category|NewTerminology}}" to "{{NewTerminology}}")
 
(5 intermediate revisions by 3 users not shown)
Line 4: Line 4:
 
{{Category|Tutorials}}
 
{{Category|Tutorials}}
 
{{Category|Tutorials Advanced}}
 
{{Category|Tutorials Advanced}}
 +
{{NewTerminology}}
 
<!-- Page info end -->
 
<!-- Page info end -->
 +
Somes of the screenshots needs to be updated with 0.64.0
  
 
'''Work in progress...'''
 
'''Work in progress...'''
Line 15: Line 17:
  
  
This tutorial is not "advanced" as in "difficult", but it requires that you are familiar with the Synfig {{l|Doc:Interface|interface}} and {{l|Doc:Quick_Overview|tools}}, as these will not be covered here. Start with the more {{l|Category:Tutorials_Basic|basic tutorials}} and keep an eye on the {{l|Category:Manual}} if you are not familiar with terms such as "{{l|Blend_Method_Parameter}}" or "{{l|Encapsulate}}". The duration of this tutorial is estimated between 30 and 50 minutes for an average Synfig user.
+
This tutorial is not "advanced" as in "difficult", but it requires that you are familiar with the Synfig {{l|Doc:Interface|interface}} and {{l|Doc:Quick_Overview|tools}}, as these will not be covered here. Start with the more {{l|Category:Tutorials_Basic|basic tutorials}} and keep an eye on the {{l|Category:Manual}} if you are not familiar with terms such as "{{l|Blend_Method_Parameter}}" or "{{l|Group}}". The duration of this tutorial is estimated between 30 and 50 minutes for an average Synfig user.
  
 
For alternative set-ups, additional settings, variants and more, kindly refer to the {{l|Doc_talk:Realistic_Rain_Animation|talk page}}.
 
For alternative set-ups, additional settings, variants and more, kindly refer to the {{l|Doc_talk:Realistic_Rain_Animation|talk page}}.
Line 29: Line 31:
  
 
==step 1: The Clouds==
 
==step 1: The Clouds==
[[File:Realistic_rain_tutorial_clouds.png|200px|thumb|right|The ''intensity mask'' layer]]
+
[[File:Realistic_rain_tutorial_clouds.png|200px|thumb|right|Clouds in the sky]]
  
 
Start with a blank Synfig file, any size will do. To match a good-looking widescreen ratio this tutorial uses 360x203.
 
Start with a blank Synfig file, any size will do. To match a good-looking widescreen ratio this tutorial uses 360x203.
Line 41: Line 43:
 
:* ''Animation Speed'' to 0.5
 
:* ''Animation Speed'' to 0.5
  
2. On top of '''gr-nsClouds''', add a {{l|Circle Layer}}, name it '''crTestObject''' and set these values/parameters for the test object:
+
==step 2: An object under the rain...==
 +
[[File:Realistic_rain_tutorial_object.png|200px|thumb|right|Somethings under the sky]]
 +
 
 +
1. On top of '''gr-nsClouds''', add a {{l|Circle Layer}}, name it '''crTestObject''' and set these values/parameters for the test object:
  
 
:* ''Color'' to 024123
 
:* ''Color'' to 024123
Line 47: Line 52:
 
:* ''Falloff'' to Sigmond
 
:* ''Falloff'' to Sigmond
  
3. On top of '''crTestObject''', add a new {{l|Noise Gradient Layer}}, name it '''gr-nsSlowRain''' and set these values/parameters for a first kind of rain:
+
==step 3: Now it's raining!==
 +
[[File:Realistic_rain_tutorial_rain.png|200px|thumb|right|The rain]]
 +
 
 +
1. On top of '''crTestObject''', add a new {{l|Noise Gradient Layer}}, name it '''gr-nsSlowRain''' and set these values/parameters for a first kind of rain:
  
 
:* ''Amount'' to 0.4 [or less if you want clearer skies]
 
:* ''Amount'' to 0.4 [or less if you want clearer skies]
Line 56: Line 64:
 
:* ''Super Sampling'' --> flag it
 
:* ''Super Sampling'' --> flag it
  
Now encapsulate the gr-nsSlowRain layer and name it '''enSlowRain''' and convert:  
+
Now group the gr-nsSlowRain layer and name it '''enSlowRain''' and convert:  
  
 
:* ''Origin'' to Linear
 
:* ''Origin'' to Linear
Line 64: Line 72:
 
:* ''Slope'' to 0,-10
 
:* ''Slope'' to 0,-10
  
4. Well, now select the '''enSlowRain''' and duplicate it naming the new encapsulation layer to '''enRain''' and its gradient inside '''gr-nsRain'''.
+
2. Well, now select the '''enSlowRain''' and duplicate it naming the new encapsulation layer to '''enRain''' and its gradient layer inside '''gr-nsRain'''.
 +
 
 +
Change the parameters of the two layers as follow:
 +
For '''enRain'''
 +
 
 +
:* ''Amount'' to 0.6
 +
:* ''Origin''|''Slope'' to 0,-100
 +
 
 +
For '''gr-nsRain'''
 +
 
 +
:* ''Amount'' to 0.6
  
Change the parameters of the two layers as follow :  
+
==step 4: Final settings==
 +
[[File:Realistic_rain_tutorial_fs.png|200px|thumb|right|The final(?) touch!]]
  
  
  
# On top of '''grBaseNoise''', add a {{l|Linear Gradient Layer}}, name it '''intensity mask''', and move the gradient ''point 1'' & ''point 2'' to leave some white space on top and some black space below, as illustrated in the picture. Change its ''blend mode'' to {{l|Blend_Method_Parameter#Subtract|subtract}}.
 
# On top of '''intensity mask''', add a {{l|Solid Color Layer}}, name it '''fire color'''. Change its ''color'' to some warm orange, we used #ff6700, and its blend mode to {{l|Blend_Method_Parameter#Color|color}}.
 
# Change the ''amount'' of both '''fire color''' and '''intensity mask''' to achieve an effect you like. We used amounts of 0.7 color and 1.4 mask to achieve the result illustrated in the picture at the end of step 1.
 
[[File:Raging fire tutorial step1.png|center|Result after step 1]]
 
</ol>
 
  
 
==step 2: bring it to life!==
 
==step 2: bring it to life!==
 
Bringing this fire to life is about moving the ''base noise'' upwards. Therefore we
 
Bringing this fire to life is about moving the ''base noise'' upwards. Therefore we
  
# {{l|Encapsulate}} '''base noise''' and rename the new group into '''moving base'''. Make it move upward by {{l|Convert|converting}} its ''origin'' to {{l|Convert#Linear|Linear}} and setting the origin ''slope'' to 0x200pt.
+
# {{l|Group}} '''base noise''' and rename the new group into '''moving base'''. Make it move upward by {{l|Convert|converting}} its ''origin'' to {{l|Convert#Linear|Linear}} and setting the origin ''slope'' to 0x200pt.
  
 
At this point you can {{l|Preview}} a few frames, to appreciate the effect of moving flames... and quickly notice how dull and boring it looks: the flames fade away when rising but lack of movement and surprise. Let's add some!
 
At this point you can {{l|Preview}} a few frames, to appreciate the effect of moving flames... and quickly notice how dull and boring it looks: the flames fade away when rising but lack of movement and surprise. Let's add some!
Line 99: Line 113:
  
 
# Add, above '''irregularities''' group, a new {{l|Linear Gradient Layer}}. Rename it '''flame source''' and move its gradient ''point 1'' & ''point 2'' to leave no white space at the bottom of the frame, and huge black area on top, as illustrated in the "flame source layer" picture. Change its ''amount'' to 0.6 and ''blend'' mode to {{l|Blend_Method_Parameter#Add|Add}}.  
 
# Add, above '''irregularities''' group, a new {{l|Linear Gradient Layer}}. Rename it '''flame source''' and move its gradient ''point 1'' & ''point 2'' to leave no white space at the bottom of the frame, and huge black area on top, as illustrated in the "flame source layer" picture. Change its ''amount'' to 0.6 and ''blend'' mode to {{l|Blend_Method_Parameter#Add|Add}}.  
# Below layer '''fire color''' create a new {{l|BLine Tool|BLine Region}} (no need for an outline) of a shape where you want brighter flames (have a look at the picture at the end of this step for an example) and rename it '''high flames region'''. Changes its {{l|Feather Parameter}} to 50pt, its ''blend'' mode to {{l|Blend_Method_Parameter#Add|Add}}, and its ''color'' to some light gray (eg #8c8c8c).
+
# Below layer '''fire color''' create a new {{l|Spline Tool|Spline Region}} (no need for an outline) of a shape where you want brighter flames (have a look at the picture at the end of this step for an example) and rename it '''high flames region'''. Changes its {{l|Feather Parameter}} to 50pt, its ''blend'' mode to {{l|Blend_Method_Parameter#Add|Add}}, and its ''color'' to some light gray (eg #8c8c8c).
  
 
{{l|File:Realistic_fire_tutorial_step3.png|center|Result at the end of step 3}}
 
{{l|File:Realistic_fire_tutorial_step3.png|center|Result at the end of step 3}}

Latest revision as of 10:12, 20 May 2013

Languages Language: 

English


Somes of the screenshots needs to be updated with 0.64.0

Work in progress...

Introduction

Realistic rain tutorial completed.png
This tutorial will guide you in making a realistic rain animation with Synfig.

Be sure to have a look at the gallery below to see videos exploiting this technique from which this tutorial is born!


This tutorial is not "advanced" as in "difficult", but it requires that you are familiar with the Synfig interface and tools, as these will not be covered here. Start with the more basic tutorials and keep an eye on the Manual if you are not familiar with terms such as "Blend Method" or "Group". The duration of this tutorial is estimated between 30 and 50 minutes for an average Synfig user.

For alternative set-ups, additional settings, variants and more, kindly refer to the talk page.


The basic idea of the technique we'll be using is inspired from the tutorial "Fire in Photoshop", by Eros:

  • a vertically moving background, filled with black & white clouds (i.e.: noise). The light areas will become bright, yellow flames, and the dark ones will become red-ish flames.
  • a fixed mask to darken the top of the fire, hence extinguishing the flames (i.e: a black & white vertical gradient)
  • an orange color layer to turn on the heat

You can optionally download the File:Realistic rain tutorial.sifz, available under Creative Commons (by nc sa).

step 1: The Clouds

Clouds in the sky

Start with a blank Synfig file, any size will do. To match a good-looking widescreen ratio this tutorial uses 360x203.

1. Add a new black & white Noise Gradient Layer, name it gr-nsClouds and change these values/parameters for the clouds:

  • Gradient to 00002e,ffffff
  • Random Seed to 1274099207
  • Size to 84,44 pt
  • 'Interpolation to Cubic
  • Animation Speed to 0.5

step 2: An object under the rain...

1. On top of gr-nsClouds, add a Circle Layer, name it crTestObject and set these values/parameters for the test object:

  • Color to 024123
  • Radius to 22.5
  • Falloff to Sigmond

step 3: Now it's raining!

1. On top of crTestObject, add a new Noise Gradient Layer, name it gr-nsSlowRain and set these values/parameters for a first kind of rain:

  • Amount to 0.4 [or less if you want clearer skies]
  • Blend Method to Staight
  • RandomNoise Seed to 123456789
  • Size to 0.5,17
  • Inperpolation to Spline
  • Super Sampling --> flag it

Now group the gr-nsSlowRain layer and name it enSlowRain and convert:

  • Origin to Linear

change then the Slope parameter that appear:

  • Slope to 0,-10

2. Well, now select the enSlowRain and duplicate it naming the new encapsulation layer to enRain and its gradient layer inside gr-nsRain.

Change the parameters of the two layers as follow: For enRain

  • Amount to 0.6
  • Origin|Slope to 0,-100

For gr-nsRain

  • Amount to 0.6

step 4: Final settings



step 2: bring it to life!

Bringing this fire to life is about moving the base noise upwards. Therefore we

  1. Group base noise and rename the new group into moving base. Make it move upward by converting its origin to Linear and setting the origin slope to 0x200pt.

At this point you can Preview a few frames, to appreciate the effect of moving flames... and quickly notice how dull and boring it looks: the flames fade away when rising but lack of movement and surprise. Let's add some!


The idea of the technique used in this tutorial is to brighten zones that will become hot, yellow flames, and darken zones that will be dark, red flames. As moving base does just that being a black and white cloud, we'll apply the same steps again to add some irregularities:

  1. Duplicate the moving base layer, rename the new group into irregularities, its contained noise to irregularities noise and raise it above moving base. Change all the settings we adapted before:
    • Change irregularities noise RandomNoiseSeed to anything else (eg. drop the last figure) and size to 5x15pt
    • Change irregularities origin slope to 50x350pt, amount to 0.5 and zoom to 1.2

A snapshot of these last settings is given in the picture at the end of step 2.

Result after step 2

step 3: some hot zones

The flame source layer

To complete this tutorial, we will add some hot spots at the base (figuring the source of the flames) and left of the fire, to make it less rectilinear. This is done by slightly brightening some areas underneath the fire color layer.

  1. Add, above irregularities group, a new Linear Gradient Layer. Rename it flame source and move its gradient point 1 & point 2 to leave no white space at the bottom of the frame, and huge black area on top, as illustrated in the "flame source layer" picture. Change its amount to 0.6 and blend mode to Add.
  2. Below layer fire color create a new Spline Region (no need for an outline) of a shape where you want brighter flames (have a look at the picture at the end of this step for an example) and rename it high flames region. Changes its Feather Parameter to 50pt, its blend mode to Add, and its color to some light gray (eg #8c8c8c).
Realistic fire tutorial step3.png


Congratulations. You're (already) done! Render and enjoy.

You can optionally download the result File:Realistic fire tutorial.sifz, available under Creative Commons (by nc sa)... but you just made your own so there's no need!

Fine tuning & fooling around

Various settings allow you to achieve very different fire types and effects. Contribute to this section or discuss them in the talk page!


Some "easy" tailoring include:

  • play with the gradient of base noise to change the ratio between bright and dark flames.
  • tune the irregularities zoom, amount and blend mode to get a wild aggressive fire (0; 0.4; hard light) or something more voluptuously quiet (1.9; 0.5; composite)
  • make your high flames more realistic by coloring the high flames region with a vertical gradient, dark grey on top, white at the bottom.
  • simulate wind (ie. change the direction of the flames) by adapting the slope of moving base' and irregularities.
Be cautious playing with the fire!

A few fun but less realistic tunings:

  • play with the color of fire color to get a blue or pink fire.
  • check turbulent of base noise and/or irregularities noise to get a psychedelic effect.
  • set any place of the picture to fire just by adding a light gray spot below fire color anywhere, just as we did high flames region in step 3.

Gallery

You used this technique? Leave a link here and a few hints in the talk page!


Languages Language: 

English