Arrays

Eventually we will produce this page.
- The big idea here is
  - Generate a set of random points random colors.
  - These are all at full intensity, and age 0.
  - Each time the Move One Step button is pressed.
    - Copy the full intensity cell one to the right.
    - Age all other cells, and diminish the intensity.
- To accomplish this I will use a different color model.
  - RGB is the color model that we normal work with.
  - HSL stands for Hue, Saturation and Light
    - Hue is the base color.
    - It is measured in degrees.
    - A hue of 0 will be red.
    - A hue of 120 will be green
    - A hue of 240 will be blue.
    - For our program we will generate random hue between 0 and 360
  - Saturation is how intense the color is
    - It is a percentage.
    - 100% is a pure color.
    - 0% is washed out.
    - Somewhere in between is faded.
    - We will use a saturation of 100%
  - Lightness
    - This is also a percent.
    - 100% is white
    - 0% is black.
    - We will start at 50% and have this fade (or change) to 0 or 100 depending on the background color.
  - We will discuss this further when we get to color.
  - But for now, if I allow lightness to slowly change for a cell, the cell will appear to fade.
- HTML has a hsl function that will convert a color in HSL to a value html can use.
I started with my default canvass class.
I wanted a 2D array to hold the data I will eventually draw on the canvas.
This will be an array of structs, specifically I want to hold
- HSL values from above
- An age, which will be -1 if the cell is not active.
- And 0 or higher if the cell is active.
- I probably could do this with a bool.
```
var cellvalue = {'hue': 0, 'saturation': 100, 'light': 50, 'age': -1};
```
In javascript there are many array methods.
- But once again, let's take a C++ approach.
- A new array is created by declaring it
```
var names=["red","green", "blue"]
```
- Take a look at this file

But there are no two dimensional arrays, so we will do the C++ thing

this.data = new Array(this.width);
for(var x =0; x < this.width; x++) {
    this.data[x] = new Array(this.height);
    for(y =0; y < this.height;y++) {
       this.data[x][y] = {'hue': 0, 'saturation': 0, 'light': 100, 'age': -1}
    }
}

This routine is part of the constructor.
To control this application I needed three main member functions
- Redisplay will redraw the canvas in it's current state.
- NewPattern will generate 100 new random points.
- Move will make the dots appear to move, leaving a streak behind them.
- All three will manipulate the array.

Redisplay

Clear the canvas.

Step through the array

If the item is "alive" draw it.

Redisplay: function() {
    var color, x,y;
    this.Clear();

    for(x =0; x < this.width; x++) {
       for(y=0; y < this.height;y++) {

          // only draw cells age 0 or older 
          if (this.data[x][y].age >= 0) {
              color = "hsl(" + this.data[x][y].hue + ', '
                               + this.data[x][y].saturation + '%, '
                               + this.data[x][y].light + '%)'
              this.ctx.fillStyle = color
              this.ctx.fillRect(x,y,2,2);
          }
       }
    }
    return;
},

NewPattern

Nothing really new here
Blank the array.

Generate the points as before, with a change in the color

BlankArray: function() {
    var x,y;
    for(x =0; x < this.width; x++) {
       for(y=0; y < this.height;y++) {
           this.data[x][y] = {'hue': 0,
                              'saturation': 0,
                              'light': 50, 'age': -1}
       }
    }
},

NewPattern: function() {
    var x,y;
    var count;
    var hue;

    this.BlankArray();

    for(count = 0; count < this.points; count++) {

        x = Math.floor(Math.random()*this.width);
        y = Math.floor(Math.random()*this.height);

        hue =  Math.floor(Math.random()* 360);

        this.data[x][y].age = 0;
        this.data[x][y].hue = hue;
        this.data[x][y].saturation = 100;
        this.data[x][y].light = 50;
    }
    return;
},

Move is the only tricky routine.

Normally this type of thing would require two arrays
- A current version from which we read data
- A new version to which we write data.
- Then we would swap and do it again.
In this case, however, notice that we only are moving to the right so we can process the array from right (high x) to left,
- Process the last column, this will only "fade" colors and age the cell, do not generate new cells.
- Process the other columns from right to left.
  - If the cell is age 0, copy it to the right, generating a new cell.
  - Fade the color, age the cell.

I wrote two utility functions to help with this

Move0 will copy create a new cell to the right.

Move0: function(x,y) {
    this.data[x+1][y].age = 0;
    this.data[x+1][y].hue = this.data[x][y].hue;
    this.data[x+1][y].saturation = 100;
    this.data[x+1][y].light = 50;
    return;
},

Move1 will fade the current cell.

Move1: function(x,y) {
    if (this.data[x][y].age >= 0) {
        this.data[x][y].light += this.lightChange;
        if (this.data[x][y].light <= 0 || this.data[x][y].light >= 100) {
           this.data[x][y].age = -1;
        } else {
           this.data[x][y].age++;
        }
    }

    return;
},

Move then becomes

Move: function() {
    var x,y, nextX;

    for(y=0;y < this.height;y++) {
       this.Move1(this.width-1, y);
    }

    for(x=this.width-2;x>=0;x--) {
       for(y=0;y < this.height;y++) {
           if (this.data[x][y].age == 0) {
              this.Move0(x,y);
           }
           this.Move1(x,y);
       }
    }

    this.Redisplay();
    return;
},

I wanted a drop down menu for the background color so here it is

Background Color:
<select id="BGColor" onchange="canvas.SetClearColor(this.value); canvas.Redisplay()">
    <option value="white">white</option>
    <option value="black">black</option>
</select>

This uses the select tag.
When a choice is made, the SetClearColor() and Redisplay methods are called.

The entire code is here