Source: sketch.js

  1. /*******************************************************************************
  2. *
  3. *   @file sketch.js
  4. *   @brief Game of Life simulation
  5. *
  6. *   @author <a href='mailto:omareq08@gmail.com'> Omar Essilfie-Quaye </a>
  7. *   @version 1.0
  8. *   @date 06-Jan-2019
  9. *
  10. *******************************************************************************/
  12. /**
  13. *	Variable to hold the shape of a glider, an oscilating pattern which
  14. *	translates across the page.
  15. *
  16. *	@type {Array<Array<number> >}
  17. */
  18. let glider = [[0, 0, 0, 0, 0],
  19. 			  [0, 0, 0, 1, 0],
  20. 			  [0, 1, 0, 1, 0],
  21. 			  [0, 0, 1, 1, 0],
  22. 			  [0, 0, 0, 0, 0]];
  24. /**
  25. *	Variable to hold the shape of a light weight space ship, an oscilating
  26. *	pattern which translates across the page.
  27. *
  28. *	@type {Array<Array<number> >}
  29. */
  30. let lightSpaceShip = [[0, 0, 0, 0, 0, 0, 0],
  31. 					  [0, 0, 1, 1, 1, 1, 0],
  32. 					  [0, 1, 0, 0, 0, 1, 0],
  33. 					  [0, 0, 0, 0, 0, 1, 0],
  34. 					  [0, 1, 0, 0, 1, 0, 0],
  35. 					  [0, 0, 0, 0, 0, 0, 0]];
  37. /**
  38. *	Variable to hold the shape of a Gosper Glider Gun.  This is interesting as
  39. *	it proves that a finite number of cells can replicate indefinietly.
  40. *
  41. *	@type {Array<Array<number> >}
  42. */
  43. let gliderGun = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  44. 				 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  45. 				 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  46. 				 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0],
  47. 				 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0],
  48. 				 [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  49. 				 [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  50. 				 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  51. 				 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  52. 				 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  53. 				 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
  55. /**
  56. *	Used to hold the state of all cell sites in the simulation.
  57. *
  58. *	@type {Array<Array<number> >}
  59. */
  60. let grid1 = [];
  62. /**
  63. *	Used to hold the state of all cell sites in the simulation.
  64. *
  65. *	@type {Array<Array<number> >}
  66. */
  67. let grid2 = [];
  69. /**
  70. *	Stores the width of the simulation grid
  71. *
  72. *	@type {number}
  73. */
  74. let gridX = 75;
  76. /**
  77. *	Stores the height of the simulation grid
  78. *
  79. *	@type  {number}
  80. */
  81. let gridY = 75;
  83. /**
  84. *	Stores the size of one grid cell
  85. *
  86. *	@type {number}
  87. */
  88. let size;
  90. /**
  91. *	Stores which grid is currently being displayed.  This allows for the rules
  92. *	to be applied on the sites of the alternate grid without changing the sites
  93. *	that are being read.
  94. *
  95. *	@type {boolean}
  96. */
  97. let usingGrid1 = true;
  99. /**
  100. *	Flag to see if the simulation has been paused.
  101. *
  102. *	@type {boolean}
  103. */
  104. let paused = false;
  106. /**
  107. *	The interval number of frames between simulation updates.
  108. *
  109. *	@type {number}
  110. */
  111. let updateRate = 2;
  113. /**
  114. *	What type of object will be inserted when the mouse is clicked.
  115. *
  116. *	@type {string}
  117. */
  118. let selectedInsertion = "cell";
  120. /**
  121. *	Function to get the number of live neighbours around a certain cell.  If
  122. *	the cell is at the edge this function will automatically wrap around to
  123. *	the other side of the grid.
  124. *
  125. *	@param {Array<Array<number> >} grid - The array on which the neighbours
  126. *	shall be counted.
  127. *	@param {number} x - The coloumn for the cell that will be checked
  128. *	@param {number} y - The row for the cell that will be checked
  129. *
  130. *	@return {number} - How many cells are alive around the given cell.
  131. */
  132. function neighbours(grid, x, y) {
  133. 	let numNeighbours = 0;
  134. 	for(let col = -1; col < 2; ++col) {
  135. 		for(let row = -1; row < 2; ++row) {
  136. 			if(row == 0 && col == 0) {
  137. 				continue;
  138. 			}
  140. 			let xIndex = (x + col);// % grid.length;
  141. 			if(xIndex < 0) {
  142. 				xIndex += grid.length;
  143. 			} else if(xIndex >= grid.length) {
  144. 				xIndex -= grid.length;
  145. 			}
  147. 			let yIndex = (y + row);// % grid[xIndex].length;
  148. 			if(yIndex < 0) {
  149. 				yIndex += grid[xIndex].length;
  150. 			} else if(yIndex >= grid[xIndex].length) {
  151. 				yIndex -= grid[xIndex].length;
  152. 			}
  154. 			if(grid[xIndex][yIndex]) {
  155. 				numNeighbours++;
  156. 			}
  157. 		}
  158. 	}
  159. 	return numNeighbours;
  160. }
  162. /**
  163. *	Handles key presses.  Will either switch the global selectedInsertion
  164. *	variable, pause the simulation of clear the screen.
  165. */
  166. function keyPressed() {
  167. 	if(key.toLowerCase() == "d") {
  168. 		clearGrid();
  169. 	} else if(key.toLowerCase() == "r") {
  170. 		randomiseGrid();
  171. 	} else if(key.toLowerCase() == "p") {
  172. 		paused = !paused;
  173. 	} else if(key.toLowerCase() == "g") {
  174. 		selectedInsertion = "glider";
  175. 	} else if(key.toLowerCase() == "c") {
  176. 		selectedInsertion = "cell";
  177. 	} else if(key.toLowerCase() == "l") {
  178. 		selectedInsertion = "lightSpaceShip";
  179. 	} else if(key.toLowerCase() == "h") {
  180. 		selectedInsertion = "gliderGun";
  181. 	}
  182. }
  184. /**
  185. *	Will insert the selected object at the mouse location.  Will wrap cells
  186. *	that go over the edge to the other side of the screen.
  187. */
  188. function mousePressed() {
  189. 	if(mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height) {
  190. 		return;
  191. 	}
  193. 	let x = floor(mouseX / size);
  194. 	let y = floor(mouseY / size);
  195. 	if(selectedInsertion == "cell") {
  196. 		if(x >= 0 && y >= 0 && x < gridX && y < gridY) {
  197. 			grid1[x][y] = (grid2[x][y] + 1) % 2;
  198. 			grid2[x][y] = grid1[x][y];
  199. 		}
  200. 	} else if(selectedInsertion == "glider") {
  201. 		for(let i = 0; i < glider.length; ++i) {
  202. 			for(let j = 0; j < glider[i].length; ++j) {
  203. 				let xIndex = (x + j) % gridX;
  204. 				let yIndex = (y + i) % gridY;
  205. 				grid1[xIndex][yIndex] = glider[j][i];
  206. 				grid2[xIndex][yIndex] = glider[j][i];
  207. 			}
  208. 		}
  209. 	} else if(selectedInsertion == "lightSpaceShip") {
  210. 		for(let i = 0; i < lightSpaceShip.length; ++i) {
  211. 			for(let j = 0; j < lightSpaceShip[i].length; ++j) {
  212. 				let xIndex = (x + i) % gridX;
  213. 				let yIndex = (y + j) % gridY;
  214. 				grid1[xIndex][yIndex] = lightSpaceShip[i][j];
  215. 				grid2[xIndex][yIndex] = lightSpaceShip[i][j];
  216. 			}
  217. 		}
  218. 	} else if(selectedInsertion == "gliderGun") {
  219. 		for(let i = 0; i < gliderGun.length; ++i) {
  220. 			for(let j = 0; j < gliderGun[i].length; ++j) {
  221. 				let xIndex = (x + i) % gridX;
  222. 				let yIndex = (y + j) % gridY;
  223. 				grid1[xIndex][yIndex] = gliderGun[i][j];
  224. 				grid2[xIndex][yIndex] = gliderGun[i][j];
  225. 			}
  226. 		}
  227. 	}
  228. }
  230. /**
  231. *	Removes all live cells from the grid.
  232. */
  233. function clearGrid() {
  234. 	grid1 = [];
  235. 	grid2 = [];
  236. 	for(let x = 0; x < gridX; ++x) {
  237. 		let emptyCol1 = [];
  238. 		let emptyCol2 = [];
  239. 		for(let y = 0; y < gridY; ++y) {
  240. 			emptyCol2.push(0);
  241. 			emptyCol1.push(0);
  242. 		}
  243. 		grid1.push(emptyCol1);
  244. 		grid2.push(emptyCol2);
  245. 	}
  246. 	usingGrid1 = true;
  247. }
  249. /**
  250. *	Randomly kills or inserts cells at every point on the grid.  There is a 50
  251. *	percent chance of either occurence.
  252. */
  253. function randomiseGrid() {
  254. 	grid1 = [];
  255. 	grid2 = [];
  256. 	for(let x = 0; x < gridX; ++x) {
  257. 		let randCol1 = [];
  258. 		let randCol2 = [];
  259. 		for(let y = 0; y < gridY; ++y) {
  260. 			randCol1.push(round(random()));
  261. 			randCol2.push(round(random()));
  262. 		}
  263. 		grid1.push(randCol1);
  264. 		grid2.push(randCol2);
  265. 	}
  266. 	usingGrid1 = true;
  267. }
  269. /**
  270. *	Draws the menu with the keyboard operations on the side of the canvas.
  271. */
  272. function drawMenu() {
  273. 	textAlign(LEFT, TOP);
  274. 	textSize(0.035 * height);
  275. 	fill(155);
  277. 	if(paused) {
  278. 		fill(255);
  279. 	}
  280. 	text("Click P to Pause", 1.02 * height, 0.05 * height);
  282. 	fill(155);
  283. 	text("Click D to Delete All", 1.02 * height, 0.05 * 3 * height);
  284. 	text("Click R to Randmoise", 1.02 * height, 0.05 * 5 * height);
  286. 	fill(155);
  287. 	if(selectedInsertion == "cell") {
  288. 		fill(255);
  289. 	}
  290. 	text("Click C to add Cell", 1.02 * height, 0.05 * 7 * height);
  292. 	fill(155);
  293. 	if(selectedInsertion == "glider") {
  294. 		fill(255);
  295. 	}
  296. 	text("Click G to add Glider", 1.02 * height, 0.05 * 9 * height);
  298. 	fill(155);
  299. 	if(selectedInsertion == "lightSpaceShip") {
  300. 		fill(255);
  301. 	}
  302. 	text("Click L to add Light Ship", 1.02 * height, 0.05 * 11 * height);
  304. 	fill(155);
  305. 	if(selectedInsertion == "gliderGun") {
  306. 		fill(255);
  307. 	}
  308. 	text("Click H to add Glider Gun", 1.02 * height, 0.05 * 13 * height);
  309. }
  311. /**
  312. *	p5.js setup function, creates canvas and randomises grid1 and grid2.
  313. */
  314. function setup() {
  315. 	let cnvSize;
  316. 	if(windowWidth > windowHeight) {
  317. 		cnvSize = 0.95 * windowHeight;
  318. 	} else {
  319. 		cnvSize = 0.6 * windowWidth;
  320. 	}
  321. 	let cnv = createCanvas(cnvSize, 0.7 * cnvSize);
  322. 	cnv.parent("sketch");
  325. 	size = height / gridY;
  327. 	randomiseGrid();
  328. }
  330. /**
  331. *	p5.js draw function, draws cells on the canvas and updates the simulation
  332. *	based on updateRate.
  333. */
  334. function draw() {
  335. 	background(0);
  337. 	stroke(155);
  338. 	strokeWeight(1);
  339. 	line(height, 0, height, height);
  340. 	drawMenu();
  342. 	noStroke();
  344. 	for(x = 0; x < gridX; ++x) {
  345. 		for(y = 0; y < gridY; ++y) {
  346. 			if(usingGrid1) {
  347. 				if(!paused && frameCount % updateRate == 0) {
  348. 					let numNeighbours = neighbours(grid1, x, y);
  349. 					grid2[x][y] = grid1[x][y];
  351. 					if((grid1[x][y] == 1) && (numNeighbours <= 1 || numNeighbours >= 4)) {
  352. 						grid2[x][y] = 0;
  353. 					}
  354. 					if(grid1[x][y] == 1 && numNeighbours < 4 && numNeighbours > 1) {
  355. 						grid2[x][y] = 1;
  356. 					}
  357. 					if(grid1[x][y] == 0 && numNeighbours == 3) {
  358. 						grid2[x][y] = 1;
  359. 					}
  360. 				}
  362. 				if(grid2[x][y] == 1) {
  363. 					fill(0, 255, 0);
  364. 					rect(x * size, y * size, size, size);
  365. 				}
  367. 			} else {
  368. 				if(!paused && frameCount % updateRate == 0) {
  369. 					let numNeighbours = neighbours(grid2, x, y);
  370. 					grid1[x][y] = grid2[x][y];
  372. 					if((grid2[x][y] == 1) && (numNeighbours < 2 || numNeighbours > 3)) {
  373. 						grid1[x][y] = 0;
  374. 					}
  375. 					if(grid2[x][y] == 1 && numNeighbours < 4 && numNeighbours > 1) {
  376. 						grid1[x][y] = 1;
  377. 					}
  378. 					if(grid2[x][y] == 0 && numNeighbours == 3) {
  379. 						grid1[x][y] = 1;
  380. 					}
  381. 				}
  383. 				if(grid1[x][y] == 1) {
  384. 					fill(0, 255, 0);
  385. 					rect(x * size, y * size, size, size);
  386. 				}
  387. 			}
  388. 		}
  389. 	}
  390. 	if(!paused && frameCount % updateRate == 0) {
  391. 		usingGrid1 = !usingGrid1;
  392. 	}
  393. }

Documentation generated by JSDoc 3.6.3 on Sun Jun 05 2022 20:13:18 GMT+0100 (BST)