diff options
author | Daniel Silverstone <dsilvers@digital-scurf.org> | 2020-05-24 19:33:59 +0100 |
---|---|---|
committer | Daniel Silverstone <dsilvers@digital-scurf.org> | 2020-05-24 19:34:08 +0100 |
commit | bcd88f96bb7774bd397959fd2366b2720672260d (patch) | |
tree | 4029f160511057290fd8a8d6264410a3829c094d /test | |
parent | 39552607a5314871d93c053fb2dc63df6bd54157 (diff) | |
download | netsurf-bcd88f96bb7774bd397959fd2366b2720672260d.tar.gz netsurf-bcd88f96bb7774bd397959fd2366b2720672260d.tar.bz2 |
test: Use putImageData features in life demo
Signed-off-by: Daniel Silverstone <dsilvers@digital-scurf.org>
Diffstat (limited to 'test')
-rw-r--r-- | test/js/life.html | 32 |
1 files changed, 24 insertions, 8 deletions
diff --git a/test/js/life.html b/test/js/life.html index bb3151b7b..de54d0aae 100644 --- a/test/js/life.html +++ b/test/js/life.html @@ -15,7 +15,7 @@ <h1 class="ns-border">Conway's Game of Life</h1> <div style="margin: 1em;"> <div> - Run: <input id="running" type="checkbox" /><br /> + Run: <input id="running" type="checkbox" checked/><br /> Set Size: <input id="width" type="text" size="4" value="50" /> x <input id="height" type="text" size="4" value="50" /> <button id="commitsize">Commit</button><br /> @@ -37,10 +37,13 @@ const iheight = document.getElementById("height"); const surface = document.getElementById("surface"); const context = surface.getContext("2d"); - var width = surface.width; - var height = surface.height; + var width = surface.width - 10; + var height = surface.height - 10; var frame = context.createImageData(width, height); var drawto = context.createImageData(width, height); + var greyto = context.createImageData(width, height); + const greylevel = 31; + function getOffset(x, y) { if (x < 0) { x = width + x; @@ -63,10 +66,12 @@ function setCell(x, y) { const offset = getOffset(x, y); drawto.data[offset + 3] = 255; + greyto.data[offset + 3] = greylevel; } function clearCell(x, y) { const offset = getOffset(x, y); drawto.data[offset + 3] = 0; + greyto.data[offset + 3] = 0; } function countNeighbours(x, y) { return ( @@ -82,7 +87,15 @@ } function flip() { var temp = frame; - context.putImageData(drawto, 0, 0); + context.putImageData(drawto, 5, 5); + context.putImageData(greyto, 5 - width, 5 - height); /* top left */ + context.putImageData(greyto, 5 - width, 5); /* left */ + context.putImageData(greyto, 5, 5 - height); /* top */ + context.putImageData(greyto, 5 + width, 5 + height); /* bottom right */ + context.putImageData(greyto, 5 + width, 5); /* right */ + context.putImageData(greyto, 5, 5 + height); /* bottom */ + context.putImageData(greyto, 5 + width, 5 - height); /* top right */ + context.putImageData(greyto, 5 - width, 5 + height); /* bottom left */ frame = drawto; drawto = temp; } @@ -121,6 +134,7 @@ drawto.data[ofs] = 0; } else { drawto.data[ofs] = 255; + greyto.data[ofs] = greylevel; } ofs += 4; } @@ -142,14 +156,16 @@ ihval <= 200 ) { console.log("yes"); - surface.height = ihval; - context.height = ihval; + surface.height = ihval + 10; + context.height = ihval + 10; height = ihval; - surface.width = iwval; - context.width = iwval; + surface.width = iwval + 10; + context.width = iwval + 10; width = iwval; frame = context.createImageData(width, height); drawto = context.createImageData(width, height); + greyto = context.createImageData(width, height); + resetGrey(); randomise(); } }); |