90

by Spencer Smith

HTML

<div class="view"></div>

CSS

* { box-sizing: border-box; }
body {
}
.view {
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
  display: inline-block;
}
.row {
  overflow: hidden;
}
.cell {
  float: left;
  height: 10px;
  width: 10px;
  border-top: 1px solid lightgray;
  border-left: 1px solid lightgray;
}
.c0 {
  background-color: white;
}
.c1 {
  background-color: #333;
}

JavaScript

// input
/* const input = [8, 2, 3, 5]; */
const input = [16, 3, 7, 8];
// const input = [32, 12, 21, 7];
/* const input = [64, 34, 45, 9]; */
/* const input = [128, 81, 100, 14]; */
/* const input = [1024, 32, 920, 42]; */
const [g, x, y, s] = input;

const size = g;
const graph = [];

// initialize graph
for (let r = 0; r < size; r++) {
	const row = [];
	for (let c = 0; c < size; c++) {
  	row.push('0');
  }
  graph.push(row);
}
graph[0][0] = '1';

const rules = ['1', '0', '1', '0', '0', '1', '1', '0'];

// make pattern (start with second row)
for (let r = 1; r < size; r++) {
	for (let c = 0; c < size; c++) {
  	const one = graph[r-1][c-1] || '0';
    const two = graph[r-1][c] || '0';
    const three = graph[r-1][c+1] || '0';
    const val = parseInt(one + two + three, 2);
    graph[r][c] = rules[val];
  }
}

// calculate answer
const binary = [];
for (let r = 0; r < s; r++) {
	binary.push(graph[y-1+r][x-1]);
}
const answer = binary.reverse().join('');
console.log('answer:', parseInt(answer, 2));


// print graph
const noPrint = false;
const view = document.querySelector('div.view');

for (let r = 0; r < size; r++) {
	if (noPrint) break;
  
	const row = document.createElement('div');
  row.classList.add('row');
  
	for (let c = 0; c < size; c++) {
  	const cell = document.createElement('div');
    cell.classList.add('cell');
    cell.classList.add('c' + graph[r][c]);
    row.appendChild(cell);
  }
  
  view.appendChild(row);
}