scribbledecobble: Goodbye, Moon.

README

Code

<style>

  #space {
    background-color: black;
    width: 500px;
    height: 300px;
    position: relative;
  }

  #moon {
    background-color: white;
    width: 50px;
    height: 50px;
    z-index: 1;
  }

  #shadow {
    background-color: black;
    opacity: 1;
    width: 80px;
    height: 80px;
    z-index: 2;
  }

  .star {
    width: 1em;
    height: 1em;    
    color: white;
  }

  .orb {
    border-radius: 50%;
  }

  .content-centered {
    display: flex;
    justify-content: center;
    align-items: center; 
  }

  .orb > span {
  }

</style>

<div id="space">
</div>

<script>

  /** Exercises
   *
   *  0. Change the color of the shadow to midnightblue.
   *  1. Make the moon move.
   *  2. Repeat n times.
   *  3. Add labels to the orbs.
   *  4. Set the color of the labels.
   *  5. Center the labels in the orbs.
   *  6. Make the moon and earth labels different colors.
   *  7. Try changing the z-index values.
   *  8. Try changing the opacity value.
   *  9. Remove z-index values and fix the JavaScript.
   *  10. Change the sizes of the orbs.
   *  11. Change the starting positions of the orbs.
   *  12. Slow down and speed up time.
   *  13. Add a star to space.
   *  14. Add 100 stars!
   *  15. Add "mars" to the universe.
   */

  let space = undefined,
      shadow = undefined,
      moon = undefined,
      time = undefined;

  const orbType = "div",
        msPerTick = 50,
        pxPerTick = 2;

  const moonDef = {
    id: "moon",
    top: 100,
    left: 100,
    html: "<span></span>"
  };

  const shadowDef = {
    id: "shadow",
    top: 85,
    left: 200,
    html: "<span></span>"
  };

  const starDef = {
    html: "★" // SOLID STAR
  }

  function resetClock() {
    time = 0;
  }

  function tickClock() {
    time++; // i.e. time = time + 1;
  }

  function repeat(foo, numTimes) {
    for (let n = 0; n < numTimes; n++) {
      foo();
    }
  }

  function doAsync(foo, times, delay, thenBar) {

    delay = delay === undefined ? 0 : delay;
    times = times === undefined ? 1 : times;

    if (times > 0) {
      window.setTimeout(function() {
        foo();
        doAsync(foo, times - 1, delay, thenBar);
      }, delay);
    }
    else {
      thenBar();
    }

  }

  function setPosition(element, pos) {
    element.style.position = "absolute";
    if (pos.top !== undefined) {
      element.style.top = pos.top + "px";
    }
    if (pos.left !== undefined) {
      element.style.left = pos.left + "px";
    }
  }

  function defineOrb(def) {
    let orb = document.createElement(orbType);
    orb.classList.add("orb");
    setPosition(orb, def);
    if (def.id !== undefined) {
      orb.id = def.id;
    }
    if (def.html !== undefined) {
      orb.innerHTML = def.html;
    }
    return orb;
  }

  function addChildToParent(childElement, parentElement) {
    if (parentElement !== undefined) {
      parentElement.appendChild(childElement);
    }
    return childElement;
  }

  function getRandomPercent() {
    return Math.random().toFixed(2) * 100;
  }

  function getRandomY() {
    let max = 0;
    if (space !== undefined) {
      const bottom = space.getBoundingClientRect().bottom,
            top = space.getBoundingClientRect().top;
      max = bottom - top;
    }
    return Math.random().toFixed(3) * max;
  }

  function getRandomX() {
    let max = 0;
    if (space !== undefined) {
      const right = space.getBoundingClientRect().right,
            left = space.getBoundingClientRect().left;
      max = right - left;
    }
    return Math.random().toFixed(3) * max;
  }

  function addStar() {
    starDef.top = getRandomY();
    starDef.left = getRandomX();
    const star = defineOrb(starDef);
    star.classList.add("star");
    star.style.fontSize = getRandomPercent() + "%";
    addChildToParent(star, space);
  }

  function initializeTheUniverse() {
    space = document.getElementById("space");
    /* To do: add stars */
    shadow = addChildToParent(defineOrb(shadowDef), space);
    moon = addChildToParent(defineOrb(moonDef), space);
    resetClock();
  }

  function advanceOneTick() {

    function moveMoon() {
      const pixels = time * pxPerTick;
      moon.style.left = (moonDef.left + pixels) + "px";
    }

    tickClock();
    if (moon !== undefined) {
      moveMoon();
    }
  }

  function run(ticks, times) {

    function runAgain() {
      if (times > 1) {
        resetClock();
        run(ticks, times - 1);
      }
    }

    ticks = ticks === undefined ? 1 : ticks;
    times = times === undefined ? 1 : times;

    if (times < 1) {
      return;
    }

    doAsync(advanceOneTick, ticks, msPerTick, runAgain);
  }

  function go() {
    time = 0;
    run();
  }

  initializeTheUniverse();
  go();

</script>

<!-- Remember what Marthy told George: -->
<!-- THERE IS SUCH A THING AS PRIVACY! -->

