Given the base project, you need to implement floodFillAt
method in the src/paint.js
floodFillAt
: Given x and y coordinates and a color chosen by the user, implement the flood fill feature (the paint bucket feature on any image editing software): Any pixel adjacent to the original pixel at (x, y) that is the same color as the pixel's original color should be changed to the new color, and this should also apply to its adjacent pixels (adjacent includes diagonals, so there are up to 8 adjacent pixels to one pixel). An example of flood fill can be found here. This method should be called when the Flood Fill button is pressed on the screen.
The UI portion of this project should be done using React and have the following components:
- A way for the user to choose an X and Y coordinate. This can either be two inputs, or the user should be able to click a point on the grid directly.
- A picker that allows the chooser to choose a color from the
COLORS
array. - A button that allows the user to run the flood fill algorithm.
- A grid of colors, originally generated by
generateRandomGrid()
(note that the algorithm should work no matter what thewidth
andheight
are, but those do not need to be set by the user via the UI), and then updated each time by running of the flood fill algorithm.
Things to Consider:
- Approach this project as you would any new project i.e. use whatever best practices, styles etc. you would normally use.
- You can add as many new methods, variables, objects, classes (etc.) as you want.
- You can change the given code if you deem it necessary.
- Please feel free to completely regenerate this project should you want to set it up correctly using React, as long as the initial code remains (mostly) untouched.
- The only thing expected is to fill out the 1 method and complete the UI, but feel free to go further if wanted. Anything extra (such as tests) will be counted as bonus points!
- Feel free to use StackOverflow or any other online resource as you would normally do (although please do not search for the answer directly!).
- You should be using Git as you normally would in a project.