144 lines
80 KiB
HTML
144 lines
80 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0079)https://cms.tecky.io/course/map-v24/WEF008?p=01-introduction-to-game-of-life.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="./1_files/8ee64f3b72390362.css" as="style"><link rel="stylesheet" href="./1_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="./1_files/polyfills-5cd94c89d3acac5f.js.download"></script><script src="./1_files/webpack-e4c125a62a26c161.js.download" defer=""></script><script src="./1_files/framework-8a7acd6ca71551f3.js.download" defer=""></script><script src="./1_files/main-54f92f39374622ce.js.download" defer=""></script><script src="./1_files/_app-ebde83a9c8e011c8.js.download" defer=""></script><script src="./1_files/4c995328-731bf4a4e2cc371c.js.download" defer=""></script><script src="./1_files/dabc9b9a-ccacc72590d8ceca.js.download" defer=""></script><script src="./1_files/4bf8fb26-246965ec7b42363d.js.download" defer=""></script><script src="./1_files/355f11e2-fe4ab6016328cbba.js.download" defer=""></script><script src="./1_files/23bae407-1002cc61f5f85d45.js.download" defer=""></script><script src="./1_files/13-933c8d07e0c825cd.js.download" defer=""></script><script src="./1_files/727-8318dfd3d5da6244.js.download" defer=""></script><script src="./1_files/992-1a5d8ef4e48376a1.js.download" defer=""></script><script src="./1_files/382-a34d4b431dc4b0a5.js.download" defer=""></script><script src="./1_files/935-5a7f1bc41cbae604.js.download" defer=""></script><script src="./1_files/630-57b5ea744e35369c.js.download" defer=""></script><script src="./1_files/[code]-d070309b87a6d8a6.js.download" defer=""></script><script src="./1_files/_buildManifest.js.download" defer=""></script><script src="./1_files/_ssgManifest.js.download" defer=""></script><script src="./1_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="./1_files/index-93af5efbf6d1e4b5.js.download"><link as="script" rel="prefetch" href="./1_files/2ad03d77-bc69d012ca2cb1bc.js.download"><link as="script" rel="prefetch" href="./1_files/7a7c95a0-6e5041ea50726778.js.download"><link as="script" rel="prefetch" href="./1_files/74-5b8e5392bdbd2366.js.download"><link as="script" rel="prefetch" href="./1_files/[course]-b436390263deec59.js.download"><link rel="stylesheet" type="text/css" href="./1_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="./1_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-mbfvkh">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-13xgx0w">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">Introduction of Game of Life and p5.js</h6></div></div></div><div id="EZDrawerxrlv2j" class="EZDrawer"><input type="checkbox" id="EZDrawer__checkboxxrlv2j" class="EZDrawer__checkbox"><nav role="navigation" id="EZDrawer__containerxrlv2j" 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-mbfvkh">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-13xgx0w">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__checkboxxrlv2j" id="EZDrawer__overlayxrlv2j" 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>Introduction to Game of Life and p5.js<!-- --></h1>
|
|
<!-- --><p>You have learned enough fundamental knowledge to attempt your first personal project. We are going to attempt the game of <!-- --><!-- --><!-- --><a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Conway's Game of Life</a>
|
|
with the help of a library called <code class="css-5tb6kd">p5.js</code>.</p>
|
|
<!-- --><h2>Conway's Game of Life</h2>
|
|
<!-- --><p>Conway's game of life is a <strong>zero-player game</strong> that is created by the English Computer Scientist and Mathematician <a href="https://en.wikipedia.org/wiki/John_Horton_Conway">John Horton Conway</a> . It is very typical programming problem because of the simplicity, beauty and inherent complexity of this problem.</p>
|
|
<!-- --><p>Let's look at what Game of Life looks like. Here is one famous example called Gosper's Glider Gun.</p>
|
|
<!-- --><p><img src="./1_files/course-0488396070789-Gospers_glider_gun.gif" alt="Gospers_glider_gun.gif"></p>
|
|
<!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><!-- --><p>What 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.</p>
|
|
<h3>Rules of Game of Life</h3>
|
|
<p>Game 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.</p>
|
|
<p><img src="./1_files/course-0488396071456-Game_of_Life-Rule.png" alt="Game_of_Life-Rule.png"></p>
|
|
<p>What are all those numbers? It is the neighbor of the grid. We call it the <a href="https://en.wikipedia.org/wiki/Moore_neighborhood">Moore neighborhood</a> which includes all neighboring grids. We would hide the number of neighbors of all box with 0 neighbors since it is trivial.</p>
|
|
<p><img src="./1_files/course-0488396058379-moore-neighborhood.png" alt="moore-neighborhood.png"></p>
|
|
<p>Here are the rules of Game of life:</p>
|
|
<ul>
|
|
<li>If a box has life and it has less than 2 neighbors. It dies of loneliness. The box becomes lifeless next generation.</li>
|
|
<li>If a box has life and it has more than 3 neighbors. It dies of overpopulation. The box becomes lifeless next generation.</li>
|
|
<li>If a box has life and it has 2 to 3 neighbors. Nothing changes for this box.</li>
|
|
<li>If a box has no life and it has 3 neighbors, the box in next generation fills with life because of reproduction.</li>
|
|
</ul>
|
|
<p>It seems pretty simple rule. But it gives unexpectedly complex behavior.</p>
|
|
<p>Here are some common patterns:</p>
|
|
<p><img src="./1_files/course-0488396069883-Game_of_Life-Examples.png" alt="Game_of_Life-Examples.png"></p>
|
|
<p>As 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.</p>
|
|
<p>The second one is a pattern just like Tecky Logo. It is stable because of the life-box has 2-3 neighbors.</p>
|
|
<p>The 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.</p>
|
|
<p>That 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 <code class="css-5tb6kd">p5.js</code>.</p>
|
|
<p>Here is a <a href="https://tecky.io.gitlab.io/tecky-devs/p5.js-lifecycle-demo/">demonstration</a> that showcase how the neighbors are calculated.</p>
|
|
<h2>p5.js</h2>
|
|
<p><code class="css-5tb6kd">p5.js</code> is a library that makes use of the <code class="css-5tb6kd">canvas</code> 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.</p>
|
|
<h3>Installation of p5.js</h3>
|
|
<p>Installation of p5.js is very simple. You can just put the following CDN link to your <code class="css-5tb6kd">index.html</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-html" 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(137, 221, 255);"><</span><span class="token token" style="color: rgb(255, 102, 102);">script</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">src</span><span class="token token attr-equals" 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(165, 232, 68);">https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js</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 class="token token" style="color: rgb(255, 102, 102);">script</span><span class="token token" style="color: rgb(137, 221, 255);">></span></code></pre></pre>
|
|
<p>Our resulting <code class="css-5tb6kd">index.html</code> would look like the following with <code class="css-5tb6kd">bootstrap</code> installed as well.</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-html" 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(137, 221, 255);"><</span><span class="token token" style="color: rgb(255, 102, 102);">html</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(255, 102, 102);">head</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(255, 102, 102);">meta</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">charset</span><span class="token token attr-equals" 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(165, 232, 68);">utf-8</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(255, 102, 102);">meta</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">name</span><span class="token token attr-equals" 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(165, 232, 68);">viewport</span><span class="token token" style="color: rgb(137, 221, 255);">"</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">content</span><span class="token token attr-equals" 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(165, 232, 68);">width=device-width, initial-scale=1, shrink-to-fit=no</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(255, 102, 102);">link</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">href</span><span class="token token attr-equals" 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(165, 232, 68);">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css</span><span class="token token" style="color: rgb(137, 221, 255);">"</span><span class="token token" style="color: rgb(255, 102, 102);">
|
|
</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">rel</span><span class="token token attr-equals" 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(165, 232, 68);">stylesheet</span><span class="token token" style="color: rgb(137, 221, 255);">"</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">integrity</span><span class="token token attr-equals" 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(165, 232, 68);">sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC</span><span class="token token" style="color: rgb(137, 221, 255);">"</span><span class="token token" style="color: rgb(255, 102, 102);">
|
|
</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">crossorigin</span><span class="token token attr-equals" 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(165, 232, 68);">anonymous</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(255, 102, 102);">link</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">rel</span><span class="token token attr-equals" 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(165, 232, 68);">stylesheet</span><span class="token token" style="color: rgb(137, 221, 255);">"</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">href</span><span class="token token attr-equals" 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(165, 232, 68);">index.css</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(255, 102, 102);">head</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(255, 102, 102);">body</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(255, 102, 102);">div</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">id</span><span class="token token attr-equals" 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(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 class="token token" style="color: rgb(255, 102, 102);">div</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(255, 102, 102);">script</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">src</span><span class="token token attr-equals" 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(165, 232, 68);">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js</span><span class="token token" style="color: rgb(137, 221, 255);">"</span><span class="token token" style="color: rgb(255, 102, 102);">
|
|
</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">integrity</span><span class="token token attr-equals" 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(165, 232, 68);">sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM</span><span class="token token" style="color: rgb(137, 221, 255);">"</span><span class="token token" style="color: rgb(255, 102, 102);">
|
|
</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">crossorigin</span><span class="token token attr-equals" 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(165, 232, 68);">anonymous</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 class="token token" style="color: rgb(255, 102, 102);">script</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(255, 102, 102);">script</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">src</span><span class="token token attr-equals" 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(165, 232, 68);">https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js</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 class="token token" style="color: rgb(255, 102, 102);">script</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(255, 102, 102);">script</span><span class="token token" style="color: rgb(255, 102, 102);"> </span><span class="token token" style="color: rgb(255, 203, 107);">src</span><span class="token token attr-equals" 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(165, 232, 68);">index.js</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 class="token token" style="color: rgb(255, 102, 102);">script</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(255, 102, 102);">body</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(255, 102, 102);">html</span><span class="token token" style="color: rgb(137, 221, 255);">></span></code></pre></pre>
|
|
<h2>Usage</h2>
|
|
<p>Using <code class="css-5tb6kd">p5.js</code> is very straight forward, there are two functions that you can put inside your <code class="css-5tb6kd">index.js</code> to start with. They are the functions <code class="css-5tb6kd">setup()</code> and <code class="css-5tb6kd">draw()</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(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);">// Setup logic here</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);">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 class="token token" style="color: rgb(137, 221, 255);">{</span><span>
|
|
</span><span> </span><span class="token token" style="color: rgb(97, 97, 97);">// draw logic here</span><span>
|
|
</span><span></span><span class="token token" style="color: rgb(137, 221, 255);">}</span></code></pre></pre>
|
|
<p><code class="css-5tb6kd">setup()</code> function is for setting up the initial values. It is going to run <strong>exactly once</strong>. <code class="css-5tb6kd">draw()</code> is going to run many times. It is going to run <strong>once per frame</strong>. If you have a frame rate of 30 frames per second, then <code class="css-5tb6kd">draw()</code> runs 30 times per second!</p>
|
|
<p><code class="css-5tb6kd">p5.js</code> makes writing <code class="css-5tb6kd">canvas</code> related code easier because it simplifies the common flow of drawing animations into <code class="css-5tb6kd">functions</code> like <code class="css-5tb6kd">setup()</code> and <code class="css-5tb6kd">draw()</code>. They also have different functions in their <a href="https://p5js.org/reference/">Reference</a>. We would utilize many of them in the next section.</p></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="./1_files/index-93af5efbf6d1e4b5.js.download"></script><script src="./1_files/2ad03d77-bc69d012ca2cb1bc.js.download"></script><script src="./1_files/7a7c95a0-6e5041ea50726778.js.download"></script><script src="./1_files/74-5b8e5392bdbd2366.js.download"></script><script src="./1_files/[course]-b436390263deec59.js.download"></script></body></html> |