Session 8

Exercise

Take the animation code as it stands currently (i.e. the three-object animation) and add some elements to the HTML code that will represent the positions and vector values for each moving object. These should update continuously as the animation runs.


Result


//---------------------------------------------------
const ViewportWidth = 550;
const ViewportHeight = 550;
let Objs = [];
let Pos = [];
let XPos = [0, 0, 0];
let XVec = [3, 5, 7];
let YPos = [0, 0, 0];
let YVec = [8, 6, 4];
function onLoad() {
  Objs[0] = document.getElementById('Obj_0');
  Objs[1] = document.getElementById('Obj_1');
  Objs[2] = document.getElementById('Obj_2');
  setInterval(Update, 100);
}
function Update() {
  let Idx = 0;
  while (Idx < 3) {
    if (XPos[Idx] < 0 || XPos[Idx] > ViewportWidth) {
      XVec[Idx] *= -1;
    }
    if (YPos[Idx] < 0 || YPos[Idx] > ViewportHeight) {
      YVec[Idx] *= -1;
    }
    XPos[Idx] += XVec[Idx];
    YPos[Idx] += YVec[Idx];
    Objs[Idx].style.left = XPos[Idx] + 'px';
    Objs[Idx].style.top = YPos[Idx] + 'px';
    // I added a function in here in an attempt to separate the concerns slightly, and make it more readable?
    ObjData();
    Pos[0] = XPos[0];
    Idx++;
  }
  while (Idx < 3) {
    Idx++;
  }
}
/*
I can see that i'm repeating myself here, and I know there must be a way to "clean up" this code so I don't repeat myself, but i'm struggling when it comes to writing it.
*/
function ObjData() {
  document.getElementById('Obj_0_data').textContent =
    'X Position: ' +
    XPos[0] +
    'px' +
    ' Y Position: ' +
    YPos[0] +
    'px' +
    ' X Vector: ' +
    XVec[0] +
    ' Y Vector: ' +
    YVec[0];
  document.getElementById('Obj_1_data').textContent =
    'X Position: ' +
    XPos[1] +
    'px' +
    ' Y Position: ' +
    YPos[1] +
    'px' +
    ' X Vector: ' +
    XVec[1] +
    ' Y Vector: ' +
    YVec[1];
  document.getElementById('Obj_2_data').textContent =
    'X Position: ' +
    XPos[2] +
    'px' +
    ' Y Position: ' +
    YPos[2] +
    'px' +
    ' X Vector: ' +
    XVec[2] +
    ' Y Vector: ' +
    YVec[2];
}

View the HMTL

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Session Code</title>
    <style>
      body {
        font-family: sans-serif;
        background: linen;
      }
      .animation {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        position: absolute;
      }
      .animation-canvas {
        position: relative;
      }
      .Objs_info {
        margin: 10px 0px 0px 0px;
        width: 200px;
        font-weight: 600;
      }
      #Obj_0 {
        background-color: #ff0000;
      }
      #Obj_1 {
        background-color: #00ff00;
      }
      #Obj_2 {
        background-color: #0000ff;
      }
    </style>
  </head>
  <body onload="onLoad ()">
    <div class="Objs_info">Object 0</div>
    <div id="Obj_0_data"></div>
    <div class="Objs_info">Object 1</div>
    <div id="Obj_1_data"></div>
    <div class="Objs_info">Object 2</div>
    <div id="Obj_2_data"></div>
    <div class="animation-canvas">
      <div class="animation" id="Obj_0"></div>
      <div class="animation" id="Obj_1"></div>
      <div class="animation" id="Obj_2"></div>
    </div>
    <script src="animation.js"></script>
  </body>
</html>

Notes

I found solving this exercise easy If I "hard-coded" a solution. I tried to expand upon my solution by making something that exploited the invariances, as Richard has been showing me him doing it throughout our sessions. This is the part where I struggled and want to improve. I've added the code below which shows some illustration as to how I maybe thought I should go about this, this doesn't work and is only half a solution, it's just a piece of scrap paper that I was thinking through.

Unfinished "scrap paper" function

My thought was that I should be looking to loop through the data and push the values into a new array, and then somehow loop through the .textContent data so that I didn't have to write each one manually. Let's say, if i I wanted to add a new circle to the canvas or something.

//---------------------------------------------------
function ObjData() {
  // The thinkimg here:
  // What if i create arrays for the data, and then I can loop through them instead of hard coding each one?
  let idx = 0;
  let xPosData = [];
  let yPosData = [];
  let xVecData = [];
  let yVecData = [];
  let ObjData = [];
  while (idx < 3) {
    xPosData = XPos[idx];
    yPosData = YPos[idx];
    xVecData = XVec[idx];
    yVecData = YVec[idx];
    ObjData = xPosData[idx];
    idx++;
  }
  document.getElementById('Obj_0_data').textContent =
    'X Position: ' +
    XPos[0] +
    'px' +
    ' Y Position: ' +
    YPos[0] +
    'px' +
    ' X Vector: ' +
    XVec[0] +
    ' Y Vector: ' +
    YVec[0];
  document.getElementById('Obj_1_data').textContent =
    'X Position: ' +
    XPos[1] +
    'px' +
    ' Y Position: ' +
    YPos[1] +
    'px' +
    ' X Vector: ' +
    XVec[1] +
    ' Y Vector: ' +
    YVec[1];
  document.getElementById('Obj_2_data').textContent =
    'X Position: ' +
    XPos[2] +
    'px' +
    ' Y Position: ' +
    YPos[2] +
    'px' +
    ' X Vector: ' +
    XVec[2] +
    ' Y Vector: ' +
    YVec[2];
}