Double-slit experiment simulation

double-slit-experiment-simulation.markdown

Double-slit experiment simulation

A Pen by Kyoya Baba on CodePen.

License.

index.html

<ul id="jsi-canvas" class="g_canvas">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

script.babel

const $canvas = document.getElementById('jsi-canvas');

setInterval(() => {
  const $targets = $canvas.querySelectorAll('li');
  
  const positiveRand = Math.random() * 1;
  const negativeRand = Math.random() * -1;
  
  const indexRand = (positiveRand + negativeRand) * 3;
  
  const targetIndex = parseInt(indexRand, 10) + 2;

  $targets[targetIndex].insertAdjacentHTML(
    'beforeend',
    `
      <div class="g_photon"
           style="
             top: ${Math.random() * 100}%;
             left: ${Math.random() * 100}%;
           ">
      </div>
    `
  );
}, 1);

style.scss

.g_canvas {
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  width: 100vw;
  height: 100vh;
  background-color: #333333;
  
  > li {
    position: relative;
    height: 100%;
    
    &:nth-child(1),
    &:nth-child(5) {
      width: calc(10vw / 3);
    }
    
    &:nth-child(2),
    &:nth-child(4) {
      width: calc(10vw / 3 * 2);
    }
    
    &:nth-child(3) {
      width: 10vw;
    }
  }
}

.g_photon {
  position: absolute;
  width: 1px;
  height: 1px;
  background-color: #FFFFFF;
}