Clarify the use of RGBA vs ABGR in the game-of-life example

This commit is contained in:
dcodeIO 2018-04-25 22:39:51 +02:00
parent 6d6d1dddcf
commit ab08269276
5 changed files with 492 additions and 685 deletions

View File

@ -1,8 +1,10 @@
// see: https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life // see: https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life
// Configuration imported from JS. // Configuration imported from JS. On the WASM side, colors are handled in ABGR order (alpha, blue,
declare const RGB_ALIVE: u32; // green, red) because WASM is little endian. Doing so makes it possible to just copy the entire
declare const RGB_DEAD: u32; // ABGR memory in little endian byte order to the RGBA image buffer in big endian byte order.
declare const BGR_ALIVE: u32;
declare const BGR_DEAD: u32;
declare const BIT_ROT: u32; declare const BIT_ROT: u32;
var w: i32, h: i32, s: i32; var w: i32, h: i32, s: i32;
@ -35,7 +37,7 @@ export function init(width: i32, height: i32): void {
// Start by filling output with random live cells. // Start by filling output with random live cells.
for (let y = 0; y < h; ++y) { for (let y = 0; y < h; ++y) {
for (let x = 0; x < w; ++x) { for (let x = 0; x < w; ++x) {
set(x, y, Math.random() > 0.1 ? RGB_DEAD & 0x00ffffff : RGB_ALIVE | 0xff000000); set(x, y, Math.random() > 0.1 ? BGR_DEAD & 0x00ffffff : BGR_ALIVE | 0xff000000);
} }
} }
} }
@ -67,10 +69,10 @@ export function step(): void {
// A live cell with 2 or 3 live neighbors rots on to the next generation. // A live cell with 2 or 3 live neighbors rots on to the next generation.
if ((aliveNeighbors & 0b1110) == 0b0010) rot(x, y, self); if ((aliveNeighbors & 0b1110) == 0b0010) rot(x, y, self);
// A live cell with fewer than 2 or more than 3 live neighbors dies. // A live cell with fewer than 2 or more than 3 live neighbors dies.
else set(x, y, RGB_DEAD | 0xff000000); else set(x, y, BGR_DEAD | 0xff000000);
} else { } else {
// A dead cell with exactly 3 live neighbors becomes a live cell. // A dead cell with exactly 3 live neighbors becomes a live cell.
if (aliveNeighbors == 3) set(x, y, RGB_ALIVE | 0xff000000); if (aliveNeighbors == 3) set(x, y, BGR_ALIVE | 0xff000000);
// A dead cell with fewer or more than 3 live neighbors just rots. // A dead cell with fewer or more than 3 live neighbors just rots.
else rot(x, y, self); else rot(x, y, self);
} }
@ -81,9 +83,9 @@ export function step(): void {
/** Fills the row and column indicated by `x` and `y` with random live cells. */ /** Fills the row and column indicated by `x` and `y` with random live cells. */
export function fill(x: u32, y: u32, p: f64): void { export function fill(x: u32, y: u32, p: f64): void {
for (let ix = 0; ix < w; ++ix) { for (let ix = 0; ix < w; ++ix) {
if (Math.random() < p) set(ix, y, RGB_ALIVE | 0xff000000); if (Math.random() < p) set(ix, y, BGR_ALIVE | 0xff000000);
} }
for (let iy = 0; iy < h; ++iy) { for (let iy = 0; iy < h; ++iy) {
if (Math.random() < p) set(x, iy, RGB_ALIVE | 0xff000000); if (Math.random() < p) set(x, iy, BGR_ALIVE | 0xff000000);
} }
} }

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -62,8 +62,8 @@ fetch("build/optimized.wasm")
.then(response => response.arrayBuffer()) .then(response => response.arrayBuffer())
.then(buffer => WebAssembly.instantiate(buffer, { .then(buffer => WebAssembly.instantiate(buffer, {
env: { env: {
RGB_ALIVE : rgb2le(RGB_ALIVE) | 1, // little endian, LSB must be set BGR_ALIVE : rgb2bgr(RGB_ALIVE) | 1, // little endian, LSB must be set
RGB_DEAD : rgb2le(RGB_DEAD) & ~1, // little endian, LSB must not be set BGR_DEAD : rgb2bgr(RGB_DEAD) & ~1, // little endian, LSB must not be set
BIT_ROT, BIT_ROT,
memory, memory,
abort: function() {} abort: function() {}
@ -125,7 +125,8 @@ fetch("build/optimized.wasm")
console.log(err.stack); console.log(err.stack);
}); });
function rgb2le(rgb) { // see comment in assembly/index.ts on why this is useful
function rgb2bgr(rgb) {
return ((rgb >>> 16) & 0xff) | (rgb & 0xff00) | (rgb & 0xff) << 16; return ((rgb >>> 16) & 0xff) | (rgb & 0xff00) | (rgb & 0xff) << 16;
} }
</script> </script>