JSFiddle - React, Tailwind, and code Playground
by popsul
HTML
<canvas width="600" height="600" id="langton"></canvas>JavaScript
var INF = true;
var DOWN = 0, LEFT = 1, UP = 2, RIGHT = 3;
var width = 600, height = 600;
window.addEventListener('load', function() {
var canvas = document.getElementById('langton');
var ctx = canvas.getContext('2d');
var currX = width / 2, currY = height / 2, direction = DOWN;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, width, height);
function move() {
switch (direction) {
case UP: currX--; break;
case DOWN: currX++; break;
case LEFT: currY++; break;
case RIGHT: currY--; break;
default: return;
}
if (INF) {
if (currX < 0) currX = width;
if (currX > width) currX = 0;
if (currY < 0) currY = height;
if (currY > height) currY = 0;
}
}
function rotatePos() {
switch(direction) {
case UP: direction = RIGHT; break;
case RIGHT: direction = DOWN; break;
case DOWN: direction = LEFT; break;
case LEFT: direction = UP; break;
}
}
function rotateNeg() {
switch(direction) {
case UP: direction = LEFT; break;
case RIGHT: direction = UP; break;
case DOWN: direction = RIGHT; break;
case LEFT: direction = DOWN; break;
}
}
setInterval(function () {
var data = ctx.getImageData(currX, currY, 1, 1);
if (data.data[0] == 0) {...