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 [e-mail]: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

Package Link

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 Os. 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 of else if statements into a switch 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 the execute.js file to remove it from the game loop
• Refactored the Image class into 3 classes, Image, DrawLine, and BucketFill and reworked their functionlity with the execute 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.