Mark As Completed Discussion

Good afternoon! Here's our prompt for today.

Imagine the implementation for the paintbucket feature in Microsoft Paint, or how certain image filters work. You click on a specific pixel on a screen, and every similar-colored neighboring pixel would change to your selected color. Let's implement a simpler version of that feature.

Description

You're given a n x n matrix array of numbers. Let's say you'd like to replace all similar and connected cells of a certain number with another, starting at column 0 and row 0.

So here's your input:

JAVASCRIPT
1const input = [
2  [1, 1, 1, 1, 1, 1, 1],
3  [1, 1, 1, 1, 1, 1, 0],
4  [1, 0, 0, 1, 1, 0, 1],
5  [1, 2, 1, 2, 1, 2, 0],
6  [1, 2, 1, 2, 2, 2, 0],
7  [1, 2, 2, 2, 1, 2, 0],
8  [1, 1, 1, 1, 1, 2, 1]
9]

And the final result of starting at column 0 and row 0 would be as follows:

JAVASCRIPT
1// floodFill(matrix, startingRow, startingCol, newValue)
2floodFill(input, 0, 0, 3);
3// [
4//   [3, 3, 3, 3, 3, 3, 3],
5//   [3, 3, 3, 3, 3, 3, 0],
6//   [3, 0, 0, 3, 3, 0, 1],
7//   [3, 2, 1, 2, 3, 2, 0],
8//   [3, 2, 1, 2, 2, 2, 0],
9//   [3, 2, 2, 2, 3, 2, 0],
10//   [3, 3, 3, 3, 3, 2, 1]
11// ]

Notice how all the 1s that were bordering the original 1 in column 0 and row 0 have been transformed to 3.

Constraints

  • Given matrix contains non negative integers
  • The array is 0-indexed
  • Let |V|, |E| represent the number of vertices and edges of the graph (if you consider the matrix as a graph)
  • Expected time complexity : O(|V|)
  • Expected space complexity : O(|V|) considering the call stack

Try to solve this here or in Interactive Mode.

How do I practice this challenge?

JAVASCRIPT
OUTPUT
:001 > Cmd/Ctrl-Enter to run, Cmd/Ctrl-/ to comment

Here's how we would solve this problem...

How do I use this guide?

This problem is an implementation of the famous flood-fill algorithm. So we're given a matrix, and we need to traverse an element's neighbors, and then repeat. It's always beneficial to think through a smaller input first.

JAVASCRIPT
OUTPUT
:001 > Cmd/Ctrl-Enter to run, Cmd/Ctrl-/ to comment

So starting at index [0][0] (row 0, column 0), we're looking to move right, down, and bottom right (marked with *s):

JAVASCRIPT
OUTPUT
:001 > Cmd/Ctrl-Enter to run, Cmd/Ctrl-/ to comment

We don't need to worry about the other sides (above, left) because those nodes don't exist.

What are we looking to do? We need to visit every neighbor, and then every one of its neighbors. This sounds like a graph traversal problem.

How many times do we need to perform a node operation? As long as there are nodes that match the initial one that we clicked on or started at.

Knowing this, we could go with either go with a Breadth-first search or a Depth-first search approach.

Step Four

What if we didn't want to use a queue? We can use a recursive depth-first search approach.

The idea here is to use some form of graph traversal mechanism to ensure we cover all necessary vertices within the graph that suit our conditions. Specifically, we are looking for vertices that match our origin point.

With that said, the pseudocode could be as simple as:

  1. Perform a DFS by attempting to visit a surrounding neighbor
  2. See if the cell we're in meets this condition
  3. If yes, repeat step 1 for its neighbors
  4. If not, no-op and don't do anything

Complexity of Final Solution

Let |V|, |E| represent the number of vertices and edges of the graph, respectively. A DFS for a graph implemented as a 2d matrix has O(|V|) time complexity, and O(|V|) space complexity as in the worst case, we can have |V| recursive calls being stored on the call-stack.

We are also giving the iterative solution using stack in DFS below:

PYTHON
OUTPUT
:001 > Cmd/Ctrl-Enter to run, Cmd/Ctrl-/ to comment

One Pager Cheat Sheet

  • Using the flood-fill algorithm, we need to think through a smaller input first to traverse an element's neighbors in the given matrix.
  • We are looking to traverse row 0, column 0 to the right, down and bottom right (*).
  • We don't need to traverse the graph with either a Breadth-first search or Depth-first search approach as long as there are matching nodes for the initial one we started with.
  • We can replace the queue we usually use with DFS using either a recursive approach with O(|V|) time and space complexity, or an iterative approach using a stack for the same complexity.

This is our final solution.

To visualize the solution and step through the below code, click Visualize the Solution on the right-side menu or the VISUALIZE button in Interactive Mode.

JAVASCRIPT
OUTPUT
:001 > Cmd/Ctrl-Enter to run, Cmd/Ctrl-/ to comment

That's all we've got! Let's move on to the next tutorial.

If you had any problems with this tutorial, check out the main forum thread here.