adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

mobile automata background

Browse Source
This commit is contained in:
Adam French
2025-11-21 22:57:57 +00:00
parent 07e5245046
commit ba319aa364
3 changed files with 62 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
html/css/styles.css
View File

@@ -5,7 +5,7 @@
}
body {
background-image: linear-gradient(to bottom, aqua, blue);
/*background-image: linear-gradient(to bottom, aqua, blue);*/
font-family: "Times New Roman", Times, serif;
/*background-image: url("../img/background.png");
@@ -30,5 +30,5 @@ h4 {
justify-content: center;
height: 100%;
width: 100%;
background-color: beige;
/*background-color: beige;*/
}

22
html/index.html
View File

@@ -5,6 +5,10 @@
defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>
<script type="module">
import {renderToCanvas} from './js/mobile-automata.mjs'
renderToCanvas(document.getElementById('automataCanvas'), window.innerWidth, window.innerHeight);
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -13,6 +17,21 @@
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<canvas
id="automataCanvas"
style="
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: block;
z-index: -1;
"
></canvas>
<div class="container">
<h1> Welcome </h1>
@@ -32,7 +51,8 @@
<h2>Shrines</h1>
<a href="shrines/evangelion.html">Evangelion</a>
<a href="shrines/skipskipbenben.html">Skip skip ben ben</a>
<a href="shrines/gto.html">GTO</a>
<a href="shrines/demoman.html">demoman</a>
<!--<a href="shrines/gto.html">GTO</a>-->
</div>
</body>

39
html/js/mobile-automata.mjs
View File

@@ -270,3 +270,42 @@ export function cyclicMa(rules, initialState, t) {
return states;
}
export function renderToCanvas(canvas, width, height) {
const r = 1;
const rules = toMaRule(100, 100, 2 * r + 1, 2);
let states = Array.from({ length: height }, () => Array(width).fill(0));
let head = Math.floor(width / 2) % width;
let row_num = 0;
const ctx = canvas.getContext("2d");
const img = ctx.createImageData(width, height);
const data = img.data;
function step() {
// calculate new state
let [newState, newHead] = cyclicMaStep(rules, [states[row_num], head], r);
states[row_num] = newState;
// write row to ImageData
for (let x = 0; x < width; x++) {
const idx = (row_num * width + x) * 4;
const val = newState[x] ? 255 : 0;
data[idx] = val;
data[idx + 1] = val;
data[idx + 2] = val;
data[idx + 3] = 255;
}
// update canvas (only this row)
ctx.putImageData(img, 0, row_num, 0, 0, width, 1);
// advance row and head
row_num = (row_num + 1) % height;
head = newHead;
requestAnimationFrame(step);
}
requestAnimationFrame(step);
}