<commit_before><!doctype html>
<html>
  <head>
    <title>Circles bouncing off lines - Annotated code</title>

    <script src="circles-bouncing-off-lines.js"></script>

    <link type="text/css" rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <div class="header">
      <a href='/'>
        <h1>Annotated code</h1>
        <div class="strapline">short, heavily annotated JavaScript programs</div>
      </a>
    </div>

    <div class="grid" style="height: 430px;">
      <div class="grid-element project">
        <canvas id="circles-bouncing-off-lines" width="300" height="300"></canvas>

        <h2>Circles bouncing off lines</h2>
        <p class="project-links">
          <a href="docs/circles-bouncing-off-lines.html">annotated code</a>
          <a href="circles-bouncing-off-lines.js">raw code</a>
        </p><br/>

        <p>
          Uses some simple trigonometry to calculate the movement of
          circles bouncing off lines.
        </p><commit_msg>Explain reasoning behind circles program on project page<commit_after><!doctype html>
<html>
  <head>
    <title>Circles bouncing off lines - Annotated code</title>

    <script src="circles-bouncing-off-lines.js"></script>

    <link type="text/css" rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <div class="header">
      <a href='/'>
        <h1>Annotated code</h1>
        <div class="strapline">short, heavily annotated JavaScript programs</div>
      </a>
    </div>

    <div class="grid" style="height: 740px;">
      <div class="grid-element project">
        <canvas id="circles-bouncing-off-lines" width="300" height="300"></canvas>

        <h2>Circles bouncing off lines</h2>
        <p class="project-links">
          <a href="docs/circles-bouncing-off-lines.html">annotated code</a>
          <a href="circles-bouncing-off-lines.js">raw code</a>
        </p><br/>

        <p>
          Uses some simple trigonometry to calculate the movement of
          circles bouncing off lines.
        </p><br/>

        <p>
          When I first tried to write this program, I had no idea how to bounce a circle off a line.
          And I couldn't find any good explanations on the web.  Some resources were prose descriptions that did not
          derive the maths.  Some derived the maths, but didn't explain what was going on.  Some resouces showed only code.
          Some resources showed no code.
        </p><br/>

        <p>
          My approach for the code is to make it proceed in small, pedantic steps.
          My approach for the comments is to explain all the maths spatially, rather than algebraicly.  Hopefully, this means
          that the explanations are intuitive.
        </p>
{'fraction_non_alphanumeric': 0.12979351032448377, 'fraction_numerical': 0.009587020648967551, 'mean_word_length': 2.5325520833333335, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 75, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7643331', 'n_tokens_mistral': 864, 'n_tokens_neox': 804, 'n_words': 251}