384 lines
160 KiB
HTML
384 lines
160 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0074)https://cms.tecky.io/course/map-v24/WEF008?p=02-Game-of-Life-code-along.md -->
|
|
<html class=" "><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="manifest" href="https://cms.tecky.io/manifest.webmanifest"><link rel="icon" href="https://cms.tecky.io/favicon.ico"><title>Tecky CMS</title><meta name="viewport" content="initial-scale=1.0, width=device-width"><meta name="next-head-count" content="5"><meta name="next-font-preconnect"><link rel="preload" href="./2_files/8ee64f3b72390362.css" as="style"><link rel="stylesheet" href="./2_files/8ee64f3b72390362.css" data-n-g=""><link rel="preload" href="https://cms.tecky.io/_next/static/css/52e7235144871e64.css" as="style"><noscript data-n-css=""></noscript><style data-n-href="/_next/static/css/52e7235144871e64.css">@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_AMS-Regular.a79f1c31.woff2) format("woff2"),url(/_next/static/media/KaTeX_AMS-Regular.1608a09b.woff) format("woff"),url(/_next/static/media/KaTeX_AMS-Regular.4aafdb68.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/_next/static/media/KaTeX_Caligraphic-Bold.ec17d132.woff2) format("woff2"),url(/_next/static/media/KaTeX_Caligraphic-Bold.b6770918.woff) format("woff"),url(/_next/static/media/KaTeX_Caligraphic-Bold.cce5b8ec.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_Caligraphic-Regular.55fac258.woff2) format("woff2"),url(/_next/static/media/KaTeX_Caligraphic-Regular.dad44a7f.woff) format("woff"),url(/_next/static/media/KaTeX_Caligraphic-Regular.07ef19e7.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/_next/static/media/KaTeX_Fraktur-Bold.d42a5579.woff2) format("woff2"),url(/_next/static/media/KaTeX_Fraktur-Bold.9f256b85.woff) format("woff"),url(/_next/static/media/KaTeX_Fraktur-Bold.b18f59e1.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_Fraktur-Regular.d3c882a6.woff2) format("woff2"),url(/_next/static/media/KaTeX_Fraktur-Regular.7c187121.woff) format("woff"),url(/_next/static/media/KaTeX_Fraktur-Regular.ed38e79f.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/_next/static/media/KaTeX_Main-Bold.c3fb5ac2.woff2) format("woff2"),url(/_next/static/media/KaTeX_Main-Bold.d181c465.woff) format("woff"),url(/_next/static/media/KaTeX_Main-Bold.b74a1a8b.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/_next/static/media/KaTeX_Main-BoldItalic.6f2bb1df.woff2) format("woff2"),url(/_next/static/media/KaTeX_Main-BoldItalic.e3f82f9d.woff) format("woff"),url(/_next/static/media/KaTeX_Main-BoldItalic.70d8b0a5.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/_next/static/media/KaTeX_Main-Italic.8916142b.woff2) format("woff2"),url(/_next/static/media/KaTeX_Main-Italic.9024d815.woff) format("woff"),url(/_next/static/media/KaTeX_Main-Italic.47373d1e.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_Main-Regular.0462f03b.woff2) format("woff2"),url(/_next/static/media/KaTeX_Main-Regular.7f51fe03.woff) format("woff"),url(/_next/static/media/KaTeX_Main-Regular.b7f8fe9b.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/_next/static/media/KaTeX_Math-BoldItalic.572d331f.woff2) format("woff2"),url(/_next/static/media/KaTeX_Math-BoldItalic.f1035d8d.woff) format("woff"),url(/_next/static/media/KaTeX_Math-BoldItalic.a879cf83.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/_next/static/media/KaTeX_Math-Italic.f28c23ac.woff2) format("woff2"),url(/_next/static/media/KaTeX_Math-Italic.5295ba48.woff) format("woff"),url(/_next/static/media/KaTeX_Math-Italic.939bc644.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/_next/static/media/KaTeX_SansSerif-Bold.8c5b5494.woff2) format("woff2"),url(/_next/static/media/KaTeX_SansSerif-Bold.bf59d231.woff) format("woff"),url(/_next/static/media/KaTeX_SansSerif-Bold.94e1e8dc.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/_next/static/media/KaTeX_SansSerif-Italic.3b1e59b3.woff2) format("woff2"),url(/_next/static/media/KaTeX_SansSerif-Italic.7c9bc82b.woff) format("woff"),url(/_next/static/media/KaTeX_SansSerif-Italic.b4c20c84.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_SansSerif-Regular.ba21ed5f.woff2) format("woff2"),url(/_next/static/media/KaTeX_SansSerif-Regular.74048478.woff) format("woff"),url(/_next/static/media/KaTeX_SansSerif-Regular.d4d7ba48.ttf) format("truetype")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_Script-Regular.03e9641d.woff2) format("woff2"),url(/_next/static/media/KaTeX_Script-Regular.07505710.woff) format("woff"),url(/_next/static/media/KaTeX_Script-Regular.fe9cbbe1.ttf) format("truetype")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_Size1-Regular.eae34984.woff2) format("woff2"),url(/_next/static/media/KaTeX_Size1-Regular.e1e279cb.woff) format("woff"),url(/_next/static/media/KaTeX_Size1-Regular.fabc004a.ttf) format("truetype")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_Size2-Regular.5916a24f.woff2) format("woff2"),url(/_next/static/media/KaTeX_Size2-Regular.57727022.woff) format("woff"),url(/_next/static/media/KaTeX_Size2-Regular.d6b476ec.ttf) format("truetype")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_Size3-Regular.b4230e7e.woff2) format("woff2"),url(/_next/static/media/KaTeX_Size3-Regular.9acaf01c.woff) format("woff"),url(/_next/static/media/KaTeX_Size3-Regular.a144ef58.ttf) format("truetype")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_Size4-Regular.10d95fd3.woff2) format("woff2"),url(/_next/static/media/KaTeX_Size4-Regular.7a996c9d.woff) format("woff"),url(/_next/static/media/KaTeX_Size4-Regular.fbccdabe.ttf) format("truetype")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/_next/static/media/KaTeX_Typewriter-Regular.a8709e36.woff2) format("woff2"),url(/_next/static/media/KaTeX_Typewriter-Regular.6258592b.woff) format("woff"),url(/_next/static/media/KaTeX_Typewriter-Regular.d97aaf4a.ttf) format("truetype")}.katex{text-rendering:auto;font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.15.6"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.27777778em;margin-right:-.55555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.83333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.16666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.66666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.45666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.14666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.71428571em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.85714286em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.14285714em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.28571429em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.42857143em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.71428571em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.05714286em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.46857143em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.96285714em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.55428571em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.55555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.66666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.77777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.88888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.11111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.30444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.76444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.41666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.58333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.66666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.83333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.72833333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.07333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.34722222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.41666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.48611111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.55555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.69444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.83333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.44027778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.72777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.28935185em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.34722222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.40509259em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.46296296em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.52083333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.69444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.83333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.20023148em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.43981481em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.24108004em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.28929605em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.33751205em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.38572806em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.43394407em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.48216008em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.57859209em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.69431051em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.83317261em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.19961427em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.20096463em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.24115756em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.28135048em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.32154341em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.36173633em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.40192926em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.48231511em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.57877814em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.69453376em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.83360129em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}</style><script defer="" nomodule="" src="./2_files/polyfills-5cd94c89d3acac5f.js.download"></script><script src="./2_files/webpack-e4c125a62a26c161.js.download" defer=""></script><script src="./2_files/framework-8a7acd6ca71551f3.js.download" defer=""></script><script src="./2_files/main-54f92f39374622ce.js.download" defer=""></script><script src="./2_files/_app-ebde83a9c8e011c8.js.download" defer=""></script><script src="./2_files/4c995328-731bf4a4e2cc371c.js.download" defer=""></script><script src="./2_files/dabc9b9a-ccacc72590d8ceca.js.download" defer=""></script><script src="./2_files/4bf8fb26-246965ec7b42363d.js.download" defer=""></script><script src="./2_files/355f11e2-fe4ab6016328cbba.js.download" defer=""></script><script src="./2_files/23bae407-1002cc61f5f85d45.js.download" defer=""></script><script src="./2_files/13-933c8d07e0c825cd.js.download" defer=""></script><script src="./2_files/727-8318dfd3d5da6244.js.download" defer=""></script><script src="./2_files/992-1a5d8ef4e48376a1.js.download" defer=""></script><script src="./2_files/382-a34d4b431dc4b0a5.js.download" defer=""></script><script src="./2_files/935-5a7f1bc41cbae604.js.download" defer=""></script><script src="./2_files/630-57b5ea744e35369c.js.download" defer=""></script><script src="./2_files/[code]-d070309b87a6d8a6.js.download" defer=""></script><script src="./2_files/_buildManifest.js.download" defer=""></script><script src="./2_files/_ssgManifest.js.download" defer=""></script><script src="./2_files/_middlewareManifest.js.download" defer=""></script><style data-emotion="css 1jxkwpd" data-s="">.css-1jxkwpd{padding-top:50px;padding-bottom:20px;margin:0px;min-height:100vh;}</style><style data-emotion="css ovqmhl" data-s="">.css-ovqmhl{background:linear-gradient(
|
|
to right,
|
|
var(--tecky-blue),
|
|
var(--tecky-green)
|
|
);height:50px;position:fixed;top:0px;width:100%;-webkit-background-size:100% 100%;background-size:100% 100%;background-repeat:no-repeat;padding:0px 30px 0px 30px;z-index:1000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (max-width: 576px){.css-ovqmhl{padding:0px 8px 0px 8px;}}</style><style data-emotion="css 1gp6gjd" data-s="">.css-1gp6gjd{height:100%;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}</style><style data-emotion="css 1680iax" data-s="">.css-1680iax{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;height:100%;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}</style><style data-emotion="css o7ltz2" data-s="">.css-o7ltz2{color:white;margin-left:10px;}</style><style data-emotion="css o5cb8b" data-s="">.css-o5cb8b{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}</style><style data-emotion="css tzq9j9" data-s="">.css-tzq9j9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}</style><style data-emotion="css oixe1a" data-s="">.css-oixe1a{color:white;margin-left:10px;margin-bottom:0px;}</style><style data-emotion="css 1r1up4d" data-s="">.css-1r1up4d{display:inline;}</style><style data-emotion="css 1n2g5mv" data-s="">.css-1n2g5mv{color:white;padding-left:8px;border-left:1px solid white;margin-left:8px;margin-bottom:0px;}@media (max-width: 600px){.css-1n2g5mv{display:none;}}</style><style data-emotion="css 1a9nbzc" data-s="">.css-1a9nbzc{cursor:pointer;font-weight:800;margin-left:10px;border-radius:40px;padding:5px;color:white;}@media (max-width: 576px){.css-1a9nbzc{margin-left:10px;}}.css-1a9nbzc:hover{background-color:white;color:var(--tecky-green);}</style><style data-emotion="css czq1bh" data-s="">.css-czq1bh{min-height:calc(100vh - 70px);}@media (max-width: 900px){.css-czq1bh{display:block;}}</style><style data-emotion="css lpq7i3" data-s="">.css-lpq7i3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;min-height:calc(100vh - 70px);}@media (max-width: 576px){.css-lpq7i3{display:block;}}@media (max-width: 900px){.css-lpq7i3{display:block;}}</style><style data-emotion="css i8owcw" data-s="">.css-i8owcw{min-width:230px;padding:15px 0px 15px 0px;background-color:#efefef;}@media (max-width: 900px){.css-i8owcw{padding:5px;width:100%;max-width:100%;position:-webkit-sticky;position:sticky;top:50px;z-index:1000;}}@media print{.css-i8owcw{display:none;width:0px;margin-top:0px;}}</style><style data-emotion="css 13pmqvv" data-s="">.css-13pmqvv{padding:15px 15px 15px 15px;-webkit-flex:1;-ms-flex:1;flex:1;min-width:230px;padding:15px 0px 15px 0px;background-color:#efefef;}@media (max-width: 576px){.css-13pmqvv{width:100%;padding:5px 15px 5px 15px;}}@media (max-width: 900px){.css-13pmqvv{padding:5px;width:100%;max-width:100%;position:-webkit-sticky;position:sticky;top:50px;z-index:1000;}}@media print{.css-13pmqvv{display:none;width:0px;margin-top:0px;}}</style><style data-emotion="css 1g5207i" data-s="">.css-1g5207i{font-size:18px;}</style><style data-emotion="css 1441xph" data-s="">.css-1441xph{position:-webkit-sticky;position:sticky;top:65px;font-size:18px;}</style><style data-emotion="css wmstff" data-s="">@media (max-width: 900px){.css-wmstff{display:none;}}</style><style data-emotion="css 19mrfq4" data-s="">.css-19mrfq4{max-height:calc(100vh - 100px);padding:0px 15px 0px 15px;padding-bottom:30px;overflow-y:auto;overflow-x:hidden;}.css-19mrfq4::-webkit-scrollbar{display:none;}</style><style data-emotion="css 1gs7cw9" data-s="">.css-1gs7cw9{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}</style><style data-emotion="css 13hdeqp" data-s="">.css-13hdeqp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}</style><style data-emotion="css 1ru9ici" data-s="">.css-1ru9ici{cursor:pointer;}</style><style data-emotion="css 1lb9trh" data-s="">.css-1lb9trh{color:var(--tecky-green);margin:0px;cursor:pointer;}</style><style data-emotion="css mniyi9" data-s="">.css-mniyi9{color:var(--tecky-blue);margin:0px;}</style><style data-emotion="css yoy66y" data-s="">.css-yoy66y{color:inherit;-webkit-text-decoration:none;text-decoration:none;}</style><style data-emotion="css wkxoup" data-s="">.css-wkxoup{font-size:14px;word-break:break-word;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;background-color:var(--tecky-blue);color:white;}</style><style data-emotion="css mbfvkh" data-s="">.css-mbfvkh{padding:10px;margin-top:5px;font-size:20px;box-shadow:0 0 0 1px rgb(17 20 24 / 10%),0 2px 4px rgb(17 20 24 / 20%),0 8px 24px rgb(17 20 24 / 20%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--tecky-blue);background:#fafafa;cursor:pointer;font-size:14px;word-break:break-word;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;background-color:var(--tecky-blue);color:white;}@media (min-width: 576px){.css-mbfvkh{-webkit-transition:-webkit-transform 0.5s ease-in-out;transition:transform 0.5s ease-in-out;}.css-mbfvkh:hover{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);z-index:1000;-webkit-transition:-webkit-transform 0.5s ease-in-out;transition:transform 0.5s ease-in-out;}}</style><style data-emotion="css 1ehwhv" data-s="">.css-1ehwhv{font-size:14px;word-break:break-word;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;background-color:white;color:var(--tecky-blue);}</style><style data-emotion="css 13xgx0w" data-s="">.css-13xgx0w{padding:10px;margin-top:5px;font-size:20px;box-shadow:0 0 0 1px rgb(17 20 24 / 10%),0 2px 4px rgb(17 20 24 / 20%),0 8px 24px rgb(17 20 24 / 20%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--tecky-blue);background:#fafafa;cursor:pointer;font-size:14px;word-break:break-word;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;background-color:white;color:var(--tecky-blue);}@media (min-width: 576px){.css-13xgx0w{-webkit-transition:-webkit-transform 0.5s ease-in-out;transition:transform 0.5s ease-in-out;}.css-13xgx0w:hover{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);z-index:1000;-webkit-transition:-webkit-transform 0.5s ease-in-out;transition:transform 0.5s ease-in-out;}}</style><style data-emotion="css bb67xy" data-s="">.css-bb67xy{font-size:14px;word-break:break-word;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;background-color:white;color:var(--tecky-green);}</style><style data-emotion="css eprs0d" data-s="">.css-eprs0d{padding:10px;margin-top:5px;font-size:20px;box-shadow:0 0 0 1px rgb(17 20 24 / 10%),0 2px 4px rgb(17 20 24 / 20%),0 8px 24px rgb(17 20 24 / 20%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--tecky-blue);background:#fafafa;cursor:pointer;font-size:14px;word-break:break-word;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;background-color:white;color:var(--tecky-green);}@media (min-width: 576px){.css-eprs0d{-webkit-transition:-webkit-transform 0.5s ease-in-out;transition:transform 0.5s ease-in-out;}.css-eprs0d:hover{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);z-index:1000;-webkit-transition:-webkit-transform 0.5s ease-in-out;transition:transform 0.5s ease-in-out;}}</style><style data-emotion="css 14ad12m" data-s="">@media (min-width: 900px){.css-14ad12m{display:none;}}</style><style data-emotion="css 1kgpzcs" data-s="">.css-1kgpzcs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}@media (min-width: 900px){.css-1kgpzcs{display:none;}}</style><style data-emotion="css azi527" data-s="">.css-azi527{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex:1;-ms-flex:1;flex:1;}</style><style data-emotion="css s0zfz8" data-s="">.css-s0zfz8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex:1;-ms-flex:1;flex:1;}</style><style data-emotion="css i3jq9h" data-s="">.css-i3jq9h{margin-top:50px;padding:10px 0px 10px 0px;z-index:1000;max-height:93vh;overflow-y:auto;}@media (min-width: 900px){.css-i3jq9h{display:none;}}</style><style data-emotion="css ots63w" data-s="">@media (max-width: 900px){.css-ots63w{width:100%;}}@media print{.css-ots63w{padding:0px;width:100%;}}</style><style data-emotion="css 1sel3bg" data-s="">.css-1sel3bg{padding:15px 15px 15px 15px;width:85%;}@media (max-width: 576px){.css-1sel3bg{width:100%;padding:5px 15px 5px 15px;}}@media (max-width: 900px){.css-1sel3bg{width:100%;}}@media print{.css-1sel3bg{padding:0px;width:100%;}}</style><style data-emotion="css 5tb6kd" data-s="">.css-5tb6kd{max-width:100%;overflow:auto;font-size:14px;}p>.css-5tb6kd{display:inline-block;vertical-align:middle;}pre>.css-5tb6kd{display:block;}</style><style data-emotion="css 1bw8he" data-s="">.css-1bw8he{max-width:100%;font-size:14px;}</style><style data-emotion="css 1y745xk" data-s="">.css-1y745xk{font-family:cursive;font-size:18px;}@media print{.css-1y745xk{display:none;}}</style><style data-emotion="css d4ys69" data-s="">.css-d4ys69{font-family:cursive;font-size:18px;}@media print{.css-d4ys69{display:none;}}</style><style data-emotion="css diulr9" data-s="">.css-diulr9{background:linear-gradient(
|
|
to right,
|
|
var(--tecky-blue),
|
|
var(--tecky-green)
|
|
);z-index:1000;position:fixed;bottom:0px;left:0px;right:0px;color:white;text-align:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-size:12px;height:20px;}</style><style data-emotion="css 15roo3y" data-s="">.css-15roo3y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;background:linear-gradient(
|
|
to right,
|
|
var(--tecky-blue),
|
|
var(--tecky-green)
|
|
);z-index:1000;position:fixed;bottom:0px;left:0px;right:0px;color:white;text-align:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-size:12px;height:20px;}</style><link as="script" rel="prefetch" href="./2_files/index-93af5efbf6d1e4b5.js.download"><link as="script" rel="prefetch" href="./2_files/2ad03d77-bc69d012ca2cb1bc.js.download"><link as="script" rel="prefetch" href="./2_files/7a7c95a0-6e5041ea50726778.js.download"><link as="script" rel="prefetch" href="./2_files/74-5b8e5392bdbd2366.js.download"><link as="script" rel="prefetch" href="./2_files/[course]-b436390263deec59.js.download"><link rel="stylesheet" type="text/css" href="./2_files/a32baea31bb51487.css"></head><body><div id="__next"><div class="no-padding-on-print css-1jxkwpd"><nav class="hide-on-print css-ovqmhl"><div class="css-1680iax"><a href="https://cms.tecky.io/"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27110%27%20height=%2735%27/%3e"></span><img alt="Tecky Academy" src="./2_files/logo-inverse.png" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" srcset="/_next/image?url=%2Fimg%2Flogo-inverse.png&w=128&q=75 1x, /_next/image?url=%2Fimg%2Flogo-inverse.png&w=256&q=75 2x"></span></a><h2 class="css-o7ltz2">CMS</h2></div><div class="css-tzq9j9"><h4 class="css-oixe1a"><span class="css-1r1up4d">MAP<!-- --> <!-- -->V24<!-- --></span></h4><p class="css-1n2g5mv"><b><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"></path></svg> <!-- -->Jscheuk<!-- --></b></p><div class="css-1a9nbzc"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="25" width="25" xmlns="http://www.w3.org/2000/svg"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg></div></div></nav><div class="Toastify"></div><main><style>
|
|
#nprogress {
|
|
pointer-events: none;
|
|
}
|
|
#nprogress .bar {
|
|
background: #F17C10;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
}
|
|
#nprogress .peg {
|
|
display: block;
|
|
position: absolute;
|
|
right: 0px;
|
|
width: 100px;
|
|
height: 100%;
|
|
box-shadow: 0 0 10px #F17C10, 0 0 5px #F17C10;
|
|
opacity: 1;
|
|
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
|
-ms-transform: rotate(3deg) translate(0px, -4px);
|
|
transform: rotate(3deg) translate(0px, -4px);
|
|
}
|
|
#nprogress .spinner {
|
|
display: block;
|
|
position: fixed;
|
|
z-index: 1031;
|
|
top: 15px;
|
|
right: 15px;
|
|
}
|
|
#nprogress .spinner-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
box-sizing: border-box;
|
|
border: solid 2px transparent;
|
|
border-top-color: #F17C10;
|
|
border-left-color: #F17C10;
|
|
border-radius: 50%;
|
|
-webkit-animation: nprogresss-spinner 400ms linear infinite;
|
|
animation: nprogress-spinner 400ms linear infinite;
|
|
}
|
|
.nprogress-custom-parent {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.nprogress-custom-parent #nprogress .spinner,
|
|
.nprogress-custom-parent #nprogress .bar {
|
|
position: absolute;
|
|
}
|
|
@-webkit-keyframes nprogress-spinner {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes nprogress-spinner {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style><div class="css-lpq7i3"><div class="css-13pmqvv"><div class="css-1441xph"><div class="css-wmstff"><div class="css-19mrfq4"><div class="css-13hdeqp"><a href="https://cms.tecky.io/course/map-v24?m=WEF"><h3 class="css-1lb9trh"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="30" width="30" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 3.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 1 1 0v2A1.5 1.5 0 0 1 9.5 14h-8A1.5 1.5 0 0 1 0 12.5v-9A1.5 1.5 0 0 1 1.5 2h8A1.5 1.5 0 0 1 11 3.5v2a.5.5 0 0 1-1 0v-2z"></path><path fill-rule="evenodd" d="M4.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H14.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z"></path></svg></h3></a><h2 class="css-mniyi9">WEF008</h2></div><div class="css-0"><a href="https://cms.tecky.io/course/map-v24/WEF008?p=01-introduction-to-game-of-life.md"><div class="css-13xgx0w">Introduction of Game of Life and p5.js<!-- --> <!-- --><div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg></div></div></a><a href="https://cms.tecky.io/course/map-v24/WEF008?p=02-Game-of-Life-code-along.md"><div class="css-mbfvkh">Game of Life Code-Along<!-- --> <!-- --><div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg></div></div></a><a href="https://cms.tecky.io/course/map-v24/WEF008?p=03-person-project-game-of-life-enhanced-01.md"><div class="css-13xgx0w">Personal project - Game of Life Enhanced<!-- --> <!-- --><div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg></div></div></a><a href="https://cms.tecky.io/course/map-v24/WEF008?p=04-game-of-life.project.yaml"><div class="css-13xgx0w">Game of Life Project Grading<!-- --> <!-- --></div></a><a href="https://cms.tecky.io/course/map-v24/WEF008?p=submissions"><div class="css-eprs0d">My Submissions<!-- --> <!-- --><div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M7 15h7v2H7zm0-4h10v2H7zm0-4h10v2H7zm12-4h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04a2.008 2.008 0 00-1.44 1.19c-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"></path></svg></div></div></a></div></div></div><div class="css-1kgpzcs"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="25" width="25" xmlns="http://www.w3.org/2000/svg"><path d="M32 96v64h448V96H32zm0 128v64h448v-64H32zm0 128v64h448v-64H32z"></path></svg><div class="css-s0zfz8"><h6 class="css-mniyi9">WEF008</h6> <!-- --><h6 class="css-mniyi9">Game of Life Code-Along</h6></div></div></div><div id="EZDraweroobb2" class="EZDrawer"><input type="checkbox" id="EZDrawer__checkboxoobb2" class="EZDrawer__checkbox"><nav role="navigation" id="EZDrawer__containeroobb2" style="z-index:101;transition-duration:500ms;top:0;left:0;transform:translate3d(-100%, 0, 0);width:250px;height:100vh" class="EZDrawer__container css-i3jq9h"><div class="css-19mrfq4"><div class="css-13hdeqp"><a href="https://cms.tecky.io/course/map-v24?m=WEF"><h3 class="css-1lb9trh"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="30" width="30" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 3.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 1 1 0v2A1.5 1.5 0 0 1 9.5 14h-8A1.5 1.5 0 0 1 0 12.5v-9A1.5 1.5 0 0 1 1.5 2h8A1.5 1.5 0 0 1 11 3.5v2a.5.5 0 0 1-1 0v-2z"></path><path fill-rule="evenodd" d="M4.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H14.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z"></path></svg></h3></a><h2 class="css-mniyi9">WEF008</h2></div><div class="css-0"><a href="https://cms.tecky.io/course/map-v24/WEF008?p=01-introduction-to-game-of-life.md"><div class="css-13xgx0w">Introduction of Game of Life and p5.js<!-- --> <!-- --><div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg></div></div></a><a href="https://cms.tecky.io/course/map-v24/WEF008?p=02-Game-of-Life-code-along.md"><div class="css-mbfvkh">Game of Life Code-Along<!-- --> <!-- --><div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg></div></div></a><a href="https://cms.tecky.io/course/map-v24/WEF008?p=03-person-project-game-of-life-enhanced-01.md"><div class="css-13xgx0w">Personal project - Game of Life Enhanced<!-- --> <!-- --><div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg></div></div></a><a href="https://cms.tecky.io/course/map-v24/WEF008?p=04-game-of-life.project.yaml"><div class="css-13xgx0w">Game of Life Project Grading<!-- --> <!-- --></div></a><a href="https://cms.tecky.io/course/map-v24/WEF008?p=submissions"><div class="css-eprs0d">My Submissions<!-- --> <!-- --><div><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M7 15h7v2H7zm0-4h10v2H7zm0-4h10v2H7zm12-4h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04a2.008 2.008 0 00-1.44 1.19c-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"></path></svg></div></div></a></div></div></nav><label for="EZDrawer__checkboxoobb2" id="EZDrawer__overlayoobb2" class="EZDrawer__overlay" style="background-color:#000;opacity:0.4;z-index:100"></label></div></div><div width="85%" class="css-1sel3bg"><div class="css-0"><div class="markdown-content"><h1>Game of Life Code-Along<!-- --></h1>
|
|
<!-- --><p>We are going to build our game of life step by step today.
|
|
Here is the resulting product that we are going to build within this section.<!-- --><!-- --><!-- --></p>
|
|
<!-- --><p><img src="./2_files/course-0488395925987-Game_of_life_Demo.png" alt="Game_of_life_Demo.png"></p>
|
|
<!-- --><p>As you can see , we have a large 2-dimensional plane for our <code class="css-5tb6kd">lives</code> to thrive on. And we have a button called <strong>Reset Game</strong> at the bottom left corner.</p>
|
|
<!-- --><p>Here are the list of features that we want to have in this game :</p>
|
|
<!-- --><ol>
|
|
<li>A 2-dimensional plane that allows the lives to reproduce, survive and die based on the rules we mentioned.</li>
|
|
<li>A <strong>Reset Game</strong> button that clears everything on the plane</li>
|
|
<li>Allowing user to click and drag to add new lives manually on the lifeless box.</li>
|
|
</ol>
|
|
<!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><h2>Live Preview Extension</h2>
|
|
<p>Before you proceed, we would like you to install an VSCode extension called <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server"><code class="css-5tb6kd">Live Preview</code></a>.</p>
|
|
<p><img src="./2_files/course-0488395926755-live_preview.png" alt="live_preview.png"></p>
|
|
<p>With this extension, you should be able to serve HTML using the option in the right click menu directly.
|
|
It makes working with <code class="css-5tb6kd">HTML</code>,<code class="css-5tb6kd">CSS</code> and <code class="css-5tb6kd">JavaScript</code> files much more easier.</p>
|
|
<p><img src="./2_files/course-0488395927435-live-preview-options.png" alt="live-preview-options.png"></p>
|
|
<h2>State of the Game</h2>
|
|
<p>Before we start writing anything, we need to consider what would be the state of the game. A state is all of the data that is necessary to represent the current game. We need to get the state of the game right because we would then need to update our user interface using the <code class="css-5tb6kd">state</code> of the game.</p>
|
|
<p>Here is the state of the game of life that we are going to implement.</p>
|
|
<div style="padding: 0.1em; background-color: rgb(253, 216, 216); color: rgb(105, 51, 122); border-left: 5px solid rgb(156, 46, 46);">
|
|
<p style="margin-left: 1em; margin-top: 1em;">
|
|
<b>🛠 Warning:</b>
|
|
</p>
|
|
<p style="margin-left: 1em; margin-top: 0.6em;">
|
|
Not all codes are require to copy from following sections. Some code sections are only for explains used. Please take care and watch carefully.
|
|
</p>
|
|
</div>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(199, 146, 234);">const</span><span> unitLength </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">20</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">const</span><span> boxColor </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">150</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">const</span><span> strokeColor </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">50</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> columns</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">/* To be determined by window width */</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> rows</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">/* To be determined by window height */</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">;</span></code></pre></pre>
|
|
<p>Here are the descriptions of all of the states:</p>
|
|
<ol>
|
|
<li><strong>unitLength</strong>: The width and height of a box.</li>
|
|
<li><strong>boxColor</strong>: The color of the box.</li>
|
|
<li><strong>strokeColor</strong>: The color of the stroke of the box.</li>
|
|
<li><strong>columns</strong>: Number of columns in our game of life. It is determined by the width of the container and <code class="css-5tb6kd">unitLength</code>.</li>
|
|
<li><strong>rows</strong>: Number of rows in our game of life. It is determined by the height of the container and <code class="css-5tb6kd">unitLength</code>.</li>
|
|
<li><strong>currentBoard</strong>: The states of the board of the current generation.</li>
|
|
<li><strong>nextBoard</strong>: The states of the board of the next generation. It is determined by <strong>the current generation</strong>.</li>
|
|
</ol>
|
|
<h2>Setup Function</h2>
|
|
<p>Let's write the <code class="css-5tb6kd">setup</code> function for the initialization.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(199, 146, 234);">function</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">setup</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">/* Set the canvas to be under the element #canvas*/</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">const</span><span> canvas </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">createCanvas</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>windowWidth</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> windowHeight </span><span class="token token" style="color: rgb(137, 221, 255);">-</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">100</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> canvas</span><span class="token token" style="color: rgb(137, 221, 255);">.</span><span class="token token method property-access" style="color: rgb(199, 146, 234);">parent</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token dom" style="color: rgb(255, 102, 102);">document</span><span class="token token" style="color: rgb(137, 221, 255);">.</span><span class="token token method property-access" style="color: rgb(199, 146, 234);">querySelector</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(165, 232, 68);">'#canvas'</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span>
|
|
<span> </span><span class="token token" style="color: rgb(97, 97, 97);">/*Calculate the number of columns and rows */</span><span>
|
|
</span><span> columns </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">floor</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>width </span><span class="token token" style="color: rgb(137, 221, 255);">/</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> rows </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">floor</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>height </span><span class="token token" style="color: rgb(137, 221, 255);">/</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span>
|
|
<span> </span><span class="token token" style="color: rgb(97, 97, 97);">/*Making both currentBoard and nextBoard 2-dimensional matrix that has (columns * rows) boxes. */</span><span>
|
|
</span><span> currentBoard </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> nextBoard </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);"><</span><span> columns</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> i</span><span class="token token" style="color: rgb(137, 221, 255);">++</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>i</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>i</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Now both currentBoard and nextBoard are array of array of undefined values.</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">init</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Set the initial values of the currentBoard and nextBoard</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span></code></pre></pre>
|
|
<p>Let's look at some of the <code class="css-5tb6kd">magic variables</code> here. The <code class="css-5tb6kd">magic variables</code> include <code class="css-5tb6kd">windowWidth</code>, <code class="css-5tb6kd">windowHeight</code>, <code class="css-5tb6kd">width</code> and <code class="css-5tb6kd">height</code>. They are all provided by p5.js to make our life easier.</p>
|
|
<ul>
|
|
<li><code class="css-5tb6kd">windowWidth</code> and <code class="css-5tb6kd">windowHeight</code> are the width and height of the viewport.</li>
|
|
<li><code class="css-5tb6kd">width</code> and <code class="css-5tb6kd">height</code> are the width and height of the canvas element.</li>
|
|
</ul>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(199, 146, 234);">const</span><span> canvas </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">createCanvas</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>windowWidth</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> windowHeight </span><span class="token token" style="color: rgb(137, 221, 255);">-</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">100</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span>canvas</span><span class="token token" style="color: rgb(137, 221, 255);">.</span><span class="token token method property-access" style="color: rgb(199, 146, 234);">parent</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token dom" style="color: rgb(255, 102, 102);">document</span><span class="token token" style="color: rgb(137, 221, 255);">.</span><span class="token token method property-access" style="color: rgb(199, 146, 234);">querySelector</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(165, 232, 68);">'#canvas'</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span></code></pre></pre>
|
|
<p>We are calling <code class="css-5tb6kd">createCanvas()</code> with <code class="css-5tb6kd">windowWidth</code> and <code class="css-5tb6kd">windowHeight - 100</code> to make a canvas that is as wide as the screen but <code class="css-5tb6kd">100 px</code> shorter than the height. We then use <code class="css-5tb6kd">.parent()</code> to insert our canvas element to the element with id <code class="css-5tb6kd">canvas</code>.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(97, 97, 97);">/*Calculate the number of columns and rows */</span><span>
|
|
</span><span>columns </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">floor</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>width </span><span class="token token" style="color: rgb(137, 221, 255);">/</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span>rows </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">floor</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>height </span><span class="token token" style="color: rgb(137, 221, 255);">/</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span></code></pre></pre>
|
|
<p>We can then calculate the columns and rows using the <code class="css-5tb6kd">width</code>,<code class="css-5tb6kd">height</code> and the <code class="css-5tb6kd">unitLength</code>. We need to use the <code class="css-5tb6kd">floor</code> function because there is no guarantee that the quotients would be an integer.</p>
|
|
<p>After that , we can simply initialize <code class="css-5tb6kd">currentBoard</code> and <code class="css-5tb6kd">nextBoard</code> to be an array of array. Then we run another function called <code class="css-5tb6kd">init</code> to initialize all the boxes' value to 0.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span>currentBoard </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span>nextBoard </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);"><</span><span> columns</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> i</span><span class="token token" style="color: rgb(137, 221, 255);">++</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>i</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>i</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(97, 97, 97);">// Now both currentBoard and nextBoard are array of array of undefined values.</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">init</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Set the initial values of the currentBoard and nextBoard</span></code></pre></pre>
|
|
<h2>Init function</h2>
|
|
<p>Let's finish the <code class="css-5tb6kd">init()</code> function , the function is simple. We just need loop over both <code class="css-5tb6kd">currentBoard</code> and <code class="css-5tb6kd">nextBoard</code> to set all of the boxes' value to <code class="css-5tb6kd">0</code>.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token doc-comment" style="color: rgb(97, 97, 97);">/**
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);">* Initialize/reset the board state
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);">*/</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">function</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">init</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);"><</span><span> columns</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> i</span><span class="token token" style="color: rgb(137, 221, 255);">++</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> j </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> j </span><span class="token token" style="color: rgb(137, 221, 255);"><</span><span> rows</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> j</span><span class="token token" style="color: rgb(137, 221, 255);">++</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>i</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>j</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>i</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>j</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span></code></pre></pre>
|
|
<p>Upon loading the page, every box in the board are <code class="css-5tb6kd">0</code> now.</p>
|
|
<p>We can also use random input, for example we can use the random function to randomize initial state of <code class="css-5tb6kd">currentBoard</code>.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(97, 97, 97);">// let someVariables = <condictions> : <when_true> : <when_false>;</span><span>
|
|
</span><span>currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>i</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>j</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">random</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">></span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0.8</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">?</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">:</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// one line if</span><span>
|
|
</span><span>nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>i</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>j</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span></code></pre></pre>
|
|
<h2>Draw Function</h2>
|
|
<p>As mentioned before, the <code class="css-5tb6kd">draw()</code> function is being run for every single frame. Therefore, we need to draw the state of the current generation to the canvas inside <code class="css-5tb6kd">draw()</code> function.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(199, 146, 234);">function</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">draw</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">background</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(253, 145, 112);">255</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">generate</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);"><</span><span> columns</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> i</span><span class="token token" style="color: rgb(137, 221, 255);">++</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> j </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> j </span><span class="token token" style="color: rgb(137, 221, 255);"><</span><span> rows</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> j</span><span class="token token" style="color: rgb(137, 221, 255);">++</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>i</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>j</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">fill</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>boxColor</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">else</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">fill</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(253, 145, 112);">255</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">stroke</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>strokeColor</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">rect</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>i </span><span class="token token" style="color: rgb(137, 221, 255);">*</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> j </span><span class="token token" style="color: rgb(137, 221, 255);">*</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span></code></pre></pre>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(199, 146, 234);">background</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(253, 145, 112);">255</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">generate</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span></code></pre></pre>
|
|
<p>In the first line, we set the background to white ( (255,255,255) is the RGB code of white) with the function <code class="css-5tb6kd">background()</code>.
|
|
Then we call the function <code class="css-5tb6kd">generate()</code> which calculates the next generation with current generation.</p>
|
|
<p>Within the nested for-loop, you can see we are checking if the <code class="css-5tb6kd">currentBoard[i][j] == 1</code>. It means that we are checking if the box has life. If <code class="css-5tb6kd">true</code>, then we set the filling color to the <code class="css-5tb6kd">boxColor</code> , else we set it to <code class="css-5tb6kd">white</code>.
|
|
The stroke is set to <code class="css-5tb6kd">strokeColor</code>. Then we can call the <code class="css-5tb6kd">rect</code> function which conveniently use the configuration we just set (filling color is <code class="css-5tb6kd">boxColor</code> and stroke color is <code class="css-5tb6kd">strokeColor</code>) to make a <code class="css-5tb6kd">rect</code>. The parameters <code class="css-5tb6kd">i * unitLength, j * unitLength</code> sets the position of the top left corner of the rectangle and the parameters <code class="css-5tb6kd">unitLength, unitLength</code> set the size of the rectangle.</p>
|
|
<h2>Generate function</h2>
|
|
<p>Generate function contains the core business logic of game of life. It basically calculates the next generation solely with the information of the current generation.
|
|
Let's look at the implementation of the <code class="css-5tb6kd">generate()</code> function first.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(199, 146, 234);">function</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">generate</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">//Loop over every single box on the board</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> x </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> x </span><span class="token token" style="color: rgb(137, 221, 255);"><</span><span> columns</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> x</span><span class="token token" style="color: rgb(137, 221, 255);">++</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> y </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> y </span><span class="token token" style="color: rgb(137, 221, 255);"><</span><span> rows</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span> y</span><span class="token token" style="color: rgb(137, 221, 255);">++</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Count all living members in the Moore neighborhood(8 boxes surrounding)</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> neighbors </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> i </span><span class="token token" style="color: rgb(199, 146, 234);">of</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">-</span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> j </span><span class="token token" style="color: rgb(199, 146, 234);">of</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">-</span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">&&</span><span> j </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// the cell itself is not its own neighbor</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">continue</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// The modulo operator is crucial for wrapping on the edge</span><span>
|
|
</span><span> neighbors </span><span class="token token" style="color: rgb(137, 221, 255);">+=</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>x </span><span class="token token" style="color: rgb(137, 221, 255);">+</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);">+</span><span> columns</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">%</span><span> columns</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>y </span><span class="token token" style="color: rgb(137, 221, 255);">+</span><span> j </span><span class="token token" style="color: rgb(137, 221, 255);">+</span><span> rows</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">%</span><span> rows</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span>
|
|
<span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Rules of Life</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">&&</span><span> neighbors </span><span class="token token" style="color: rgb(137, 221, 255);"><</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">2</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Die of Loneliness</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">else</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">&&</span><span> neighbors </span><span class="token token" style="color: rgb(137, 221, 255);">></span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">3</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Die of Overpopulation</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">else</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">&&</span><span> neighbors </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">3</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// New life due to Reproduction</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">else</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Stasis</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span>
|
|
<span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Swap the nextBoard to be the current Board</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span></code></pre></pre>
|
|
<p>Again , we are going to loop over the every single box in the board. Inside the for-loop , we need to first count the neighbors of each box.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(97, 97, 97);">// Count all living members in the Moore neighborhood(8 boxes surrounding)</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> neighbors </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> i </span><span class="token token" style="color: rgb(199, 146, 234);">of</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">-</span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> j </span><span class="token token" style="color: rgb(199, 146, 234);">of</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">-</span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>i </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">&&</span><span> j </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// the cell itself is not its own neighbor</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">continue</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// The modulo operator is crucial for wrapping on the edge</span><span>
|
|
</span><span> neighbors </span><span class="token token" style="color: rgb(137, 221, 255);">+=</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>x </span><span class="token token" style="color: rgb(137, 221, 255);">+</span><span> i </span><span class="token token" style="color: rgb(137, 221, 255);">+</span><span> columns</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">%</span><span> columns</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>y </span><span class="token token" style="color: rgb(137, 221, 255);">+</span><span> j </span><span class="token token" style="color: rgb(137, 221, 255);">+</span><span> rows</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">%</span><span> rows</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span></code></pre></pre>
|
|
<p>As you can we loop over all of the Moore neighborhoods. Except when <code class="css-5tb6kd">i == 0 && j == 0</code> (which is basically the box itself). We add the number of the neighbors' value. Since <code class="css-5tb6kd">0</code> represent lifeless, we will add <code class="css-5tb6kd">1</code> to <code class="css-5tb6kd">neighbors</code> every box with life. Note that we are using <code class="css-5tb6kd">(x + i + columns) % columns</code> and similar code in rows case. Because we don't want our lives hit the edge of our board, we would like them to wrap to the other side of the board.</p>
|
|
<p>The following diagram shows you how wrapping works in our board.</p>
|
|
<p><img src="./2_files/course-0488395928036-Game_of_Life-Wrap.png" alt="Game_of_Life-Wrap.png"></p>
|
|
<h3>How wrapping actually works here ?</h3>
|
|
<p><img src="./2_files/course-0485529231286-Game_of_life_wrapping_detail.png" alt="Game_of_life_wrapping_detail.png"></p>
|
|
<p>As you can see , calculating the neighbors of a cell involves counting all of the neighbors around the current cell. That is what the nested for-loop here is doing.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> i </span><span class="token token" style="color: rgb(199, 146, 234);">of</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">-</span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">for</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(199, 146, 234);">let</span><span> j </span><span class="token token" style="color: rgb(199, 146, 234);">of</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span class="token token" style="color: rgb(137, 221, 255);">-</span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>i </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">&&</span><span> j </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// the cell itself is not its own neighbor</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">continue</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// rest of the code. </span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span></code></pre></pre>
|
|
<p>The <code class="css-5tb6kd">continue</code> here is for skipping the <code class="css-5tb6kd">0,0</code> since it is essentially the element itself.</p>
|
|
<p>It becomes a problem since we are having a trouble at the edge.We may have our <em>array out of bound</em>.</p>
|
|
<p>There are two cases we need to cater:</p>
|
|
<ul>
|
|
<li>cell at the corners</li>
|
|
<li>cell at the '0-sided' edge</li>
|
|
</ul>
|
|
<p>To cater for the cells at the corners, we need to use the module operator <code class="css-5tb6kd">%</code> to limit our index between <code class="css-5tb6kd">0</code>(inclusive) and <code class="css-5tb6kd">columns/rows</code>(exclusive).</p>
|
|
<p>To cater for the cells at the 0-sided, we need to use add <code class="css-5tb6kd">columns/rows</code> to the index to make them positive before using the modulo operator<code class="css-5tb6kd">%</code>.</p>
|
|
|
|
<div style="padding: 0.1em; background-color: rgb(233, 216, 253); color: rgb(105, 51, 122); border-left: 5px solid rgb(98, 50, 154);">
|
|
<p style="margin-left: 1em; margin-top: 1em;">
|
|
<b>📃 Hints:</b>
|
|
</p>
|
|
<p style="margin-left: 1em; margin-top: 0.6em;">
|
|
We can add <code class="css-5tb6kd">columns/rows</code> to the index as we wish because "-1 % 7" is the same as "6 % 7" which is also the same as "13 % 7".
|
|
</p>
|
|
</div>
|
|
<h2>Implementing the rules of game of life</h2>
|
|
<p>The remaining code is basically the rules of the <code class="css-5tb6kd">Game of Life</code>.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(97, 97, 97);">// Rules of Life</span><span>
|
|
</span><span></span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">&&</span><span> neighbors </span><span class="token token" style="color: rgb(137, 221, 255);"><</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">2</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Die of Loneliness</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">else</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">&&</span><span> neighbors </span><span class="token token" style="color: rgb(137, 221, 255);">></span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">3</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Die of Overpopulation</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">else</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">0</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">&&</span><span> neighbors </span><span class="token token" style="color: rgb(137, 221, 255);">==</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">3</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// New life due to Reproduction</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">else</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// Stasis</span><span>
|
|
</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span></code></pre></pre>
|
|
<p>At the end, we need to swap <code class="css-5tb6kd">currentBoard</code> and <code class="css-5tb6kd">nextBoard</code> . Making the calculated next generation to be the current generation.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(97, 97, 97);">// Swap the nextBoard to be the current Board</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>nextBoard</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">;</span></code></pre></pre>
|
|
<p>This is it. You should have a working <code class="css-5tb6kd">Game of Life</code> with random lifes appearing everything you load the page.</p>
|
|
<h2>Mouse Interaction</h2>
|
|
<p>It would not feel complete if the users cannot interact with our board.
|
|
Let's add some mouse events handler. Luckily, <code class="css-5tb6kd">p5.js</code> already provides useful function like <code class="css-5tb6kd">mouseDragged()</code>, <code class="css-5tb6kd">mousePressed()</code> and <code class="css-5tb6kd">mouseReleased()</code> for us to implement event handler.
|
|
As their name suggested, they are invoked when the mouse is dragged , pressed and released.</p>
|
|
<p>Let's look at how we implement it.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token doc-comment" style="color: rgb(97, 97, 97);">/**
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);"> * When mouse is dragged
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);"> */</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">function</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">mouseDragged</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token doc-comment" style="color: rgb(97, 97, 97);">/**
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);"> * If the mouse coordinate is outside the board
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);"> */</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>mouseX </span><span class="token token" style="color: rgb(137, 221, 255);">></span><span> unitLength </span><span class="token token" style="color: rgb(137, 221, 255);">*</span><span> columns </span><span class="token token" style="color: rgb(137, 221, 255);">||</span><span> mouseY </span><span class="token token" style="color: rgb(137, 221, 255);">></span><span> unitLength </span><span class="token token" style="color: rgb(137, 221, 255);">*</span><span> rows</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">return</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">const</span><span> x </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token known-class-name" style="color: rgb(242, 255, 0);">Math</span><span class="token token" style="color: rgb(137, 221, 255);">.</span><span class="token token method property-access" style="color: rgb(199, 146, 234);">floor</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>mouseX </span><span class="token token" style="color: rgb(137, 221, 255);">/</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">const</span><span> y </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token known-class-name" style="color: rgb(242, 255, 0);">Math</span><span class="token token" style="color: rgb(137, 221, 255);">.</span><span class="token token method property-access" style="color: rgb(199, 146, 234);">floor</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>mouseY </span><span class="token token" style="color: rgb(137, 221, 255);">/</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">fill</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>boxColor</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">stroke</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>strokeColor</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">rect</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>x </span><span class="token token" style="color: rgb(137, 221, 255);">*</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> y </span><span class="token token" style="color: rgb(137, 221, 255);">*</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span>
|
|
<span></span><span class="token token doc-comment" style="color: rgb(97, 97, 97);">/**
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);"> * When mouse is pressed
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);"> */</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">function</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">mousePressed</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">noLoop</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">mouseDragged</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span>
|
|
<span></span><span class="token token doc-comment" style="color: rgb(97, 97, 97);">/**
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);"> * When mouse is released
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);"> */</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(199, 146, 234);">function</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">mouseReleased</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">loop</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span></code></pre></pre>
|
|
<p>As you can see, we run <code class="css-5tb6kd">noLoop()</code> for <code class="css-5tb6kd">mousePressed()</code>. It means that we want <code class="css-5tb6kd">p5.js</code> to stop running <code class="css-5tb6kd">draw()</code> whenever our mouse is pressed. We also resume the loop of running <code class="css-5tb6kd">draw()</code> when the mouse is released. So the game pauses when the user pressed on the canvas and resume when the mouse is released. We also reuse <code class="css-5tb6kd">mouseDragged</code> in <code class="css-5tb6kd">mousePressed</code> function.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token" style="color: rgb(199, 146, 234);">function</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">mouseDragged</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token doc-comment" style="color: rgb(97, 97, 97);">/**
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);"> * If the mouse coordinate is outside the board
|
|
</span><span class="token token doc-comment" style="color: rgb(97, 97, 97);"> */</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">if</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>mouseX </span><span class="token token" style="color: rgb(137, 221, 255);">></span><span> unitLength </span><span class="token token" style="color: rgb(137, 221, 255);">*</span><span> columns </span><span class="token token" style="color: rgb(137, 221, 255);">||</span><span> mouseY </span><span class="token token" style="color: rgb(137, 221, 255);">></span><span> unitLength </span><span class="token token" style="color: rgb(137, 221, 255);">*</span><span> rows</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token control-flow" style="color: rgb(199, 146, 234);">return</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">const</span><span> x </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token known-class-name" style="color: rgb(242, 255, 0);">Math</span><span class="token token" style="color: rgb(137, 221, 255);">.</span><span class="token token method property-access" style="color: rgb(199, 146, 234);">floor</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>mouseX </span><span class="token token" style="color: rgb(137, 221, 255);">/</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">const</span><span> y </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token known-class-name" style="color: rgb(242, 255, 0);">Math</span><span class="token token" style="color: rgb(137, 221, 255);">.</span><span class="token token method property-access" style="color: rgb(199, 146, 234);">floor</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>mouseY </span><span class="token token" style="color: rgb(137, 221, 255);">/</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> currentBoard</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>x</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span class="token token" style="color: rgb(137, 221, 255);">[</span><span>y</span><span class="token token" style="color: rgb(137, 221, 255);">]</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">=</span><span> </span><span class="token token" style="color: rgb(253, 145, 112);">1</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">fill</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>boxColor</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">stroke</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>strokeColor</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">rect</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span>x </span><span class="token token" style="color: rgb(137, 221, 255);">*</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> y </span><span class="token token" style="color: rgb(137, 221, 255);">*</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> unitLength</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span></code></pre></pre>
|
|
<p>In our <code class="css-5tb6kd">mouseDragged</code> function , we first check if the coordinate of the cursor (<code class="css-5tb6kd">mouseX</code> and <code class="css-5tb6kd">mouseY</code>) is out of the board(Remember the <code class="css-5tb6kd">floor</code> function?). Then we calculate which box our cursor is currently above and we set the box to have a life. Then we paint the box directly because we are now pausing the <code class="css-5tb6kd">draw()</code> function.</p>
|
|
<p>Now you can add new life by pressing and dragging on the canvas!</p>
|
|
<h2>Reset Button</h2>
|
|
<p>How about the reset button at the bottom left corner. We can easily make the <code class="css-5tb6kd">reset</code> behavior with a simple event handler and a call to <code class="css-5tb6kd">init()</code>.</p>
|
|
<pre><pre class="css-1bw8he" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none; overflow: auto; position: relative; margin: 0.5em 0px; padding: 1.25em 1em;"><code class="language-javascript" style="text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; color: rgb(238, 238, 238); background: rgb(47, 47, 47); font-family: "Roboto Mono", monospace; font-size: 1em; line-height: 1.5em; tab-size: 4; hyphens: none;"><span class="token token dom" style="color: rgb(255, 102, 102);">document</span><span class="token token" style="color: rgb(137, 221, 255);">.</span><span class="token token method property-access" style="color: rgb(199, 146, 234);">querySelector</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(165, 232, 68);">'#reset-game'</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">.</span><span class="token token method property-access" style="color: rgb(199, 146, 234);">addEventListener</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(165, 232, 68);">'click'</span><span class="token token" style="color: rgb(137, 221, 255);">,</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">function</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(199, 146, 234);">init</span><span class="token token" style="color: rgb(137, 221, 255);">(</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(137, 221, 255);">}</span><span class="token token" style="color: rgb(137, 221, 255);">)</span><span class="token token" style="color: rgb(137, 221, 255);">;</span></code></pre></pre>
|
|
<div style="padding: 0.1em; background-color: rgb(253, 216, 216); color: rgb(105, 51, 122); border-left: 5px solid rgb(156, 46, 46);">
|
|
<p style="margin-left: 1em; margin-top: 1em;">
|
|
<b>🛠 Warning:</b>
|
|
</p>
|
|
<p style="margin-left: 1em; margin-top: 0.6em;">
|
|
You cannot use mouseClicked or mousePressed here. Because the reset button is outside the canvas. So p5.js does not manage this button.
|
|
</p>
|
|
</div>
|
|
</div></div><div class="css-d4ys69">End of Content</div></div></div></main><div class="hide-on-print css-15roo3y"><div></div><div>© <!-- -->2022<!-- --> Tecky Academy Limited<!-- --></div><div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"page":{"name":"01-introduction-to-game-of-life.md","content":"\n\n# Introduction to Game of Life and p5.js\nYou have learned enough fundamental knowledge to attempt your first personal project. We are going to attempt the game of [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)\nwith the help of a library called `p5.js`. \n\n## Conway's Game of Life\nConway's game of life is a **zero-player game** that is created by the English Computer Scientist and Mathematician [John Horton Conway](https://en.wikipedia.org/wiki/John_Horton_Conway) . It is very typical programming problem because of the simplicity, beauty and inherent complexity of this problem.\n\nLet's look at what Game of Life looks like. Here is one famous example called Gosper's Glider Gun.\n\n\n\nWhat is happening here ? It seems that we are having a form of life spitting something crawling to the corner. You may assume that the above animation is based on a very complex rule to generate such pattern. Surprisingly, the rules of game of life is very simple.\n\n### Rules of Game of Life\nGame of Life runs on a 2-dimensional grid plane with square grid. On each grid, there could be with life (colored) or no life(white). So it looks like the following.\n\n\n\nWhat are all those numbers? It is the neighbor of the grid. We call it the [Moore neighborhood](https://en.wikipedia.org/wiki/Moore_neighborhood) which includes all neighboring grids. We would hide the number of neighbors of all box with 0 neighbors since it is trivial.\n\n\n\n\nHere are the rules of Game of life:\n\n* If a box has life and it has less than 2 neighbors. It dies of loneliness. The box becomes lifeless next generation.\n* If a box has life and it has more than 3 neighbors. It dies of overpopulation. The box becomes lifeless next generation.\n* If a box has life and it has 2 to 3 neighbors. Nothing changes for this box.\n* If a box has no life and it has 3 neighbors, the box in next generation fills with life because of reproduction.\n\nIt seems pretty simple rule. But it gives unexpectedly complex behavior.\n\nHere are some common patterns:\n\n\n\nAs you can see from these examples, the first one changes from a vertical three-box pattern to a horizontal three-box pattern. It is going to oscillate between these two patterns forever if there is no other box interfering.\n\nThe second one is a pattern just like Tecky Logo. It is stable because of the life-box has 2-3 neighbors.\n\nThe third one is much more populate and it becomes four separated box with 0 neighbors. So the third pattern would disappear completely after two generations.\n\nThat is the game we need to implement. It seems pretty difficult to implement all these boxes by ourselves. Hence we are going to make use of a very useful library called `p5.js`.\n\nHere is a [demonstration](https://tecky.io.gitlab.io/tecky-devs/p5.js-lifecycle-demo/) that showcase how the neighbors are calculated.\n\n## p5.js\n`p5.js` is a library that makes use of the `canvas` element in web. It aims at making coding easier for designer, artist and programming beginners. Hence it is a very nice library for us to build our Game of life with this library.\n\n### Installation of p5.js\nInstallation of p5.js is very simple. You can just put the following CDN link to your `index.html`.\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js\"\u003e\u003c/script\u003e\n```\n\nOur resulting `index.html` would look like the following with `bootstrap` installed as well.\n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003cmeta charset=\"utf-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\u003e\n \u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" \n rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" \n crossorigin=\"anonymous\"\u003e\n \u003clink rel=\"stylesheet\" href=\"index.css\"/\u003e \n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id='canvas'\u003e\u003c/div\u003e\n \u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js\" \n integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM\" \n crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"index.js\"\u003e\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n## Usage\nUsing `p5.js` is very straight forward, there are two functions that you can put inside your `index.js` to start with. They are the functions `setup()` and `draw()`.\n\n```javascript\nfunction setup(){\n // Setup logic here\n}\n\nfunction draw(){\n // draw logic here\n}\n```\n\n`setup()` function is for setting up the initial values. It is going to run **exactly once**. `draw()` is going to run many times. It is going to run **once per frame**. If you have a frame rate of 30 frames per second, then `draw()` runs 30 times per second!\n\n`p5.js` makes writing `canvas` related code easier because it simplifies the common flow of drawing animations into `functions` like `setup()` and `draw()`. They also have different functions in their [Reference](https://p5js.org/reference/). We would utilize many of them in the next section.","title":"Introduction of Game of Life and p5.js","type":"markdown"},"pages":[{"title":"Introduction of Game of Life and p5.js","name":"01-introduction-to-game-of-life.md"},{"title":"Game of Life Code-Along","name":"02-Game-of-Life-code-along.md"},{"title":"Personal project - Game of Life Enhanced","name":"03-person-project-game-of-life-enhanced-01.md"},{"title":"Game of Life Project Grading","name":"04-game-of-life.project.yaml"},{"name":"submissions","title":"My Submissions"}],"isInstructor":false,"progress":{"01-introduction-to-game-of-life.md":true,"02-Game-of-Life-code-along.md":true,"03-person-project-game-of-life-enhanced-01.md":true},"user":{"username":"jscheuk@yahoo.com","name":"Jscheuk","isInstructor":false}},"__N_SSP":true},"page":"/course/[course]/[code]","query":{"course":"map-v24","code":"WEF008"},"buildId":"NMd-Ij-PBB8U2whRrkmqw","isFallback":false,"gssp":true,"scriptLoader":[]}</script><next-route-announcer><p aria-live="assertive" id="__next-route-announcer__" role="alert" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;">Tecky CMS</p></next-route-announcer><script src="./2_files/index-93af5efbf6d1e4b5.js.download"></script><script src="./2_files/2ad03d77-bc69d012ca2cb1bc.js.download"></script><script src="./2_files/7a7c95a0-6e5041ea50726778.js.download"></script><script src="./2_files/74-5b8e5392bdbd2366.js.download"></script><script src="./2_files/[course]-b436390263deec59.js.download"></script></body></html> |