Jo

Okay, so Beau, before we even think about writing a single line of code for this... this whole flood fill idea, I want to take a step back. When you look at an image on your screen, say, a simple smiley face on a white background, what do you think the computer actually... sees?

Beau

What it sees? I mean, I guess... it doesn't see a face, right? It sees... data? Like, a bunch of tiny little dots of color? Pixels, I think they're called.

Jo

Exactly. Pixels. That's the perfect starting point. The computer has no concept of 'face' or 'sky' or 'tree'. It just sees a massive, organized collection of those tiny dots. And the key word there is 'organized'. How do you think it organizes them?

Beau

Uhm... in a big long line? Like reading a book, just one pixel after another?

Jo

You could, but it would be really hard to know which pixels are next to each other, right? If you want to draw a square, you need to know what's above, below, left, and right. So instead, the computer thinks of it as a grid. Literally, just like a piece of graph paper.

Beau

Oh, okay. So like a checkerboard, or a spreadsheet. It has rows and it has columns.

Jo

Exactly! A spreadsheet is a perfect analogy. Every cell in the spreadsheet can hold a value. For an image, every 'cell' is a pixel, and the 'value' it holds is just... its color.

Beau

Okay, that makes sense. So if I have a picture that's, I dunno, a hundred pixels wide and fifty pixels tall...

Jo

Then you have a grid with a hundred columns and fifty rows. In programming, we call that a two-dimensional array, or a 2D array. But it's just a grid. Nothing more complicated than that.

Beau

Got it. So... if we're looking at this grid, this spreadsheet of pixels, how do I tell the computer 'I want *that* pixel right there'? The one in the middle of the smiley face's eye.

Jo

Great question. How do you find a specific cell in a spreadsheet?

Beau

You use the... uh... the column letter and the row number. Like, B5.

Jo

Exactly. It's the same principle. We use coordinates. We just use numbers for both. We say it's in a certain column and a certain row. We usually call them 'x' for the column and 'y' for the row. So you might say 'I want the pixel at x equals 10, y equals 20'.

Beau

So it's like the game Battleship. You call out 'G7' and you see if you hit something. Here we're calling out a coordinate to see what color is there.

Jo

That is a perfect, perfect analogy. That's precisely what we're doing. And that brings up the last piece of this puzzle. How does the computer store the 'color'? It can't store the word 'blue' in that grid cell.

Beau

Right, computers are all about numbers. So... it assigns a number to each color?

Jo

You got it. For our purposes, we can keep it super simple. Let's say we have an image with only two colors, blue and white. We can just decide on a rule.

Beau

Like... zero means white, and one means blue.

Jo

Yep. That's it. So now, that whole visual image of a smiley face? To the computer, it's just a big grid of numbers. A 2D integer array. Most of the grid is filled with zeroes, for the white background. And then there are a few ones scattered in the shape of a circle and two dots and a smile.

Beau

Okay, that's clicking now. It's not magic. It's just a table of numbers. And when we talk about 'flood fill', what we're really talking about is changing some of those numbers in that table, based on what their neighbors are.

Jo

You've just perfectly summarized the entire foundation of this whole thing. That's it. It's all about navigating that grid of numbers. Once you see it that way, the rest is just learning the specific commands to tell the computer how to move from one cell to the next.