eukara
/
WebSurf
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test: Use putImageData features in life demo 

Signed-off-by: Daniel Silverstone <dsilvers@digital-scurf.org>
This commit is contained in:
Daniel Silverstone 2020-05-24 19:33:59 +01:00
parent 39552607a5
commit bcd88f96bb
No known key found for this signature in database
GPG Key ID: C30DF439F2987D74
1 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
test/js/life.html
View File

@ -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();
}
});