mousinho-bitmap-editor-challenge v1.0.8

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 git@github.com: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

Extension Domain Model

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.