mousinho-bitmap-editor-challenge
v1.0.8
Published
An OOD Challenge for MSE trainees
Downloads
3
Readme
Mousinho Bitmap Editor Challenge
An application to create and edit a simple bitmap.
Within the src
directory, the programme is split between:
- Image editor classes containing the functionality to build and edit the bitmap
- Checks containing the input validation functions and Messages class
- The bitmap execution files
The programme is run through the bitmap-editor.js file where the execute function is called within the game loop.
Quick Start
$ git clone [email protected]:AntMousinho/mousinho-bitmap-editor-challenge.git
$ npm install
To run tests
$ npx jasmine
# or
$ npm test
To run the programme
$ node index.js
To see an example of the programme running in the command line, click here
Node Package method
This application is also available as a node package. To install, go to your desired directory and input:
$ npm install mousinho-bitmap-editor-challenge
To run the programme you can either open straight from the command line with:
$ node node_modules/mousinho-bitmap-editor-challenge/index.js
Or you can create your own .js file and require the package, then use $ node [yourFile.js]
to run the application from there.
const bitmap = require('mousinho-bitmap-editor-challenge');
Expected Commands
> ? - Prints a help message containing these instructions
> I M N - Create a new M x N image with all pixels coloured white > (O).
> C - Clears the table, setting all pixels to white (O).
> L X Y C - Colours the pixel (X,Y) with colour C.
> V X Y1 Y2 C - Draw a vertical segment of colour C in column X > between rows Y1 and Y2 (inclusive).
> H X1 X2 Y C - Draw a horizontal segment of colour C in row Y between columns X1 and X2 (inclusive).
> F X Y C - Fill the region R with the colour C. R is defined as: Pixel (X,Y) belongs to R. Any other pixel which is the same colour as (X,Y) and shares a common side with any pixel in R also belongs to this region.
> S - Show the contents of the current image
> X - Terminate the session"
Grid indexing
The generated grid's functionality relies on 1 based indexing.
In an example 6 x 5 grid (spaced out for explanation):
## Input to console
$ node index.js
type ? for help
> I 6 5
## Output Grid (axis numbers added for this example)
5 - O O O O O O
4 - O O O O O O
3 - O O O O O O
2 - O O O O O O
1 - O O O O O O
| | | | | |
1 2 3 4 5 6
Next command to change the colour of one pixel to A
### Input to console
> L 3 4 A
### Output Grid (axis numbers added for this example)
5 - O O O O O O
4 - O O A O O O
3 - O O O O O O
2 - O O O O O O
1 - O O O O O O
| | | | | |
1 2 3 4 5 6
Next Command, a vertical segment of colour B
### input to console
> V 1 2 5 B
###
### Output Grid (axis numbers added for this example)
5 - B O O O O O
4 - B O A O O O
3 - B O O O O O
2 - B O O O O O
1 - O O O O O O
| | | | | |
1 2 3 4 5 6
Domain Model
| Object | Parameters | Message | Context | Output | Done |
| - | - | - | - | - | - |
| image | grid @Array[@Array] | | Create a M x N grid from the constructor. Fill an array with N arrays filled with M 'O's, set this to image.grid| @Array testable by accessing the grid parameter | |
| | | show() | Joins each array together with a new line value | @String | |
| | | clear | resets the grid to the original fill with O
s. Get the grid.length
and the .grid[0].length
to represent input x
and y
| @this.grid | |
| | | colourPixel(inputX, inputY, colour) | The array works on a different axis to regular maths graphs/grids. Need to swap x
and y
and rework their amount to fit array 0 indexing. Find pixel spot in .grid
array and replace with input colour| @this.grid | |
| | | colourVerticalSegment(column, row1, row2, colour) | Use a for loop, setting i
from smallest row input to largest row input. Call this.colourPixel
, with the inputX remaining the same(column
), and replace inputY with i
| @this.grid | |
| | | colourHorizontalSegment(row, col1, col2, colour) | Similar to vertical segment apart from iterating from smallest column input to largest. Call this.colourPixel
with the input row remaining the same, and column becoming i
| @this.grid | |
Extension Domain Model
| Object | Parameters | Message | Context | Output | Done |
| - | - | - | - | - | - |
| Image | | fillRegion(inputX, inputY, colour) | Will have to work out the exact details, but I think it will be a recursive method. Checking if the colour of the target pixel is already the new colour, checking the boundaries of the grid, then moving to the 4 possible boxes that surround the target pixel, calling this.fillRegion()
on each of them | @this.grid | |
| | | getColout(inputX, inputY) | Will need to keep track of the original starting colour of the target pixel as we go through the recursion | @String | |
Approach
- I've done some work on something similar before so I was comfortable working with the nested arrays and having to alter the input arguments for them to work with an array of this type
- Wrote tests for the acceptance criteria, able to visualise how each step was meant to look like when output - Able to put together a domain models, it seemed that the most important bit would be converting the input x and y values into values that the image.grid array would recognise - As above, I defined how I would expect my input to work, using a grid system you would see in Maths, starting from the bottom left of the created grid (the pixel in the bottom left corner being at axis (1, 1))
- Mapped out how I would represent my grid axis inputs and how they relate to the array indexes
- Once the colour pixel function was created, the other functions were fairly simple
- Refactored the
index.js
file from a lot ofelse if
statements into aswitch
statement. Later I will add some more input validation and will probably plit each input into a separate function - Able to recognise that the extension fill function would most likely be a recursive method.
- Removed functionality from
bitmap-editor.js
and into theexecute.js
file to remove it from the game loop - Refactored the
Image
class into 3 classes,Image
,DrawLine
, andBucketFill
and reworked their functionlity with theexecute
function - Created an input validation file that checks for the correct input with each type of image command
- created
Messages
class to hold help message and invalid input message, other messages can be added if needed.