2d:null 2e:["$","title",null,{"children":"SM3809_A3 | John C | Observable"}] 33:Tf88,html`

SM3809_A3

Finding Emergence

Readings

1D Cellular Automata looks like some kind of 1D Game of Life (and also makes me think about Turing machine), but the number of neighbors is a variable, and there can be more states rather than just dead or alive (basically more states under the category of alive). Basically it is a 1D version of a superset of Game of Life.
Game of Life The first time I read about this is in The Grand Design by Stephen Hawking and Leonard Mlodinow, when I was in secondary. I remember it well because at the time this Game of Life is one of the few things that I understood in that book, and this is its charm: it is so simple that a secondary student can easily understand, but it is also so complicated that many physicists spent years learning about it.
Braitenberg's Vehicles This one is more complicated compared to the above ones: each of the vehicles is a single system that can get info from and react to a bigger system, the environment (which contain also fraction and disturbance). It reminds me of biology, because of how the vehicles act like "alive" (and the sensor-motor system looks very like a reflex arc), but also quite different, since if there are many vehicles, they don't interact with each other (ethology).
L-System This is a cool thing, I have made one work using this system (and also many other algorithms for fractals and chaos theory), link here
Boids So, here comes ethology! 3 simple rules to replicate the behavior of bird flocks.
Social Dynamic Using 2D Cellular Automata in social science. The paper suggests that CA based modeling can be a good tool for social dynamics and research on relationship/community changing, this is a very surprising approach to me. It is hard to imagine how a totally certain system like CA can simulate systems involving human beings (which are usually thought to be highly uncertain factors in any system).
Evolutionary Algorithm Like a battle royale game of solutions + hybrid experiment XD, like 1000 programs taking the exam, each time the top n% remain, then making child programs with the characteristics of them, then repeat the circle until we got a program that passes the exam with 100% score
Generative Systems I have also used one of the systems(Differential line) in a recent work too XD link here

Describe

Conway's Game of Life

Sketch

${await FileAttachment("GameOfLife.png").image()}
Text
In an Infinite 2D grid of cells, each cell is in either one of the two states (dead or alive). All the cells are given an initial state, then in the next time unit, their states change according to the below rules
- Define a cell's neighbors as the 8 other cells surrounding it
- if a cell is alive
  - it stays alive if 2 or 3 of its neighbors are alive;
  - otherwise, it becomes dead
- if a cell is dead
  - it becomes alive only if 3 of its neighbors are alive;
  - otherwise, it stays dead

Imitate

`34:T1d8c,p5(s => { /* ! I came up with the code here (and also the Game of Life part of below sketches) myself, but it could look like others' sketches online because Game of Life is very famous, and I am 100% sure this sketch is not the most efficient way to do it. */ let grid = []; class Cell{ constructor(xIndex, yIndex, state, size, other1, other2){ this.xidx = xIndex; this.yidx = yIndex; this.state = state; this.nextState = undefined; //true = alive, false = dead this.size = size; } display(){ s.push(); s.noStroke(); if (this.state){ s.fill(244); } else { s.pop(); return; } s.rect(this.size/2+(this.xidx*this.size),this.size/2+(this.yidx*this.size),this.size,this.size); s.pop(); } getNextState(){ let neighborAliveCount = 0; for (let row = this.yidx-1; row <= this.yidx+1; row++) { for (let col = this.xidx-1; col <= this.xidx+1; col++) { if (row == this.yidx && col == this.xidx) continue; //dont count itself if (row < 0 || col < 0) continue; if (row > s.height/this.size - 1 || col > s.width/this.size - 1) continue; //out of canvas cells count as dead let index = col + row * (s.width/this.size); if (grid[index].state == true) { neighborAliveCount++; } if (neighborAliveCount > 3) { break; } } } if (this.state) { //alive if (neighborAliveCount<2 || neighborAliveCount>3){ this.nextState = false; //die } else { this.nextState = true; } } else { //dead if (neighborAliveCount == 3) { this.nextState = true; //revive } else { this.nextState = false; } } } update(){ this.state = this.nextState; this.nextState = undefined; } } let preset = [ [[2,1],[3,2],[3,3],[2,3],[1,3]], [[2,1],[3,1],[2,2],[3,2]], [[1,1],[1,2],[2,2],[2,3],[3,1]], [[2,1],[2,2],[2,3]], [[2,1],[1,2],[1,3],[2,4],[3,2],[3,3]], [[1,0],[2,0],[0,1],[3,1],[1,2],[3,2],[2,3]], [[1,1],[2,1],[1,2],[3,2],[2,3]], [[2,1],[1,2],[3,2],[2,3]], [[2,1],[3,1],[4,1],[1,2],[2,2],[3,2]], [[0,0],[1,0],[0,1],[1,1],[2,2],[3,2],[2,3],[3,3]] ]; //preset[set#][point#][0:y,1:y] //from wiki https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life let mode; let started = false; let paused = false; let inited = false; let size = 6; s.setup = function () { s.createCanvas(600,600); s.background(0); s.rectMode(s.CENTER); } s.draw = function () { if (!started) { mode = s.getMode(); s.push(); s.fill(244); s.noStroke(); s.textSize(50); s.text('Game of Life', 20, 80); s.textSize(30); s.text('Mode: ' + mode, 20, 150); s.textSize(20); s.text('Click to start', 20, 200); s.textSize(10); s.text('By johnc', 560, 580); s.pop(); } else { if (!paused) { // main s.background(0); if (mode == 'Total Random') { if (!inited) { s.push(); s.fill(244); s.text("initializing",s.width/2 - s.textWidth("initializing")/2,s.height/2 - (s.textAscent()+s.textDescent())/2); s.pop(); for (let yidx = 0; yidx < s.height/size; yidx++) { for (let xidx = 0; xidx < s.width/size; xidx++) { grid.push(new Cell(xidx, yidx, s.random([false,false,true]), size)); } } s.frameRate(1); inited = true; } else { grid.forEach(c => { c.display(); c.getNextState(); }); grid.forEach(c => { c.update(); }); } } else if (mode == 'Random Preset'){ if (!inited) { s.push(); s.fill(244); s.text("initializing",s.width/2 - s.textWidth("initializing")/2,s.height/2 - (s.textAscent()+s.textDescent())/2); s.pop(); for (let yidx = 0; yidx < s.height/size; yidx++) { for (let xidx = 0; xidx < s.width/size; xidx++) { grid.push(new Cell(xidx, yidx, false, size)); } } //create blank grid for (let r = 0; r < (s.height/size)/5; r++) { for (let c = 0; c < (s.width/size)/5; c++) { if (r%2 == c%2) continue; let set = s.random(preset); set.forEach(p => { let xid = c*5+p[0]; let yid = r*5+p[1]; grid[xid + yid * (s.width/size)].state = true; }); } } //create pattern s.frameRate(1); inited = true; } else { grid.forEach(c => { c.display(); c.getNextState(); }); grid.forEach(c => { c.update(); }); } } else if (mode == 'Self Draw') { if (!inited) { if (grid.length == 0) { for (let yidx = 0; yidx < s.height/size; yidx++) { for (let xidx = 0; xidx < s.width/size; xidx++) { grid.push(new Cell(xidx, yidx, false, size)); } } } else { //darwing done by mousePressed/mouseDragged function grid.forEach(c => { c.display(); }); //finished by typing enter -> keyTyped function } } else { grid.forEach(c => { c.display(); c.getNextState(); }); grid.forEach(c => { c.update(); }); } } } else { s.noLoop(); } } } s.getMode = function () { if (boxes[2]) { return 'Self Draw'; } else if (boxes[1]) { return 'Random Preset'; } else { return 'Total Random'; } } s.mouseClicked = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { if (!started) { started = true; } else if (inited) { if (!paused) { paused = true; } else { paused = false; s.loop(); } } } } s.mousePressed = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { //self draw if (!inited && mode == "Self Draw" && grid.length > 0) { let xid = s.floor(s.mouseX/size); let yid = s.floor(s.mouseY/size); grid[xid + yid * (s.width/size)].state = ! grid[xid + yid * (s.width/size)].state; } } } s.mouseDragged = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { //self draw if (!inited && mode == "Self Draw" && grid.length > 0) { let xid = s.floor(s.mouseX/size); let yid = s.floor(s.mouseY/size); grid[xid + yid * (s.width/size)].state = ! grid[xid + yid * (s.width/size)].state; } } } s.keyTyped = function () { if (!inited && mode == "Self Draw" && grid.length > 0 && (s.keyCode === s.RETURN || s.keyCode === s.ENTER)) { s.frameRate(1); inited = true; } } })35:T1077,p5(s => { let grid = [] let layer = []; let w_click = [ [1,0],[2,0],[4,0],[7,0],[9,0],[10,0],[12,0],[14,0], [1,1],[4,1],[7,1],[9,1],[12,1],[13,1], [1,2],[4,2],[7,2],[9,2],[12,2],[14,2], [1,3],[2,3],[4,3],[5,3],[7,3],[9,3],[10,3],[12,3],[15,3] ]; class Cell{ constructor(xIndex, yIndex, state, size, other1, other2){ this.xidx = xIndex; this.yidx = yIndex; this.state = state; this.nextState = undefined; //true = alive, false = dead this.size = size; } getNextState(arr){ let neighborAliveCount = 0; for (let row = this.yidx-1; row <= this.yidx+1; row++) { for (let col = this.xidx-1; col <= this.xidx+1; col++) { if (row == this.yidx && col == this.xidx) continue; //dont count itself if (row < 0 || col < 0) continue; if (row > s.height/this.size - 1 || col > s.width/this.size - 1) continue; //out of canvas cells count as dead let index = col + row * (s.width/this.size); if (arr[index].state == true) { neighborAliveCount++; } if (neighborAliveCount > 3) { break; } } } if (this.state) { //alive if (neighborAliveCount<2 || neighborAliveCount>3){ this.nextState = false; //die } else { this.nextState = true; } } else { //dead if (neighborAliveCount == 3) { this.nextState = true; //revive } else { this.nextState = false; } } } update(){ this.state = this.nextState; this.nextState = undefined; } } let size = 24; let paused = false; let centerX,centerY,centerZ; let started = false; s.setup = function () { s.createCanvas(600,600,s.WEBGL); s.background(0); //random block for (let yidx = 0; yidx < s.height/size; yidx++) { for (let xidx = 0; xidx < s.width/size; xidx++) { grid.push(new Cell(xidx, yidx, s.random([false,false,true]), size)); } } centerX = s.width/2; centerY = s.height/2; centerZ = 0; s.frameRate(2); s.colorMode(s.HSB); } s.draw = function() { if (!started) { s.background(0); for (let i = 0; i < w_click.length; i++) { let xid = -8+w_click[i][0]; let yid = -2+w_click[i][1]; s.push(); s.noFill(); s.stroke(0,0,100); s.translate(size/2+(xid*size),size/2+(yid*size),50); s.box(size,size,size/2); s.pop(); } } else { if (paused) { s.noLoop(); } else { s.background(0); s.camera(s.width/2,1.2*s.height,(s.height/1.2) / s.tan(s.PI*30.0 / 180.0),centerX,centerY,centerZ,0,1,0); s.push(); s.ambientLight(0,0,80); s.pop(); let parr = []; grid.forEach(c => { if (c.state) { let h = 180+180*s.sin(s.frameCount/30); parr.push([c.xidx, c.yidx,h]); } }); if (layer.length <=25) { layer.push(parr); } else { layer.shift(); layer.push(parr); } layer.forEach((l,i) => { let z = size/4+i*size/2; l.forEach(p => { s.push(); s.noStroke(); s.fill(p[2],10,50,0.5); s.stroke(150,100); s.translate(size/2+(p[0]*size),size/2+(p[1]*size),z); s.box(size,size,size/2); s.pop(); }); }); grid.forEach((c,i,a) => { c.getNextState(a); }); grid.forEach(c => { c.update(); }); } } } s.mouseClicked = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { if (!started) { started = true; } else { if (paused) { paused = false; s.loop(); } else { paused = true; } } } } s.mouseMoved = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height && false) { centerX += (s.mouseX - s.pmouseX) / 3; centerY += (s.mouseY - s.pmouseY) / 3; centerX = s.constrain(centerX,0,s.width); centerY = s.constrain(centerY,0,s.height); } } })36:T11b6,p5(s => { let sound; class Cell{ constructor(xIndex, yIndex, state, size){ this.xidx = xIndex; this.yidx = yIndex; this.state = state; this.nextState = undefined; //true = alive, false = dead this.size = size; } display(t){ s.push(); s.noStroke(); if (this.state){ if (t == 'w'){ s.fill(255); } else if (t == 'b'){ s.fill(0); } } else { s.pop(); return; } s.ellipse(this.size/2+(this.xidx*this.size),this.size/2+(this.yidx*this.size),this.size,this.size); s.pop(); } getNextState(arr, enyArr){ let neighborAliveCount = 0; let enyCount = 0; for (let row = this.yidx-1; row <= this.yidx+1; row++) { for (let col = this.xidx-1; col <= this.xidx+1; col++) { if (row == this.yidx && col == this.xidx) continue; //dont count itself if (row < 0 || col < 0) continue; if (row > s.height/this.size - 1 || col > s.width/this.size - 1) continue; //out of canvas cells count as dead let index = col + row * (s.width/this.size); if (arr[index].state == true) { neighborAliveCount++; } if (enyArr[index].state == true) { enyCount++; } } } if (this.state) { //alive if (neighborAliveCount<2 || neighborAliveCount>3){ this.nextState = false; //die } else if (neighborAliveCount < enyCount && enyCount >= 4) { //die by getting killed this.nextState = false; sound.play(); } else { this.nextState = true; } } else { //dead if (neighborAliveCount == 3 && neighborAliveCount >= enyCount) { this.nextState = true; //summon ally } else { this.nextState = false; } } } update(){ this.state = this.nextState; this.nextState = undefined; } } let teamB = []; let teamW = []; let size = 6; let started = false; let paused = false; let framer = 0; let framerSet = false; s.preload = function () { sound = new Howl({ src: [uahU], volume: 0.06, format: ['mp3'], loop: false, onloaderror: function() { console.log('fail to load Uahhhhh'); } }); } s.setup = function (){ s.createCanvas(600,600); s.background(126); s.frameRate(2); for (let yidx = 0; yidx < s.height/size; yidx++) { for (let xidx = 0; xidx < s.width/size; xidx++) { teamB.push(new Cell(xidx, yidx, s.random([false,false,true]), size)); teamW.push(new Cell(xidx, yidx, s.random([false,false,true]), size)); } } } s.draw = function () { if (!started) { s.background(126); s.push(); s.textSize(60); s.textAlign(s.LEFT,s.CENTER); s.noStroke(); s.fill(0); s.text("Click",s.width/2 - s.textWidth("Click to start killing")/2,s.height/2); s.fill(255); s.text("to",s.width/2 - s.textWidth("Click to start killing")/2 + s.textWidth("Click "),s.height/2); s.fill(0); s.text("start",s.width/2 - s.textWidth("start killing")/2 + s.textWidth("Click to ")/2,s.height/2); s.fill(255); s.text("killing",s.width/2 - s.textWidth("killing")/2 + s.textWidth("Click to start ")/2,s.height/2); s.pop(); return; } else { if (!framerSet) { framer = s.frameCount; framerSet = true; } if (s.frameCount - framer < 10) { Howler.volume(s.map(s.frameCount - framer,0,9,0.1,1)); //prevent too loud sound } if (paused) { s.noLoop(); } else { //main s.background(126); teamB.forEach((c,i,a) => { c.display('b'); c.getNextState(a,teamW); }); teamW.forEach((c,i,a) => { c.display('w'); c.getNextState(a,teamB); }); teamB.forEach(c => { c.update(); }); teamW.forEach(c => { c.update(); }); } } } s.mouseClicked = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { if (!started) { started = true; } else { if (paused) { paused = false; s.loop(); } else { paused = true; } } } } })37:T237e,p5(s => { let gridG1 = []; let gridG2 = []; let gridG3 = []; let gridG4 = []; let all = []; class Cell{ constructor(xIndex, yIndex, state, size){ this.xidx = xIndex; this.yidx = yIndex; this.state = state; this.nextState = undefined; //true = alive, false = dead this.size = size; } getNextState(arr){ let neighborAliveCount = 0; for (let row = this.yidx-1; row <= this.yidx+1; row++) { for (let col = this.xidx-1; col <= this.xidx+1; col++) { if (row == this.yidx && col == this.xidx) continue; //dont count itself if (row < 0 || col < 0) continue; if (row > s.height/this.size - 1 || col > s.width/this.size - 1) continue; //out of canvas cells count as dead let index = col + row * (s.width/this.size); if (arr[index].state == true) { neighborAliveCount++; } if (neighborAliveCount > 3) { break; } } } if (this.state) { //alive if (neighborAliveCount<2 || neighborAliveCount>3){ this.nextState = false; //die } else { this.nextState = true; } } else { //dead if (neighborAliveCount == 3) { this.nextState = true; //revive } else { this.nextState = false; } } } update(){ this.state = this.nextState; this.nextState = undefined; } } let started = false; let paused = false; let g3M = []; let g2M = []; let g1M = []; let framer = 0; let framerSet = false; s.setup = function() { s.createCanvas(600,600); s.background(0); s.angleMode(s.DEGREES); s.rectMode(s.CENTER); //the basic algorithm is four random initialized game of life with different size let g1Size = 24; for (let yidx = 0; yidx < s.height/g1Size; yidx++) { for (let xidx = 0; xidx < s.width/g1Size; xidx++) { gridG1.push(new Cell(xidx, yidx, s.random([false,false,true]), g1Size)); } } //lines let g2Size = 24; for (let yidx = 0; yidx < s.height/g2Size; yidx++) { for (let xidx = 0; xidx < s.width/g2Size; xidx++) { gridG2.push(new Cell(xidx, yidx, s.random([false,false,true]), g2Size)); } } //lines let g3Size = 6; for (let yidx = 0; yidx < s.height/g3Size; yidx++) { for (let xidx = 0; xidx < s.width/g3Size; xidx++) { gridG3.push(new Cell(xidx, yidx, s.random([false,false,true]), g3Size)); } } //dots let g4Size = 40; for (let yidx = 0; yidx < s.height/g4Size; yidx++) { for (let xidx = 0; xidx < s.width/g4Size; xidx++) { gridG4.push(new Cell(xidx, yidx, s.random([false,false,true]), g4Size)); } } //geo shapes s.frameRate(3.5); all = [gridG1, gridG2, gridG3, gridG4]; for(let i = 0; i < 15; i++) { g3M.push([]); g2M.push([]); g2M.push([]); //to init g3M & g2M & g1M, so their size do not change in draw function (without bug) } } let w_click = [ [1,0],[2,0],[4,0],[7,0],[9,0],[10,0],[12,0],[14,0], [1,1],[4,1],[7,1],[9,1],[12,1],[13,1], [1,2],[4,2],[7,2],[9,2],[12,2],[14,2], [1,3],[2,3],[4,3],[5,3],[7,3],[9,3],[10,3],[12,3],[15,3] ]; s.draw = function() { if (!started) { s.background(0); for (let i = 0; i < w_click.length; i++) { let xid = 4+w_click[i][0]; let yid = 10+w_click[i][1]; s.push(); s.noFill(); s.stroke(255); s.translate(24/2+(xid*24),24/2+(yid*24),50); s.rect(0,0,24,24); s.pop(); } } else { if (paused){ s.noLoop(); } else { //main //console.log(s.frameRate()); if (!framerSet) { framer = s.frameCount; framerSet = true; } s.background(0); //g3 let newG3 = [] gridG3.forEach(c => { let x = c.size/2 + c.xidx*c.size; let y = c.size/2 + c.yidx*c.size; if (c.state) { newG3.push([x, y, 1]); } else { newG3.push([x, y, 0]); } }); if (g3M.length <=15) { g3M.push(newG3); } else { g3M.shift(); g3M.push(newG3); } g3M.forEach((g,i) => { g.forEach((p) => { if (p[2] == 1){ s.push(); s.noStroke(); s.fill(200,s.map(i,0,g3M.length - 1,10,100)); s.ellipse(p[0],p[1],5,5); s.pop(); } }); }); //g1 if (s.frameCount - framer > 20) { let g1parr = []; let usedP0 = []; let line0 = []; gridG1.forEach(c => { if (c.state) { let x = c.size/2 + c.xidx*c.size; let y = c.size/2 + c.yidx*c.size; g1parr.push([x,y]); } }); g1parr.forEach((p,i) => { if (usedP0.includes(i)){ //donothing } else { let k = s.floor(s.random(g1parr.length)); let t = 0; while (usedP0.includes(k) || s.dist(p[0],p[1],g1parr[k][0],g1parr[k][1]) < 31) { k = s.floor(s.random(g1parr.length)); t ++; if (t > 100){ break; } } usedP0.push(i); usedP0.push(k); line0.push([p[0],p[1],g1parr[k][0],g1parr[k][1]]); } }); if (g1M.length <=15) { g1M.push(line0); } else { g1M.shift(); g1M.push(line0); } g1M.forEach((la,i) => { let alpha = s.map(i,0,14,0,50); la.forEach((l) => { s.push(); s.stroke(244,alpha); s.line(l[0],l[1],l[2],l[3]); s.pop(); }); }); } //g2 if (s.frameCount - framer > 30) { let g2parr = []; let usedP1 = []; let line1 = []; gridG2.forEach(c => { if (c.state) { let x = c.size/2 + c.xidx*c.size; let y = c.size/2 + c.yidx*c.size; g2parr.push([x,y]); } }); g2parr.forEach((p,i) => { if (usedP1.includes(i)){ //donothing } else { let k = s.floor(s.random(g2parr.length)); let t = 0; while (usedP1.includes(k) || s.dist(p[0],p[1],g2parr[k][0],g2parr[k][1]) < 31) { k = s.floor(s.random(g2parr.length)); t ++; if (t > 100){ break; } } usedP1.push(i); usedP1.push(k); line1.push([p[0],p[1],g2parr[k][0],g2parr[k][1]]); } }); if (g2M.length <=15) { g2M.push(line1); } else { g2M.shift(); g2M.push(line1); } g2M.forEach((la,i) => { let alpha = s.map(i,0,14,0,50); la.forEach((l) => { s.push(); s.stroke(244,alpha); s.line(l[0],l[1],l[2],l[3]); s.pop(); }); }); } //g4 gridG4.forEach(c => { if (c.state){ let x = c.size/2 + c.xidx*c.size; let y = c.size/2 + c.yidx*c.size; s.drawRandomOutline(x,y); } }); //update at the end all.forEach(g => { g.forEach((c,i,a) => { c.getNextState(a); }); g.forEach(c => { c.update(); }); }); } } } s.drawRandomOutline = function (x, y){ let dice = s.random(); let sz = 40; s.push(); s.translate(x,y); s.noFill(); s.stroke(255,s.random(150,255)); s.strokeWeight(2); if (dice < 0.2) { //circle s.ellipse(0,0,s.random(sz*0.8,sz*1.2)); } else if (dice < 0.4) { // tri s.rotate(s.random(360)); let a = s.random(sz*0.4,sz*0.6); s.triangle(0,-a,a*s.sin(60),a*s.cos(60),-a*s.sin(60),a*s.cos(60)); } else if (dice < 0.6) { // rect s.rotate(s.random(360)); let a = s.random(sz*0.8,sz*1.2); s.rect(0,0,a,a); } else if (dice < 0.8) { //sth s.rotate(s.random([0,1,2,3])*90); let a = s.random(sz*0.4,sz*0.6); s.triangle(0,0,a,-a,-a,-a); s.triangle(0,0,a,a,-a,a); } else { //other sth s.rotate(s.random(360)); let d = s.random(sz*0.8,sz*1.2); let a = d/2; s.ellipse(0,0,d,d); s.triangle(0,-a,a*s.sin(60),a*s.cos(60),-a*s.sin(60),a*s.cos(60)); } s.pop(); } s.mouseClicked = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { if (!started) { started = true; } else { if (paused) { paused = false; s.loop(); } else { paused = true; } } } } })38:[{"id":"371260ef169b8398a45f961495b739716da66b9475c3d06a5595c3e068d74f9268ab21fc454930a07cc843a02600ad5570d8f97052a77b52614f3036ba0b57c3","href":"https://static.observableusercontent.com/files/371260ef169b8398a45f961495b739716da66b9475c3d06a5595c3e068d74f9268ab21fc454930a07cc843a02600ad5570d8f97052a77b52614f3036ba0b57c3","name":"GameOfLife.png","type":"image/png","lastModified":1612256683981.306,"size":244520},{"id":"7278f2ee3b9d76ba2638b3e4ced31582116ed010e2c30d58f3a60c52aa5fe75735500b972ae02f5e7bdce48ac04528e81728ed5117c08850376be2bc5ddf40ae","href":"https://static.observableusercontent.com/files/7278f2ee3b9d76ba2638b3e4ced31582116ed010e2c30d58f3a60c52aa5fe75735500b972ae02f5e7bdce48ac04528e81728ed5117c08850376be2bc5ddf40ae","name":"Uah.mp3","type":"audio/mpeg","lastModified":1612405298259.309,"size":7857}] 31:{"id":"f3bad53732b2a87b","slug":"sm3809_a3","title":"SM3809_A3","thumbnail":"989fdd9c5acd4bc1f77efa3d4afd8d126597fc5542288e1c74895653e736b982","access_level":"public","create_time":"$D2021-01-31T09:17:50.774Z","update_time":"$D2021-02-04T11:23:19.416Z","view_time":null,"first_public_time":"$D2021-01-31T09:18:01.477Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024"},"version":455,"publish_version":455,"role":null,"authored":false,"authors":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null}],"members":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SM3809_A3","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"html`\n

when the simulation is started, click to pause the sketch
also (obviously) you can change mode by using the radio buttons
In self draw mode, press Return/Enter to start the simulation after drawing

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof boxes = {\n //ref to https://observablehq.com/@s-haensch/multiple-inputs-in-a-cell\n const form = html`\n \n` ;\n form.oninput = () => {\n form.value = [form.choiceG[0].checked, form.choiceG[1].checked, form.choiceG[2].checked];\n}\n form.value = [form.choiceG[0].checked, form.choiceG[1].checked, form.choiceG[2].checked];\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"html`

Activate

here

Jared Tarbell

When below sketches are started, click to pause it (recommended before viewing next)

\n\n

Block

\nJust trying out webGL
\nAt some point, for me it really looks like the buildings (or should we call them little cargo
containers) in HK floating in the sky.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"html`

Killing

\n⚠️At the first few frames there might be (super)high volume sound! Please adjust the volume of your system before clicking to start
\nGo(圍棋) is the most peaceful killing game
When a piece(棋子) get killed by a similar rule like the one in Go, it will scream out, the more pieces killed in a frame, the louder the scream is.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"html`

Untitled

Many say that they see pixelated characters (like those in games on Game Boy) in Conway's Game of Life, but what I find more interesting is the combination of basic geometry shapes, and the contrast of black and white.
Wait for more than a few secounds, there's more than you see at the beginning

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html`\n

\n

-------------------------------below is import and setup section-------------------------------

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {p5} from \"@real-john-cheung/sm3809-a1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {p5c} from '@real-john-cheung/sm3809-a1'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"import {Howl} from '@real-john-cheung/sm3809-a2'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"import {Howler} from '@real-john-cheung/sm3809-a2'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"uah = FileAttachment(\"Uah.mp3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"uahU = uah.url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`\n