Javascript, MOD4 Project

This module has been a roller coaster ride. I enjoyed many parts of Javascript and can see the lessons I learned all throughout the modern Internet.

As I approached my project for this module I wanted to do something that I was excited about and lined up with my interests. So I chose to make a simple pixel art web app. As simple as it sounded in my head it turned out to be much more difficult to create.

I learned a great deal making this project but I wanted to focus on one important lesson I learned.

Here is a link to my project if you are interested.

Important Lesson

One of the big lessons I learned is when I tried to create a drawing tool that is pretty standard in any drawing app. It is the flood fill tool. The idea is to click inside an enclosed area and have it fill with the selected color.

This lead me to the concept of Recursion. In the most basic sense, recursion is a function that calls on itself until a condition is met. Once that condition is met the function stops running. Here is an example (the information that follows comes from javascript.info).

Here is the recursive function.

function pow(x, n) {
  if (n == 1) {
    return x
  } else {
    return x * pow(x, n - 1)
  }
}

pow(2, 3) // 8

This function takes x and multiplies itself n times or x to the power of n. It does this by first checking if n == 1. If it does, it just returns the number x because a number to the power of 1 is just the number. If n does not equal 1 then it returns x * pow(x,n-1). It keeps calling this function until n == 1 and then returns the final value.

There is obviously much more to it. But this is about the level of my beginner brain. For a more in-depth explanation please visit this page.

How does this relate to my tool?

My implementation of a pixel art app uses table cells and changes their background color. For the flood fill to work I need to check what the value of the background color is to cells adjacent to where I click. If their background color doesn't match my current color, it changes the color and moves on to the next cell. Sounds like a good case for recursion. Here is the code I used (Not all my code. A lot of research went into it).

function fillBucket(sr, sc, newColor, targetColor, current) {
    if (grid.rows[sr]) {
        current = grid.rows[sr].cells[sc]
    }

    if (sr < 0) {
        return
    }

    if (sc < 0) {
        return
    }

    if (sr > gridHeight.value - 1) {
        return
    }

    if (sc > gridWidth.value - 1) {
        return
    }

    if (grid.rows[sr].cells[sc] !== current) {
        return
    }

    if (current.style.backgroundColor === targetColor) {
        current.style.backgroundColor = newColor
    } else {
        return
    }

    fillBucket(sr - 1, sc, newColor, targetColor, current);
    fillBucket(sr + 1, sc, newColor, targetColor, current);
    fillBucket(sr, sc - 1, newColor, targetColor, current);
    fillBucket(sr, sc + 1, newColor, targetColor, current);
}

It basically checks the 4 cells around where the user clicks (up, down, left, right) and changes the color if it doesn't match. This is a slow method of accomplishing this. It requires a lot of checks. So if the area to fill is big, it can slow down. There are other recursive methods that can do this more quickly but I was already swimming in deep waters and didn't want to confuse myself more.

Conclusion

It was difficult to get this working but it did teach me an important principal and gave me more depth as a programmer. It certainly helped me appreciate the thought that goes into programming a seemingly simple feature.