2023-10-16 15:12:17 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
div {
|
|
|
|
|
transition: all 1s linear;
|
|
|
|
|
}
|
2023-12-24 14:33:40 +01:00
|
|
|
.fancy {
|
|
|
|
|
color: red;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
height: 30vh;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
}
|
|
|
|
|
canvas {
|
|
|
|
|
border: black 1px solid;
|
|
|
|
|
}
|
2023-10-16 15:12:17 +02:00
|
|
|
</style>
|
2023-10-16 15:21:20 +02:00
|
|
|
<link rel="icon" type="image/x-icon" href="cat-memes-cats.gif">
|
2023-10-16 15:12:17 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-12-24 14:33:40 +01:00
|
|
|
<div class="fancy">This site is currently under construction! <br>
|
|
|
|
|
If you are in need of entertainment in the mean time click <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">here</a>!</div>
|
|
|
|
|
|
|
|
|
|
<canvas height="800px" width="800px"></canvas>
|
|
|
|
|
<button id="but">Start / Stop</button>
|
|
|
|
|
<button id="clear">Clear</button>
|
|
|
|
|
|
2023-10-16 15:12:17 +02:00
|
|
|
<script>
|
|
|
|
|
let divs = document.getElementsByTagName("div");
|
|
|
|
|
let size = parseInt(localStorage.getItem("size"));
|
|
|
|
|
if(isNaN(size)) size = 15;
|
|
|
|
|
for(let div of divs) {
|
|
|
|
|
div.style.fontSize = size + "px";
|
|
|
|
|
}
|
|
|
|
|
|
2023-12-24 14:33:40 +01:00
|
|
|
const max_size = 60;
|
2023-10-16 15:12:17 +02:00
|
|
|
const min_size = 10;
|
|
|
|
|
let growing = true;
|
|
|
|
|
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
if(size > 100) growing = false;
|
2023-10-16 15:21:20 +02:00
|
|
|
if(size < 20) growing = true;
|
2023-10-16 15:12:17 +02:00
|
|
|
|
|
|
|
|
if(growing) size += 20;
|
|
|
|
|
else size -= 20;
|
|
|
|
|
|
|
|
|
|
for(let div of divs) {
|
|
|
|
|
div.style.fontSize = size + "px";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
localStorage.setItem("size", size);
|
|
|
|
|
}, 1000);
|
2023-12-24 14:33:40 +01:00
|
|
|
|
|
|
|
|
|
|
|
|
|
let canvas = document.getElementsByTagName("canvas")[0];
|
|
|
|
|
const canvasSize = 800;
|
|
|
|
|
const gridSize = 50;
|
|
|
|
|
const pixelSize = canvasSize / gridSize;
|
|
|
|
|
let ctx = canvas.getContext("2d");
|
|
|
|
|
ctx.fillStyle = "black";
|
|
|
|
|
let draw = true;
|
|
|
|
|
let running = false;
|
|
|
|
|
|
|
|
|
|
window.addEventListener("keypress", e => {
|
|
|
|
|
if(e.key === "d") {
|
|
|
|
|
draw = !draw;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let grid = [];
|
|
|
|
|
for(let row = 0; row < gridSize; row++) {
|
|
|
|
|
grid[row] = [];
|
|
|
|
|
for(let col = 0; col < gridSize; col++) {
|
|
|
|
|
grid[row][col] = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let getMousePos = (canvas, evt) => {
|
|
|
|
|
var rect = canvas.getBoundingClientRect();
|
|
|
|
|
return {
|
|
|
|
|
x: evt.clientX - rect.left,
|
|
|
|
|
y: parseInt(evt.clientY - rect.top)
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let pressed = false;
|
|
|
|
|
canvas.addEventListener('mousedown', () => {
|
|
|
|
|
pressed = true;
|
|
|
|
|
});
|
|
|
|
|
canvas.addEventListener('mouseup', () => {
|
|
|
|
|
pressed = false;
|
|
|
|
|
});
|
|
|
|
|
canvas.addEventListener('click', evt => {
|
|
|
|
|
if(!running) {
|
|
|
|
|
var pos = getMousePos(canvas, evt);
|
|
|
|
|
let col = Math.floor(pos.x / pixelSize);
|
|
|
|
|
let row = Math.floor(pos.y / pixelSize);
|
|
|
|
|
grid[row][col] = true;
|
|
|
|
|
ctx.fillRect(pixelSize * col,pixelSize * row,pixelSize,pixelSize);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
canvas.addEventListener('mousemove', evt => {
|
|
|
|
|
if(pressed && !running) {
|
|
|
|
|
var pos = getMousePos(canvas, evt);
|
|
|
|
|
let col = Math.floor(pos.x / pixelSize);
|
|
|
|
|
let row = Math.floor(pos.y / pixelSize);
|
|
|
|
|
if(draw) {
|
|
|
|
|
ctx.fillStyle = "black";
|
|
|
|
|
grid[row][col] = true;
|
|
|
|
|
} else {
|
|
|
|
|
ctx.fillStyle = "white";
|
|
|
|
|
grid[row][col] = false;
|
|
|
|
|
}
|
|
|
|
|
ctx.fillRect(pixelSize * col,pixelSize * row,pixelSize,pixelSize);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let button = document.getElementById("but");
|
|
|
|
|
button.addEventListener("click", () => {
|
|
|
|
|
running = !running;
|
|
|
|
|
console.log(running);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function getNeighbors(row, col) {
|
|
|
|
|
let neighbors = [];
|
|
|
|
|
|
|
|
|
|
for (let i = -1; i < 2; ++i)
|
|
|
|
|
for (let j = -1; j < 2; ++j)
|
|
|
|
|
if (row + i >= 0 && row + i < gridSize && col + j >= 0 && col + j < gridSize && !(i == 0 && j == 0))
|
|
|
|
|
neighbors.push([row+i,col+j]);
|
|
|
|
|
|
|
|
|
|
return neighbors;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function conway() {
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
if(running) {
|
|
|
|
|
let new_grid = [];
|
|
|
|
|
for(let row = 0; row < gridSize; row++) {
|
|
|
|
|
new_grid[row] = [];
|
|
|
|
|
for(let col = 0; col < gridSize; col++) {
|
|
|
|
|
new_grid[row][col] = grid[row][col];
|
|
|
|
|
let alive = 0;
|
|
|
|
|
neighbors = getNeighbors(row, col);
|
|
|
|
|
|
|
|
|
|
for(let n of neighbors) {
|
|
|
|
|
if(grid[n[0]][n[1]]) alive++;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(grid[row][col]) {
|
|
|
|
|
if(alive < 2 || alive > 3) new_grid[row][col] = false;
|
|
|
|
|
} else {
|
|
|
|
|
if(alive == 3) new_grid[row][col] = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
grid = new_grid;
|
|
|
|
|
|
|
|
|
|
for(let row = 0; row < gridSize; row++) {
|
|
|
|
|
for(let col = 0; col < gridSize; col++) {
|
|
|
|
|
if(grid[row][col]) ctx.fillStyle = "black";
|
|
|
|
|
else ctx.fillStyle = "white";
|
|
|
|
|
ctx.fillRect(pixelSize * col,pixelSize * row,pixelSize,pixelSize);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, 100);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
conway();
|
|
|
|
|
|
|
|
|
|
let c = document.getElementById("clear");
|
|
|
|
|
c.addEventListener("click", () => {
|
|
|
|
|
if(!running) {
|
|
|
|
|
ctx.fillStyle = "white";
|
|
|
|
|
for(let row = 0; row < gridSize; row++) {
|
|
|
|
|
for(let col = 0; col < gridSize; col++) {
|
|
|
|
|
grid[row][col] = false;
|
|
|
|
|
ctx.fillRect(pixelSize * col,pixelSize * row,pixelSize,pixelSize);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
2023-10-16 15:12:17 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
