1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
// declare button event
document.getElementById('input').onkeyup = () => {
// declare variables
let a, b, c, d;
const matrix = [[], [], [], []];
// replace input so it matches js boolean operators
const input = document.getElementById('input').value.replace(/#/g, '||').replace(/&/g, '&&');
// some logging..
document.getElementById('log').innerText = '';
document.getElementById('log').append('Wahrheitstabelle\n');
document.getElementById('log').append('----------------\n');
document.getElementById('log').append('d c b a | Z | ID\n');
document.getElementById('log').append('----------------\n');
try {
// fill kv diagram
for (let i = 0; i < 16; i++) {
const currentBinary = (i >>> 0).toString(2);
// fill binary number with leading zeros until it is 4 digits long
const filledBinary = currentBinary.length >= 4 ? currentBinary : new Array(4 - currentBinary.length + 1).join('0') + currentBinary;
a = filledBinary[3] === '1';
b = filledBinary[2] === '1';
c = filledBinary[1] === '1';
d = filledBinary[0] === '1';
document.getElementById('log').append(`${filledBinary.split('').join(' ')} | ${eval(input) ? '1' : '0'} | ${document.getElementById(i + 1).getAttribute('data-id')}\n`);
document.getElementById(i + 1).innerText = eval(input) ? '1' : '0';
}
// merge grid with matrix (2D array)
document.querySelectorAll('[data-id]').forEach(element => {
element.style.background = 'white';
let rowNumber = (element.getAttribute('data-id') / 4 - 0.1).toString();
rowNumber = rowNumber.substring(0, rowNumber.indexOf('.'));
matrix[rowNumber].push(parseInt(element.innerText, 2));
});
// algorithm for finding truthy matrix neighbours
// inspired by https://stackoverflow.com/a/652123
const matrixMarks = [];
matrix.forEach((columns, i) => {
columns.forEach((items, j) => {
const rowLimit = matrix.length - 1;
const columnLimit = matrix[0].length - 1;
for (let x = Math.max(0, i - 1); x <= Math.min(i + 1, rowLimit); x++) {
for (let y = Math.max(0, j - 1); y <= Math.min(j + 1, columnLimit); y++) {
if ((x !== i || y !== j) && matrix[x][y] !== 0 && matrix[i][j] !== 0) {
console.log(`Truthy neighbour of ${i}|${j} is ${x}|${y}`);
matrixMarks[`${x}|${y}`] = matrixMarks[`${x}|${y}`] ? matrixMarks[`${x}|${y}`] + 1 : 1;
}
}
}
})
});
// mark the truthy grid numbers according to the calculated percentage
for (let coordinates in matrixMarks) {
const x = parseInt(coordinates.substring(0, coordinates.indexOf("|")), 10);
const y = parseInt(coordinates.split('|').pop(), 10);
// to ensure that max opacity is used
const opacity = (matrixMarks[coordinates] / 10 + (1 - Math.max.apply(null, Object.values(matrixMarks)) / 10));
console.log('------');
console.log(`Coordinates: x: ${x} y: ${y}`);
console.log(`Opacity of element: ${opacity}`);
console.log(`Element id: ${x * 4 + y + 1}`);
console.log(`KV-based id: ${document.querySelector(`[data-id="${x * 4 + y + 1}"]`).getAttribute('id')}`);
document.querySelector(`[data-id="${x * 4 + y + 1}"]`).style.background = `rgba(0, 100, 0, ${opacity})`;
}
console.log(matrixMarks);
console.log(matrix);
} catch (err) {
console.error(err);
//alert('Oh, da ist wohl was schiefgelaufen, bitte probieren Sie es noch einmal :)');
}
};
|
