Getting the Java Animated Waterfall right

Getting waterfall speed and source image right

One of the nice features about the final version of the David Griffiths lake applet is that it can be controlled by JavaScript

At the moment, using the source and overlay images the applet looks like this:

Wouldn't it be nice if you could switch the overlay on and off so that you could see where the source image needed modifying?

You can. Try using these controls:

Overlay On Off No animation
Wave Speed

( Use fallssource2.jpg
Use fallssource3.jpg - don't use these last two radio buttons yet)

Here's the source code needed to do this. You'll notice I've added a fourth overlay image which has no transparent gaps 'fallsoverlay4.gif'. I produced this by pasting the original fallssource.jpg over the top of fallsoverlay3.gif and saving it with a new filename. You'll need to copy this into your waterfall folder.

<applet code="lake.class" name="lake" width="128" height="314" align="left" id="lake" />
  <param name=image value="fallssource2.jpg" />
  <param name="horizon" value="1" />
  <param name="overlay" value = "fallsoverlay3.gif" />
  <param name="speed" value = "15" />
  <param name="href" value ="http://www.jaydax.co.uk" />
  <img src="fallssource.jpg" alt="" border="0" width="128" height="314" />
  </applet>
<p align="left"><form name="control" id="control">
<p>&nbsp;Overlay 
<input name="Overlay" type="radio" value="fallssource2.jpg" checked onClick="lake.setOverlayValue('fallsoverlay3.gif');" /> 
On 
<input name="Overlay" type="radio" value="" onClick="lake.setOverlayValue('');" /> 
Off
<label>
<input name="Overlay" type="radio" value="" onClick="lake.setOverlayValue('fallsoverlay4.gif');" />    </label>
No animation<br />
<label>&nbsp;Wave Speed
<select name="speed2" id="speed" onChange="lake.setSpeedValue(speed.value);">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option selected="selected">15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
<option>44</option>
<option>45</option>
<option>46</option>
<option>47</option>
<option>48</option>
<option>49</option>
<option>50</option>
<option>51</option>
<option>52</option>
<option>53</option>
<option>54</option>
<option>55</option>
<option>56</option>
<option>57</option>
<option>58</option>
<option>59</option>
<option>60</option>
<option>61</option>
<option>62</option>
<option>63</option>
<option>64</option>
<option>65</option>
<option>66</option>
<option>67</option>
<option>68</option>
<option>69</option>
<option>70</option>
<option>71</option>
<option>72</option>
<option>73</option>
<option>74</option>
<option>75</option>
<option>76</option>
<option>77</option>
<option>78</option>
<option>79</option>
<option>80</option>
<option>81</option>
<option>82</option>
<option>83</option>
<option>84</option>
<option>85</option>
<option>86</option>
<option>87</option>
<option>88</option>
<option>89</option>
<option>90</option>
<option>91</option>
<option>92</option>
<option>93</option>
<option>94</option>
<option>95</option>
<option>96</option>
<option>97</option>
<option>98</option>
<option>99</option>
<option>100</option>
</select>
</label>
</p>
</form>
  <p> ( 
    <label>
    <input name="radio" type="radio" id="sourceimage" value="sourceimage" checked="checked" onClick="lake.setImageValue('fallssource2.jpg');" />
    Use fallssource2.jpg</label>
    <label> <br />
       
    <input type="radio" name="radio" id="sourceimage2" value="sourceimage" onClick="lake.setImageValue('fallssource3.jpg');" />
    Use fallssource3.jpg</label>
  - don't use these last two radio buttons yet)</p>

Experiment to find the best speed setting for the most realistic falling water.

You'll notice that at the bottom of the applet you get dark bands in the waves. This is easily noticed at a speed setting of '1' and the overlay turned off. This is what causes that annoying flicker. The answer to this is to load fallssource2.jpg back into your photo editor and to use the lighten brush to progressively lighten the bottom of the image. Save the altered image as fallssource3.jpg (Now you can try those extra radio buttons.)

Here's a comparison of the three source images produced so far. Notice the lighter area at the base of the final image: