Advent of Code 2022: Day 17

Tetris rox

by Amy L

HTML

<link rel="stylesheet" href="https://adventofcode.com/static/style.css?30">
<h1><a href="https://adventofcode.com/2022/day/17" target="_blank">Day 17</a></h1>
<diV class="puzzle-input">
  <label for="INPUT_DATA">Input</label>
  <textarea id="INPUT_DATA" autocomplete="off" placeholder="paste your input here" rows="7" cols="50">>>><<><>><<<>><>>><<<>>><<<><<<>><>><<>></textarea>
</diV>
<dl>
<dt>Part 1</dt>
  <dd>
    <label>Answer:
      <input type="text" id="answer1" readonly />
    </label>
  </dd>
  
  <dt>Part 2</dt>
  <dd>
    <label>Answer:
    <input type="text" id="answer2" readonly />
    </label>
  </dd>
</dl>

<div class="container">
  <canvas id="rocks1"></canvas>
  <canvas id="map1"></canvas>
</div>

CSS

canvas#rocks1 {
    z-index: 1;
}
canvas#map1 {
    z-index: 0;
}
canvas {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
.container {
    position: relative;
    height: 2000px;
    max-height: 2000px;
    overflow: hidden;
}

JavaScript 1.7

const ANIMATE_ROCKS = true;
const ANIMATION_INTERVAL = 1;
const PIXEL_SIZE = 20;
/**     Rocks Coordinate System
 *      y
 *     ||
 *     ||
 *     ||
 *     || 
 *   0 ||===================> x
 */
function Day17(inputData) {
  async function solvePart1(maxRocks) {
    const log = [];
    const chamber = new Chamber(new RockGenerator());
    const jets = new JetProducer(parseInputData(inputData));
    console.log(new Date().toLocaleString(),'INITIAL STATE', chamber.state, 'maxRocks', maxRocks)
    let {canvas, ctx, height} = (ANIMATE_ROCKS) ? drawBackground('map1', chamber) : {};
    const rockCanvas = document.getElementById('rocks1');
    const rocksCtx = rockCanvas.getContext("2d", { alpha: true });
      
    if (ANIMATE_ROCKS) {
      rockCanvas.height = canvas.height;
      rockCanvas.width = canvas.width;
    }
    await start(jets, chamber, maxRocks, log, {canvas, rockCanvas, rocksCtx});
    console.log(new Date().toLocaleString(),chamber.highestY)
    return chamber.highestY;
  }

  async function solvePart2(maxRocks) {
    const jetsPattern = parseInputData(inputData);
    const rockLog = [];
    const chamber = new Chamber(new RockGenerator());
    const jets = new JetProducer(jetsPattern);
    const smallestNumberOfRocksNeededToFindAPattern = Math.min(jetsPattern.length, maxRocks);
    console.log(new Date().toLocaleString(),'INITIAL STATE', chamber, '. Gonna drop',  maxRocks, 'rocks');
    await start(jets, chamber, smallestNumberOfRocksNeededToFindAPattern, rockLog, {});

    const result = findTheRepeatingPattern(rockLog);
    console.log('Found a pattern in the logs', result);
    const {numRocks, height} = calculateNumberOfRocksToPerfectlyFinish(rockLog, result);
    const cycles =  (maxRocks - numRocks) / result.rockPatternLength;
    console.log('With', numRocks,'number of rocks having fallen, there are',cycles, 'cycles left to reach', maxRocks,'rocks');
    console.log('Height at the beginning of the pattern is',height,' and every cycle...