About Project:
Inspired by John Conway's Game of Life, this project explores how simple rules can generate complex behavioral patterns within a cellular automaton. The main focus is examining patterns, lifecycles, and the emergence of "generations" in a grid-based environment. The project simulates the connections between growth and decay by visualizing evolving patterns. I also added an "Elder" system where cells that live beyond a certain age are represented by symbols (α, β, γ, Ω) to show their resilience. This brings triumph to these enduring cells as they survive in a changing environment.
User Guide:
Add Alive Cells:
- Desktop: Click or drag on the canvas to place new cells.
- Mobile: Draw directly on the canvas to add cells where you want.
Shuffle Cells:
- Shuffle: Click the "SHUFFLE" button to randomize cell positions on the canvas.
Adjusting Parameters:
- Pattern: Choose patterns to form around the central area.
- Speed: Control how fast the cells evolve. Set to 0 to pause; increase to resume.
- Cell Size: Change the size of each cell in the grid.
Play/Pause Controls:
- Play: Click the "PLAY" button (green) to resume cell evolution.
- Pause: Click the "PAUSE" button (red) to pause cell evolution.
This work is licensed under CC BY-NC-SA 4.0
แบบจำลองการสร้างสิ่งมีชีวิต:
ในปี 1970 นักคณิตศาสตร์ชาวอังกฤษ จอห์น คอนเวย์ ได้สร้างกติกาของเกม Game of Life ขึ้นมา โดยต่อยอดจากแนวคิดของ cellular automata เป็นเกมที่ใช้ตารางง่าย ๆ ซึ่งในตารางนี้แต่ละช่องจะถูกล้อมรอบด้วยช่องเพื่อนบ้านแปดช่อง หมายถึงเซลล์หนึ่งเซลล์มีเพื่อนบ้านได้สูงสุดแปดเซลล์
กติกาหลัก ๆ ของเกมคือ แต่ละเซลล์ที่อยู่ในแต่ละช่องนั้นมีสถานะเพียง “อยู่” หรือ “ตาย” โดยขึ้นอยู่กับ:
- ถ้าเซลล์มีเพื่อนบ้านน้อยกว่าสองช่อง → เซลล์จะตาย เนื่องจากประชากรน้อยเกินไป
- ถ้าเซลล์มีเพื่อนบ้านระหว่างสองถึงสามช่อง → เซลล์จะรอดชีวิต เนื่องจากความหนาแน่นของเพื่อนบ้านที่เหมาะสม
- ถ้าเซลล์มีเพื่อนบ้านมากกว่าสามช่อง → เซลล์จะตาย เนื่องจากประชากรมากเกินไป
- ถ้าเซลล์ที่ตายไปแล้วมีเพื่อนบ้านรอบตัวพอดีสามช่อง → เซลล์จะเกิดใหม่ อีกครั้ง
จากกติกาง่าย ๆ เหล่านี้ สามารถสร้างรูปแบบ (patterns) ที่ดูซับซ้อนวุ่นวายได้มากมาย เปรียบเสมือนธรรมชาติในโลกที่ถูกสร้างขึ้นจากกติกาที่เรียบง่าย แล้ววิวัฒนาการไปเป็นสิ่งที่ดูแล้วซับซ้อนยิ่งขึ้นไปตามขั้นตอนที่มากขึ้น
โปรเจ็กต์นี้ได้รับแรงบันดาลใจจากเกม Game of Life ของคุณจอห์น คอนเวย์ โดยเวอร์ชั่นนี้ผมได้ทดลองเพิ่มกติกาเข้าไป เช่น "อายุของเซลล์" ถ้าเซลล์มีชีวิตรอดไปได้เรื่อย ๆ สีของเซลล์ก็จะเปลี่ยนแปลงไปตามช่วงวัยที่เปลี่ยนไป เพื่อสร้างองค์ประกอบทางศิลปะที่มาจากคณิตศาสตร์ รวมถึงเซลล์ที่มีชีวิตรอดได้นานขึ้นถึงจุดหนึ่งก็จะถูกแทนอายุด้วยสัญลักษณ์ (α, β, γ, Ω) เพื่อแสดงถึงความแข็งแกร่ง หรือการอยู่ถูกที่ถูกทางของเซลล์ที่ยืนหยัดอยู่ในสภาพแวดล้อมที่เปลี่ยนแปลงอยู่เสมอ
ในทางเทคนิคแล้วงานชิ้นนี้คงไม่ได้มีอะไรซับซ้อนนัก ช่วงต้นเดือนตุลาคมที่ผ่านมาผมได้ลองทำขึ้นมาเพื่อใช้เป็นแบบฝึกหัดและสร้างวินัยในการเรียน JavaScript แต่ยังไม่เสร็จ แต่พอทดลองทำออกมาแล้วก็พบว่ามันมีมิติทั้งทางความงามและความหมายที่น่าสนใจ จะทิ้งหรือหยุดไปก็เสียดาย วันหยุดสุดสัปดาห์ที่ผ่านมาจึงกลับมาลองพัฒนาต่อจนเป็นเวอร์ชั่นนี้ครับ
ขอบคุณครับ
2024.11.03
*This program was made using p5.js, a JavaScript library for creative coding.
Appendix A: Cellular Automata
In the 1940s, mathematicians John von Neumann and Stanislaw Ulam developed the concept of cellular automata. They introduced a system where complex behaviors emerge from simple rules governing how individual cells in a grid interact and change. Each cell's state evolves based on these rules and the states of its neighboring cells, leading to diverse patterns across the system.
This idea was groundbreaking at the time, showing that complex systems could arise from simple rules—even before computers existed. Cellular automata have been used to model natural processes like disease spread, population growth, and cloud formation.
In 1970, mathematician John Horton Conway created the Game of Life, a cellular automaton that uses simple rules to generate complex, evolving patterns. Each cell interacts with its eight neighbors, forming the basis for the simulation's evolution.
Rules:
- Any live cell with fewer than 2 live neighbors → dies (underpopulation).
- Any live cell with 2 or 3 live neighbors → survives to the next generation.
- Any live cell with more than 3 live neighbors → dies (overpopulation).
- Any dead cell with exactly 3 live neighbors → becomes a live cell (reproduction).
These simple rules create complex and unpredictable patterns that keep changing over time.
Appendix B: Adapting the Game of Life Rules to JavaScript Code
In this project, the rules of John Conway's Game of Life are implemented within the computeNextGeneration function. Below is a straightforward explanation of how each rule is applied:
/** Computes the next generation of the grid based on current state.
* @returns {Array} - The next grid state.
*/
function computeNextGeneration() {
// Initialize a new grid for the next generation
const nextGrid = create2DArray(cols, rows);
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
// Current cell
const cell = grid[i][j];
// Count live neighbors
const neighbors = countNeighbors(grid, i, j);
if (cell.alive) {
// Rule 1 & 3: Cell dies due to underpopulation or overpopulation
if (neighbors < 2 || neighbors > 3) {
nextGrid[i][j] = { alive: false, age: 0 };
} else {
// Rule 2: Cell survives and ages;
// Add 1 to cell's age for age tracking
nextGrid[i][j] = { alive: true, age: cell.age + 1 };
}
} else if (neighbors === 3) {
// Rule 4: Dead cell becomes alive (reproduction)
nextGrid[i][j] = { alive: true, age: 0 };
} else {
// Cell remains dead
nextGrid[i][j] = { alive: false, age: 0 };
}
}
}
// Return the updated grid
return nextGrid;
}
In addition to the basic Game of Life rules, this project incorporates an 'Elder' Aging System to enhance both the visual and conceptual narrative:
Aging Mechanism:
- Each alive cell has an
ageproperty that increments with each generation it survives. - The
agecan be utilized to alter the cell's color, representing different life stages and adding visual variety to the patterns.
Symbol Representation:
- Cells that reach a certain age are symbolized by characters (α, β, γ, Ω), highlighting their resilience and longevity within the ever-changing environment.
- This symbolic representation of the aesthetic appeal also provides a visual cue for the cell's history within the simulation.
