init

.gitignore

@@ -0,0 +1,5 @@
+.git
+.prettierrc
+node_modules
+.DS_Store
+.vscode

README.md

@@ -0,0 +1,106 @@
+# Homework 2 - Software Prototyping ID311
+
+- _[Live demo](http://hwdemo.prototyping.id/hw2)_
+
+## General Description
+
+In this homework you will implement a variation of [Conway's Game of Life](http://en.wikipedia.org/wiki/Conway%27s_Game_of_Life), experimenting with objects and arrays. You will also have to practice using [git](https://git-scm.com).
+
+<p align="center">
+<img src="assets/main.png" height="300" />
+</p>
+
+## Writing the code
+
+Feel free to modify/delete the code if you prefer, except for the part in which the board is defined.
+
+```js
+// 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 <span style="color:#98E024">green cells</span>. 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.
+
+<p align="center">
+<img src="assets/copy.png" width="500" />
+</p>
+
+- 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](SubmissionNotes.md) 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
+
+<p align="center">
+<img src="assets/submission.png" width="600" />
+</p>
+
+1. After completing your code, make sure to fill up the [SubmissionNotes](./SubmissionNotes.md) 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](https://homework.prototyping.id). 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 15%. Submissions submitted after 24 hours from the deadline will be ignored (score will be 0).
+- Keep a screenshot that proves your completed submission.
+- Coding style might be considered in grading - e.g., unreadable code or code that is very difficult to understand will be rated lower.
+- In case of any mistake in this document, please reached out in Discord. Thanks!

SubmissionNotes.md

@@ -0,0 +1,17 @@
+# Homework submission form
+
+1. **Your name**: NAME
+
+2. **KAIST ID**: 0000000
+
+3. **Email**: YOUR_EMAIL@kaist.ac.kr
+
+---
+
+## Description
+
+Feel free to use this space to add any relevant information. You can add, for example:
+
+- Links to images/Video/Additional material\*\*: [example](http://...)
+- List the people/resources you received help from: ...
+- Anything else you want to say about how to use your softare, issues, or limitations of your work

index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="js/p5.js"></script>
+    <script src="js/p5.dom.min.js"></script>
+    <script src="js/p5.sound.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <meta charset="utf-8" />
+  </head>
+
+  <body>
+    <h1>Homework: Conway's Game of Life</h1>
+    <script src="main.js"></script>
+
+    <div class="footer">
+      <ul>
+        <li><b>E</b> to enter/exit edit mode</li>
+        <li><b>R</b> to reset the board</li>
+        <li>
+          <b>- or = or mouseScroll </b> to decrease/increase size of grid in
+          edit mode
+        </li>
+        <li><b>mouse drag</b> to add cells</li>
+      </ul>
+    </div>
+  </body>
+</html>

main.js

@@ -0,0 +1,142 @@
+/*
+  DI311 Homework 2   
+  Author: Your name (KAIST ID)
+*/
+
+// Constants
+const FONT_SIZE = 20;
+const DEFAULT_BOARD_DIMENSION = 10;
+const REFRESH_RATE = 100;
+
+// 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
+    size: 0, // the size in pixels of the cells
+  },
+};
+
+// YOU CAN CHANGE ANYTHING AFTER THIS LINE
+// =======================================================
+
+// Program's entry point
+
+function setup() {
+  createCanvas(800, 800);
+
+  // Initialize the baord for the first time
+  initBoard(DEFAULT_BOARD_DIMENSION);
+  setInterval(updateBoard, REFRESH_RATE);
+}
+
+function draw() {
+  background(0);
+  // Draw the baord with the cells
+  drawBoard(board);
+  // Draw the head up display
+  drawLifeCounter(board.days);
+}
+
+// -------------------------------------------------  //
+// Some functions definitions to get you started
+
+// Access to cells
+
+/**
+ * Initialize a new Board with a given dimension N
+ * @param {number} boardSize - N is a positive number to determine how many cells NxN
+ */
+function initBoard(boardSize) {
+  if (boardSize < 0) throw new Error('Invalid board size');
+  // PLACEHOLDER
+  console.log('Initialize the board :' + board);
+}
+
+/**
+ *
+ * @param {Array} cells - the array of cells
+ * @param {number} r - row
+ * @param {number} c  - column
+ * @param {boolean} value - setting the cell value true or false
+ */
+function setCell(cells, r, c, value) {
+  // PLACEHOLDER}
+}
+
+/**
+ *
+ * @param {Array} cells - the array of cells
+ * @param {number} r - row
+ * @param {number} c  - column
+ * @returns true or false
+ */
+function getCell(cells, r, c) {
+  // PLACEHOLDER
+}
+
+// Draw and update logic
+
+/**
+ * draw the board
+ */
+function drawBoard() {
+  // PLACEHOLDER
+  background(0);
+}
+
+/**
+ * draw the text "Life: days"
+ */
+function drawLifeCounter(days) {
+  // PLACEHOLDER: Draw the text
+}
+
+/**
+ * Update the board state, including the cells
+ */
+function updateBoard() {
+  // PLACEHOLDER
+  console.log('Updating the baord');
+}
+
+// User Input
+
+/**
+ * When the user press a key
+ */
+function keyPressed() {
+  // PLACEHOLDER
+  console.log(`key ${key} is pressed`);
+}
+
+/**
+ * When the mouse wheel is spun
+ * @param {event} event - event.delta shows the amount of scross
+ */
+function mouseWheel(event) {
+  // PLACEHOLDER
+  console.log('mouse wheel: ', event.delta);
+}
+
+/**
+ * When the mouse is clicked
+ */
+function mousePressed() {
+  // PLACEHOLDER
+  console.log('mouse pressed');
+}
+
+/**
+ * When the mouse is dragged (after being pressed)
+ */
+function mouseDragged() {
+  // PLACEHOLDER
+  console.log('mouse dragged');
+}
+
+// FEEL FREE TO ADD MORE FUNCTIONS AND TO MODIFY THE ONE ABOVE...

style.css

@@ -0,0 +1,21 @@
+html,
+body {
+  padding: 0px;
+  margin: 0px;
+}
+
+canvas {
+  display: block;
+}
+
+h1 {
+  margin: 1em;
+}
+
+.footer {
+  color: brown;
+  position: absolute;
+  margin-top: 820px;
+  margin-left: 1em;
+  font-size: 25px;
+}