<style>

  #space {
    background-color: black;
    width: 500px;
    height: 300px;
    position: relative;
  }

  #moon {
    background-color: white;
    width: 50px;
    height: 50px;
    z-index: 1;
  }

  #shadow {
    background-color: black;
    opacity: 0.9;
    width: 80px;
    height: 80px;
    z-index: 2;
  }

  .star {
    width: 1em;
    height: 1em;    
    color: white;
  }

  .orb {
    border-radius: 50%;
  }

  .content-centered {
    display: flex;
    justify-content: center;
    align-items: center; 
  }

  .orb > span {
  }

</style>

<div id="space">
</div>

<script>

  /** Exercises
   *
   *  0. Change the color of the shadow to midnightblue.
   *  1. Make the moon move.
   *  2. Repeat n times.
   *  3. Add labels to the orbs.
   *  4. Set the color of the labels.
   *  5. Center the labels in the orbs.
   *  6. Make the moon and earth labels different colors.
   *  7. Try changing the z-index values.
   *  8. Try changing the opacity value.
   *  9. Remove z-index values and fix the JavaScript.
   *  10. Change the sizes of the orbs.
   *  11. Change the starting positions of the orbs.
   *  12. Slow down and speed up time.
   *  13. Add a star to space.
   *  14. Add 100 stars!
   *  15. Add "mars" to the universe.
   */

  let space = undefined,
      shadow = undefined,
      moon = undefined,
      time = undefined;

  const orbType = "div",
        msPerTick = 1000,
        pxPerTick = 2;

  const moonDef = {
    id: "moon",
    top: 100,
    left: -50,
    html: "<span></span>"
  };

  const shadowDef = {
    id: "shadow",
    top: 85,
    left: 200,
    html: "<span></span>"
  };

  const starDef = {
    html: "★" // SOLID STAR
  }

  function resetClock() {
    time = 0;
  }

  function tickClock() {
    time++; // i.e. time = time + 1;
  }

  function repeat(foo, numTimes) {
    for (let n = 0; n < numTimes; n++) {
      foo();
    }
  }

  function doAsync(foo, times, delay, thenBar) {

    delay = delay === undefined ? 0 : delay;
    times = times === undefined ? 1 : times;

    if (times > 0) {
      window.setTimeout(function() {
        foo();
        doAsync(foo, times - 1, delay, thenBar);
      }, delay);
    }
    else {
      thenBar();
    }

  }

  function setPosition(element, pos) {
    element.style.position = "absolute";
    if (pos.top !== undefined) {
      element.style.top = pos.top + "px";
    }
    if (pos.left !== undefined) {
      element.style.left = pos.left + "px";
    }
  }

  function defineOrb(def) {
    let orb = document.createElement(orbType);
    orb.classList.add("orb");
    setPosition(orb, def);
    if (def.id !== undefined) {
      orb.id = def.id;
    }
    if (def.html !== undefined) {
      orb.innerHTML = def.html;
    }
    return orb;
  }

  function addChildToParent(childElement, parentElement) {
    if (parentElement !== undefined) {
      parentElement.appendChild(childElement);
    }
    return childElement;
  }

  function getRandomPercent() {
    return Math.random().toFixed(2) * 100;
  }

  function getRandomY() {
    let max = 0;
    if (space !== undefined) {
      const bottom = space.getBoundingClientRect().bottom,
            top = space.getBoundingClientRect().top;
      max = bottom - top;
    }
    return Math.random().toFixed(3) * max;
  }

  function getRandomX() {
    let max = 0;
    if (space !== undefined) {
      const right = space.getBoundingClientRect().right,
            left = space.getBoundingClientRect().left;
      max = right - left;
    }
    return Math.random().toFixed(3) * max;
  }

  function addStar() {
    starDef.top = getRandomY();
    starDef.left = getRandomX();
    const star = defineOrb(starDef);
    star.classList.add("star");
    star.style.fontSize = getRandomPercent() + "%";
    addChildToParent(star, space);
  }

  function initializeTheUniverse() {
    space = document.getElementById("space");
    repeat(addStar, 100);
    shadow = addChildToParent(defineOrb(shadowDef), space);
    moon = addChildToParent(defineOrb(moonDef), space);
    resetClock();
  }

  function advanceOneTick() {

    function moveMoon() {
      const pixels = time * pxPerTick;
      moon.style.left = (moonDef.left + pixels) + "px";
    }

    tickClock();
    if (moon !== undefined) {
      moveMoon();
    }
  }

  function run(ticks, times) {

    function runAgain() {
      if (times > 1) {
        resetClock();
        run(ticks, times - 1);
      }
    }

    ticks = ticks === undefined ? 1 : ticks;
    times = times === undefined ? 1 : times;

    if (times < 1) {
      return;
    }

    doAsync(advanceOneTick, ticks, msPerTick, runAgain);
  }

  function go() {
    time = 0;
    run(275, 12);
  }

  initializeTheUniverse();
  go();

</script>

scribbledecobble

Pages

Goodbye, Moon.

README

See also

Code