t u t o r i a l

introduction
In this tutorial I will show how you can use the Core Api to easily create a small but nice looking applet. The applet will display snow falling from the top of the screen.

let's get started
First you should open your Java ide/editor or whatever you want to use for programming and create a new class, which we shall name Snow.java
To speed up programming you could copy in the source from the template. - A prefilled template with method signatures, help etc. You will also be needing the Core Api Jar which the Show class will be using. Both are found at the bottom of this page.

the algorithm
The snow algorithm is fairly simple. We want to randomly place some snowflakes on top of the screen and letting them falling down towards the bottom of the screen where finally they disappears. But if the movement is only vertically it will be too boring, so we want not only to move them down, but also to at random move them either left, right or not at all. So what we will be programming is:
  1. Place random pixels (snowflakes) at top of the screen
  2. Starting from the bottom of the screen move each pixel one line down and at random move it either left, right or not at all.
  3. If we are at the bottom of the screen just erase the pixel.

the code
First we start out by the initialising code in init(). We will define the applet to have the size 400x300 with no alpha-blending. This is done like this:

public void init() {
  width = 400;
  height = 300;

  //Creates the screen on which you draw your pixels
  // The false parameter indicates if alpha blending is needed or not
  screen = new ScreenCore(width, height, false);
}


Now that was easy, right? Next we have to implement the algorithm. This is done in the render() method.
Okay, first we place 2 white pixels at random positions on top of the screen.

for(int i=0;i<2;i++){
  int pos = (int)(width*Math.random());
  screen.screenArray[pos] = 0xFFFFFF;
}

The next step in our algorithm is to move the pixels starting from the bottom. So when we find a snowflake, that is a pixel with color 0xFFFFFF, we move it down and left or right or not at all.

int screenSize = width * height - 1;
//Loop starting from back of the array
for (int i = screenSize; i > 0; i--) {
   //Is there show at the current position?
    if (screen.screenArray[i] == 0xFFFFFF) {
    //calculate left, right or neither position
    int leftRightFactor = 1-(int) (3 * Math.random());
    //The snowflakes next position is one position down (i+width)
    //plus the leftRightFactor (-1,0,1)
    int pos = leftRightFactor + width + i;
    //If the snowflakes position is within the screen then draw it
    if (pos<screenSize)
      screen.screenArray[pos] = 0xFFFFFF;

    //delete the old snowflake position
    screen.screenArray[i] = 0x000000;
  }
}

The last thing we had to do according to our algorithm was to delete the snowflake when it reached the bottom of the screen. We do that by only drawing the pixels that are inside our screen. If you look at the source-listning above, I have marked that part in italic-bold.

Now let us see the program in action. Click on the graphics below to load the applet.


s n o w
This is our snow applet.
Wahuuu it rocks! ;-)
snow.jpg


enhancements
Well the applet works, but I must admit that it does not look of much. But hey, this is your chance for playing around!
  1. Create a random number of snowflakes (instead of 2 each time)
  2. Do not create new snow for each frame
  3. Let the snow fall with different speed and let the faster have a lighter color than the slower
  4. Use an image instead of a raw pixel
  5. Place an image in the background
  6. Implement wind, so that some of the snow only moves right or left for a period of time
Hint: Create an inner class that holds information about each snowflake, i.e. speed, color, placement etc.

what next?
Well you could take a look at the template and see how you add fps calculations and how to paint that number (or other text) onto the applet. Otherwise I suggest that you try coding something new - e.g. a fire, water, line-drawing or texture mapping routine.


Files