PixelManipulator is a TypeScript library that can run any two-dimensional cellular automata, such as "Conway's Game of Life," and "Rule 90." Inspired by the The Powder Toy.
The demo includes a full-view pixel array, with configurable size, along with a movable viewfinder - also with configurable size. Targeter lines - synced between the viewfinder and the full-view pixel array - are also equipped so you can line up your complicated large-scale builds. You can even disable the targeter lines, the "focus box;" a box indicating the location of the viewfinder, and the pixelCounter, a tool that lets you see how many of what pixel are present. Don't forget that the pixel placer menu lets you not only set a different element for alt, normal and control clicking, but lets you fill the full-view pixel array with a specified random percent of that element with only a button click. All this, and a newly added element customizer, allowing one to edit the color, name and loop attributes of an element.
Pre-programmed cellular automata include:
- Conway's Game of Life (with a non-looped variant as well)
- Brian's Brain
- Seeds
- Highlife
- Wireworld
- These Wolfram 2D rules
- These custom elements
- Blocks (They do nothing but serve as a valuable obstacle)
- Water (Flows like water)
- Acid (Destroys everything it touches, including itself)
In your project run one of these:
- For yarn,
yarn add pixelmanipulator - For npm,
npm i pixelmanipulator
If you are using esmodules, you now can import it like this:
import { PixelManipulator, rules, Ctx2dRenderer } from 'pixelmanipulator'A great starting point is this console-only demo.
To run the node demo
- Clone this repo.
npm inpm run node-demo
For documentation,
Start with this html:
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/pixelmanipulator@^5.5.7"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas")
// Create a renderer that renders on that canvas
var renderer = new pixelmanipulator.Ctx2dRenderer(canvas)
// Create a PixelManipulator, setting the size to 400 by 400
var p = new pixelmanipulator.PixelManipulator(renderer, 400, 400)
// An example element to get you started.
var gol = p.addElement( {
name: "Conway's Game Of Life",
// born on 3, survives on 2 or 3
...pixelmanipulator.rules.lifelike(p, 'B3/S23'),
// the rgb color
renderAs: [0, 255, 0]
})
// If your browser doesn't support spread syntax
// (that's the `...`), then this works too!
var rule_ninety = p.addElement({
name: "Rule 90",
renderAs: [147, 112, 219]
})
p.modifyElement(rule_ninety, pixelmanipulator.rules.wolfram(p, 'Rule 90'))
// Randomly fill 15% of the canvas with "Conway's Game of Life"
p.randomlyFill(gol, 15)
// Watch it go!
p.play()
</script>
</body>
</html>Pixelmanipulator supports various browser-side module loaders, such as
- CommonJS (CJS)
- Asynchronus Module Definition (AMD)
- And also supports a fallback to the namespaced global variable
pixelmanipulator
For documentation,
Conway's game of life is a cellular automata with a few simple rules.
All of these rules use a distance formula where it counts the both the pixels
that are immidately touching the edges and the pixels that are immidately
touching the corners.
For example (givin that O is the cell, and X is one that is checked in the
moore distance fourmula):
XXX
XOX
XXX
On an empty cell, if there are exactly three(3) living cells around it, then it is born. A cell will remain alive if there are exactly two(2) or three(3) living cells nearby. Elsewise, the cell either remains dead, or becomes dead.
For life-type cellular automata (cellular automata that are like Conway's game
of Life, but have different rules), there is a specific syntax for how to
specify them: B3/S23. This syntax literally means "born on three(3), survive
on two(2) or three(3)."
The example code above included B2/S23 (AKA "Conway's game of Life") as an example. Feel free to try out other patterns, like
- Seeds
B2/S - Highlife
B36/S23 - And more! (262144 combinations,
2^(9+9))