linting and formating. renamed canvas component
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
// handles negative index and index bigger than its array length
|
||||
function guard(index, array) {
|
||||
if (index > (array.length - 1)) return 0;
|
||||
if (index < 0) return (array.length - 1);
|
||||
if (index > array.length - 1) return 0;
|
||||
if (index < 0) return array.length - 1;
|
||||
return index;
|
||||
}
|
||||
|
||||
@ -12,11 +12,8 @@ function evolve1d(state, rules) {
|
||||
return state[safeIndex];
|
||||
}
|
||||
const newState = state.map((_, x) => {
|
||||
const cells = [
|
||||
getCell(x - 1),
|
||||
getCell(x),
|
||||
getCell(x + 1)];
|
||||
return rules[cells.join('')];
|
||||
const cells = [getCell(x - 1), getCell(x), getCell(x + 1)];
|
||||
return rules[cells.join("")];
|
||||
});
|
||||
|
||||
return newState.map(Number);
|
||||
@ -47,10 +44,14 @@ function getCellNeighbors(board, cellCoordinates) {
|
||||
|
||||
// the current cell is not included in the result
|
||||
return [
|
||||
getCell(x - 1, y - 1), getCell(x, y - 1),
|
||||
getCell(x + 1, y - 1), getCell(x - 1, y),
|
||||
getCell(x + 1, y), getCell(x - 1, y + 1),
|
||||
getCell(x, y + 1), getCell(x + 1, y - 1),
|
||||
getCell(x - 1, y - 1),
|
||||
getCell(x, y - 1),
|
||||
getCell(x + 1, y - 1),
|
||||
getCell(x - 1, y),
|
||||
getCell(x + 1, y),
|
||||
getCell(x - 1, y + 1),
|
||||
getCell(x, y + 1),
|
||||
getCell(x + 1, y - 1),
|
||||
];
|
||||
}
|
||||
|
||||
@ -75,58 +76,60 @@ function conwayRules(cell, neighbors) {
|
||||
// get the next evolution of a 2D CA initial state
|
||||
// Rules : Moore neighborhood
|
||||
function evolve2d(board, rulesFn) {
|
||||
return board.map((row, x) => row.map((cell, y) => {
|
||||
const neighbors = getCellNeighbors(board, [x, y]);
|
||||
const sum = getNeighborsSum(neighbors);
|
||||
return rulesFn(cell, sum);
|
||||
}));
|
||||
return board.map((row, x) =>
|
||||
row.map((cell, y) => {
|
||||
const neighbors = getCellNeighbors(board, [x, y]);
|
||||
const sum = getNeighborsSum(neighbors);
|
||||
return rulesFn(cell, sum);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function getDrawingValues(state, acc, cell) {
|
||||
const d = cell.dimension;
|
||||
return Object.keys(state).map(
|
||||
(key) => {
|
||||
const fillStyle = (() => {
|
||||
if (state[key] === '1') return cell.liveColor;
|
||||
return cell.deadColor;
|
||||
})();
|
||||
return Object.keys(state).map((key) => {
|
||||
const fillStyle = (() => {
|
||||
if (state[key] === "1") return cell.liveColor;
|
||||
return cell.deadColor;
|
||||
})();
|
||||
|
||||
return {
|
||||
move: [key * d, acc * d],
|
||||
fill: [key * d, acc * d, d, d],
|
||||
fillStyle,
|
||||
};
|
||||
},
|
||||
);
|
||||
return {
|
||||
move: [key * d, acc * d],
|
||||
fill: [key * d, acc * d, d, d],
|
||||
fillStyle,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// Populates the first state with a single living cell in the center
|
||||
function create1dStateOneCell(width) {
|
||||
return [...Array(width)].map(
|
||||
(cell, index) => {
|
||||
if (index === width / 2 || index === width + 1 / 2) return 1
|
||||
return 0
|
||||
})
|
||||
return [...Array(width)].map((cell, index) => {
|
||||
if (index === width / 2 || index === width + 1 / 2) return 1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
// Populates the first state of a 1D CA with cells returned
|
||||
// by initFn
|
||||
function create1dState(width, initFn, args) {
|
||||
return [...Array(width)].map(
|
||||
() => initFn(...args)
|
||||
);
|
||||
return [...Array(width)].map(() => initFn(...args));
|
||||
}
|
||||
|
||||
// Populates the first state of a 2D CA with cells returned
|
||||
// by initFn
|
||||
function create2dState(width, height, initFn, args) {
|
||||
return [...Array(height)].map(
|
||||
() => [...Array(width)].map(
|
||||
() => initFn(...args),
|
||||
),
|
||||
return [...Array(height)].map(() =>
|
||||
[...Array(width)].map(() => initFn(...args))
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
getDrawingValues, create1dState, create2dState, createBoard, create1dStateOneCell, conwayRules, evolve1d, evolve2d
|
||||
getDrawingValues,
|
||||
create1dState,
|
||||
create2dState,
|
||||
createBoard,
|
||||
create1dStateOneCell,
|
||||
conwayRules,
|
||||
evolve1d,
|
||||
evolve2d,
|
||||
};
|
||||
|
||||
@ -1,146 +0,0 @@
|
||||
import { getRandomInt, sleep } from './common.js';
|
||||
import {
|
||||
evolve2d, initialState1d, initialState2d, conwayRules, createBoard,
|
||||
} from './automata.js';
|
||||
|
||||
let drawing = 1;
|
||||
|
||||
const form = Array.from(document.forms.rules.elements);
|
||||
const canvas = document.querySelector('#canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const main = document.querySelector('#main');
|
||||
const dead = document.querySelector('#dead');
|
||||
const live = document.querySelector('#live');
|
||||
const cellSize = document.querySelector('#cellSize');
|
||||
const startBtn = document.querySelector('#start');
|
||||
const startBtn2d = document.querySelector('#start2d');
|
||||
const canvasRefreshBtn = document.querySelector('#canvasRefresh');
|
||||
const resetBtn = document.querySelectorAll('.reset');
|
||||
const stopBtn = document.querySelectorAll('.stop');
|
||||
// const loop = document.querySelector('#loop');
|
||||
const menuRow = document.querySelectorAll('.menu-row');
|
||||
const menuRowContent = document.querySelectorAll('.menu-row-content');
|
||||
|
||||
function drawCanvas(board, props) {
|
||||
board.map((row, y) => {
|
||||
const d = props.size;
|
||||
return row.map(
|
||||
(cell, x) => {
|
||||
ctx.fillStyle = (
|
||||
() => {
|
||||
if (cell === 1) return props.liveColor;
|
||||
return props.deadColor;
|
||||
})();
|
||||
ctx.fillRect(x * d, y * d, d, d);
|
||||
return cell;
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function getRules() {
|
||||
const rules = {};
|
||||
|
||||
form.reduce((_, i) => {
|
||||
if (i !== undefined
|
||||
&& i.type === 'checkbox') {
|
||||
if (i.checked) rules[i.name] = '1';
|
||||
else rules[i.name] = '0';
|
||||
}
|
||||
return rules;
|
||||
}, rules);
|
||||
|
||||
return rules;
|
||||
}
|
||||
|
||||
function getCellProperties() {
|
||||
return {
|
||||
size: cellSize.value,
|
||||
liveColor: live.value,
|
||||
deadColor: dead.value,
|
||||
};
|
||||
}
|
||||
|
||||
function reset() {
|
||||
drawing = 0;
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = main.offsetWidth * 0.9;
|
||||
canvas.height = main.offsetHeight * 0.9;
|
||||
}
|
||||
|
||||
async function draw1d() {
|
||||
const rules = getRules();
|
||||
const props = getCellProperties();
|
||||
const initialState = initialState1d(
|
||||
Math.floor(canvas.width / props.size),
|
||||
getRandomInt,
|
||||
[0, 2],
|
||||
);
|
||||
const board = createBoard(initialState, rules, Math.floor(canvas.height / props.size));
|
||||
|
||||
drawCanvas(board, props);
|
||||
}
|
||||
|
||||
async function draw2d() {
|
||||
const props = getCellProperties();
|
||||
const initialState = initialState2d(
|
||||
Math.floor(canvas.width / props.size),
|
||||
Math.floor(canvas.height / props.size),
|
||||
getRandomInt,
|
||||
[0, 2],
|
||||
);
|
||||
const board = evolve2d(initialState, conwayRules);
|
||||
|
||||
async function draw2dNext(b) {
|
||||
if (drawing === 0) return;
|
||||
const newBoard = evolve2d(b, conwayRules);
|
||||
drawCanvas(b, props);
|
||||
await sleep(300);
|
||||
draw2dNext(newBoard);
|
||||
}
|
||||
return draw2dNext(board);
|
||||
}
|
||||
|
||||
// Listeners
|
||||
|
||||
startBtn.addEventListener('click', async () => {
|
||||
reset();
|
||||
|
||||
await sleep(60);
|
||||
|
||||
drawing = 1;
|
||||
|
||||
draw1d();
|
||||
});
|
||||
|
||||
startBtn2d.addEventListener('click', async () => {
|
||||
reset();
|
||||
|
||||
await sleep(60);
|
||||
|
||||
drawing = 1;
|
||||
|
||||
draw2d();
|
||||
});
|
||||
|
||||
resetBtn.forEach((elem) => {
|
||||
elem.addEventListener('click', async () => {
|
||||
reset();
|
||||
});
|
||||
});
|
||||
|
||||
stopBtn.forEach((elem) => {
|
||||
elem.addEventListener('click', async () => {
|
||||
drawing = 0;
|
||||
});
|
||||
});
|
||||
|
||||
canvasRefreshBtn.addEventListener('click', () => {
|
||||
const width = document.querySelector('#canvasWidth').value;
|
||||
const height = document.querySelector('#canvasWidth').value;
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
});
|
||||
Reference in New Issue
Block a user