Homework 2 - Objects and Arrays

• Learn about the usage of arrays and objects in JavaScript.
• Live demo

General Description

In this homework you will implement a variation of Conway's Game of Life, experimenting with objects and arrays. You will also have to practice using git.

Writing the code

Feel free to modify/delete the code if you prefer, except for the part in which the board is defined.

// The Board
const board = {
  cells: [], // cells are an array like [true, false, true, true, ...]
  size: 10, // the dimension of the board, like 10x10
  totAlive: 0, // number of cells alive
  days: 0, // days since we started teh colony
  editable: false, // can we modify the board?
  cellProperties: {
    color: '#98E024', // the color of the alive cells - green
    size: 0, // the size in pixels of the cells
  },
};

This object describes the board and its properties. Read through the comments to get an understanding of what each property means.

Overview

The game of life requires you to update the cells (a colony of living and dead cells) following these four rules:

1. Any live cell with fewer than two live neighbors dies as if caused by under-population.
2. Any live cell with two or three live neighbors lives on to the next generation.
3. Any live cell with more than three live neighbors dies, as if by overpopulation.
4. Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.

Dead cells are displayed as empty (black) spaces, while alive cells are displayed as green cells. Besides the basic mechanism of the game, your software should also have several additional features:

In the TOP left of the screen, there should be indicated the number of days since the “beginning” of time. Time starts when the cells become alive. In the beginning, you are in edit mode and can modify the content of the board. You can use the mouse to add or remove cells (click or dragging) within the boundaries of the board - simply draw on the screen and you will see the cells appearing and disappearing. If you enter the key E the game starts. Press E again to go in edit mode.

By pressing R, all alive cells are deleted (reset). If you are in edit mode, by using - and = or scrolling the mouse wheel while in edit mode, you can respectively decrease or increase the total number of cells in the grid (the dimension of the board).

Notes and Tips

Here are some notes to help you out developing the system.

• Your software should use two different grids of cells for displaying and updating the cells. Using the original grid, you can compute for each cell in the grid if it will be dead or alive on the next day and update a hidden grid with the result (but you do not display it right away). Then when all the computations for the next day are made, you can copy back the results to the original grid (or simply swap the grids) and display the results on the screen.

• If you decide to copy grids as indicated above, remember to make deep and not shallow copies of your array. A shallow copy will result in modifying the cells of the original grid as well!
• The refresh rate can be any number of your choice, but I recommend simply a pause of 100 milliseconds between a day and the next. Feel free to change this number for debugging purposes.
• The grid starts with default size (dimension) of 10x10 cells. You can assume that width and height will remain the same (e.g., a square).

About grading

The maximum score of this assignment is 100 points, divide in this way:

1. Develop a working application like the one in the demo. Make sure that all the functionalities listed above work, both in edit mode (40%), and in normal mode (40%), when the board is updating the cells.
2. Submit your local repository with your code (the hidden .git folder). There should be at least 10 commits.

If the program does not compile (e.g., not valid javascript file) the score is 0. If it runs, the score is inversely proportional to the number of errors. If the code has runtime errors (crash), there is a 20 points penalty, plus a penalty for any additional part that cannot be checked.

Heuristics

• Git: 10 commits (10%)
• Correctly filling up the SubmissionNotes form for the submission (10%)
• UI works (30%)
  • reset and modes
  • drawing cells
  • zooming board
• Algorithm (30%)
  • Cells update correctly
  • Days counter works correctly
• Code (20%)
  • Objects and arrays are used correctly
  • Usage of functions (not monolitic code)

How to submit

1. After completing your code, make sure to fill up the SubmissionNotes with your basic info and indicate whether you received any help. Feel free to add any relevant information.
2. Zip the folder of this repository containing your solution.
3. Submit the homework using the class submission system. Choose HW2.
4. For any problem feel free to contact the professor or TA via Discord.

NOTES

• Only submissions made with the system will be considered (e.g., no direct emails to TA or Prof).
• You can re-submit as many times as you want: the last submission only will be considered.
• Submissions after the deadline (even a few minutes) will receive a penalty of 20%. After 24 hours from the deadline, you will receive 0 points.
• Keep a screenshot that proves your completed submission.