3 body problem - countdown animation

3-body-problem-countdown-animation.markdown

3 body problem - countdown animation

I absolutely fell in love with the screen version of a novel by Cixin Liu - 3 Body Problem. Particularly eye-catching was Sophon's countdown. I had to create my version of it. With SVG and a noise function for each path point, I got a simplified version of the clock. But the main question is - what will happen when it hits zero?

A Pen by Dmytro Levchenko on CodePen.

License.

index.html

<templates>

  <svg id="number-0" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M79 14 C62 24 28 49 27 58 C25 70 24 103 18 126 C13 149 24 196 38 212 C52 228 71 222 79 226 C87 231 112 231 118 226 C124 222 145 204 149 204 C154 204 157 162 153 144 C149 126 169 103 159 73 C149 43 132 21 112 20" stroke="#FD7427" stroke-width="1.06167" />
  </svg>

  <svg id="number-1" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg">
    <path d="M41 71 C47 61 61 42 69 42 C79 42 108 2 109 12 C109 21 109 70 109 82 C109 94 106 156 105 168 C104 178 107 214 109 231" stroke="#FD7427" stroke-width="1" />
  </svg>

  <svg id="number-2" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg">
    <path d="M36 76 C35 66 38 45 51 35 C67 22 92 9 104 14 C116 19 152 57 153 76 C153 95 91 135 86 148 C80 161 38 208 32 217 C26 225 75 217 86 217 C94 217 134 220 153 222" stroke="#FD7427" stroke-width="1" />
  </svg>

  <svg id="number-3" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg">
    <path d="M38 69 C44 51 63 14 93 14 C122 13 149 50 159 69 L116 113 L68 122 C91 123 140 127 150 143 C162 163 167 166 165 186 C164 205 111 234 102 234 C93 234 39 226 20 196" stroke="#FD7427" stroke-width="1" />
  </svg>

  <svg id="number-4" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg">
    <path d="M129 230 V19 C95 61 25 150 22 168 C19 191 86 176 98 176 C107 176 148 176 167 176" stroke="#FD7427" stroke-width="1" />
  </svg>

  <svg id="number-5" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg">
    <path d="M151 21 H48 C44 49 37 115 38 121 C39 128 85 102 105 102 C125 102 158 142 158 161 C157 179 135 221 99 222 C62 224 29 194 25 177" stroke="#FD7427" stroke-width="1" />
  </svg>

  <svg id="number-6" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg">
    <path d="M159 70 C144 51 111 14 94 14 C73 14 29 64 27 80 C25 97 18 188 33 203 C48 218 87 233 94 233 C101 233 152 207 154 186 C155 165 151 121 139 113 C128 104 92 93 81 93 C72 93 35 129 18 147" stroke="#FD7427" stroke-width="1" />
  </svg>

  <svg id="number-7" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg">
    <path d="M16 19 C37 22 81 28 87 28 C95 28 147 9 147 19 C147 28 99 110 93 138 C88 161 52 209 34 231" stroke="#FD7427" stroke-width="1" />
  </svg>

  <svg id="number-8" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg">
    <path d="M87 17 C68 30 25 56 26 73 C27 90 75 116 92 119 C110 123 158 151 158 169 C158 187 126 231 96 230 C67 229 18 200 17 179 C16 158 39 133 47 132 C56 131 150 107 151 67 C151 35 115 20 96 17" stroke="#FD7427" stroke-width="1" />
  </svg>

  <svg id="number-9" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg">
    <path d="M137 113 C129 123 105 152 86 152 C68 152 24 113 22 104 C21 95 31 41 40 37 C48 33 85 14 97 16 C109 18 158 73 156 113 C155 144 137 188 129 207 C119 215 97 232 86 232 C75 232 29 198 8 180" stroke="#FD7427" stroke-width="1" />
  </svg>

  <svg id="number-divider" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg">
    <path d="M91 89 L94 93 L111 89 L85 68 L71 83 L101 97 L91 83 L76 64 L92 68 L85 99 L107 97 L103 64 L69 93 L98 121 L85 136 L103 183 L76 180 L107 169 L103 148 L69 162 L85 169 L91 188 C94 178 101 159 107 157 C114 153 81 142 76 145 C72 147 84 159 91 165" stroke="#FD7427" stroke-width="1" />
  </svg>

</templates>

<div class="bg"></div>
<div class="shadow"></div>

<div class="countdown flex">
  <div class="dd flex">
    <div class="digit"></div>
    <div class="digit"></div>
  </div>
  <div class="divider"></div>
  <div class="mm flex">
    <div class="digit"></div>
    <div class="digit"></div>
  </div>
  <div class="divider"></div>
  <div class="hh flex">
    <div class="digit"></div>
    <div class="digit"></div>
  </div>
  <div class="divider"></div>
  <div class="ss flex">
    <div class="digit"></div>
    <div class="digit"></div>
  </div>
</div>

<div class="credits">
  Made by&nbsp;
  <a href="https://levchenkod.com?utm_source=codepen&utm_medium=code&utm_campaign=experiments&utm_id=3bp_countdown" target="_blank" style={{cursur: 'pointer'}}>
    @levchenkod
  </a>
</div>

script.babel

class NoizyNumber {
  constructor(
    templateElement,
    { duplicatesCount = 20, fps = 24, noizeRadius = 30 } = {}
  ) {
    this.templateElement = templateElement;
    this.element = this.templateElement.cloneNode(true);
    this.pathElement = this.element.querySelector("path");
    this.originalPath = this.pathElement.getAttribute("d");
    this.originalPathList = this.originalPath.split(" ");

    this.element.id = this.element + Math.random();

    this.pathElementsStore = [this.pathElement];
    this.timeoutStore = null;

    this.duplicatesCount = duplicatesCount;
    this.fps = fps;
    this.delay = 1000 / this.fps;
    this.noizeRadius = noizeRadius;

    this.init();

    return this;
  }

  createDuplicatePaths() {
    Array(this.duplicatesCount)
      .fill()
      .forEach(() => {
        const cloneElement = this.pathElement.cloneNode();
        cloneElement.setAttribute("data-is-clone", true);

        this.element.appendChild(cloneElement);
        this.pathElementsStore.push(cloneElement);
      });
  }

  noizePath(pathElement) {
    const result = this.originalPathList
      .map((position) => {
        const command = position.match(/[a-z]/i)?.[0] || "";
        const radius = Math.random() * this.noizeRadius;
        const noize = Math.round(Math.random() * (radius * 2) - radius);
        const value = parseInt(position.slice(command ? 1 : 0));

        return `${command}${value + noize}`;
      })
      .join(" ");

    const scale = 0.7 + Math.random() * 0.5;
    const opacity = 0.5 + Math.random() * 0.5;
    const blur = Math.floor(Math.random() * 2);
    const color = [
      "209, 69, 14",
      "253, 116, 39",
      "255, 149, 60",
      "255, 141, 0"
    ][Math.round(Math.random() * 4)];
    pathElement.style.transform = `scale(${scale})`;
    pathElement.style.transformOrigin = `center`;
    pathElement.style.filter = `blur(${blur}px)`;
    pathElement.style.stroke = `rgba(${color}, ${opacity})`;
    pathElement.setAttribute("d", result);
  }

  handleTick() {
    this.pathElementsStore.forEach(this.noizePath.bind(this));

    const scale = 1 + Math.random() * 0.2;
    this.element.style.transform = `scale(${scale})`;
    this.element.style.transformOrigin = `center`;
  }

  animate() {
    clearTimeout(this.timeoutStore);

    this.handleTick();

    this.timeoutStore = setTimeout(this.animate.bind(this), this.delay);
  }

  init() {
    this.createDuplicatePaths();
    this.animate();
  }
}

class Countdown {
  constructor({ initialSeconds = 10, onTick, onDone } = {}) {
    this.date = new Date();
    this.lastTick = Date.now();
    this.time = {
      dd: 0,
      hh: 0,
      mm: 0,
      ss: initialSeconds
    };

    this.onTick = onTick;
    this.onDone = onDone;
  }

  tick() {
    const now = Date.now();

    if (now - this.lastTick < 1000) {
      return setTimeout(this.tick.bind(this), 50);
    } else {
      this.lastTick = now;
    }

    --this.time.ss;

    if (this.time.ss < 0) {
      --this.time.mm;
      this.time.ss = 0;
    }

    if (this.time.mm < 0) {
      --this.time.hh;
      this.time.mm = 0;
    }

    if (this.time.hh < 0) {
      --this.time.dd;
      this.time.hh = 0;
    }

    const isDone =
      this.time.dd === 0 &&
      this.time.hh === 0 &&
      this.time.mm === 0 &&
      this.time.ss === 0;

    if (isDone) {
      this.onDone?.(this.time);
    } else {
      this.onTick?.(this.time);

      requestAnimationFrame(() => {
        this.tick();
      });
    }
  }

  start() {
    this.tick();
  }
}

const normalizeDigits = (digits) => {
  digits.toString();
};

const countdownElement = document.querySelector(".countdown");
const countdownDDElement = countdownElement.querySelector(".dd");
const countdownHHElement = countdownElement.querySelector(".hh");
const countdownMMElement = countdownElement.querySelector(".mm");
const countdownSSElement = countdownElement.querySelector(".ss");
let previousTime;

const timeToArray = (timeNumber = 0) =>
  [...timeNumber.toString().split("").reverse(), "0"].splice(0, 2).reverse();

const dayDigitElements = document.querySelectorAll(".countdown .dd .digit");
const hourDigitElements = document.querySelectorAll(".countdown .hh .digit");
const minuteDigitElements = document.querySelectorAll(".countdown .mm .digit");
const secondDigitElements = document.querySelectorAll(".countdown .ss .digit");
const dividerElements = document.querySelectorAll(".countdown .divider");
const dividerTemplateElement = document.querySelector(`#number-divider`);

const timeTypesList = ["dd", "hh", "mm", "ss"];
const digitElementsMap = {
  dd: dayDigitElements,
  hh: hourDigitElements,
  mm: minuteDigitElements,
  ss: secondDigitElements
};

const setChildren = (parentElement, childrenElement) => {
  try {
    parentElement.innerHTML = "";
    parentElement.appendChild(childrenElement);
  } catch (e) {
    console.error(e);
  }

  return parentElement;
};

const setNoizyNumber = (parentElement, templateElement) => {
  const noizyNumber = new NoizyNumber(templateElement);

  setChildren(parentElement, noizyNumber.element);
};

const renderCountdown = (time, isInit) => {
  timeTypesList.forEach((timeType) => {
    if (isInit || previousTime?.[timeType] !== time[timeType]) {
      const previousTimeArray = previousTime?.[timeType]
        ? timeToArray(previousTime?.[timeType])
        : [];
      const timeArray = timeToArray(time[timeType]);

      if (!previousTime) {
        previousTime = {};
      }
      previousTime[timeType] = time[timeType];

      timeArray.forEach((timeValue, index) => {
        if (isInit || previousTimeArray[index] != parseInt(timeValue)) {
          const templateElement = document.querySelector(
            `#number-${timeValue}`
          );

          digitElementsMap[timeType][index].classList.add("animate-transition");
          setTimeout(() => {
            digitElementsMap[timeType][index].classList.remove(
              "animate-transition"
            );
          }, 250);

          setNoizyNumber(digitElementsMap[timeType][index], templateElement);
        }
      });
    }
  });

  if (isInit) {
    dividerElements.forEach((dividerElement) => {
      setNoizyNumber(dividerElement, dividerTemplateElement);
    });

    previousTime = time;
  }
};

const countdown = new Countdown({
  onDone: (time) => console.log(time),
  onTick: (time) => {
    renderCountdown(time);
  }
});

renderCountdown({ dd: 0, hh: 0, mm: 0, ss: 10 }, true);
countdown.start();

window.addEventListener("mousemove", (e) => {
  const deltaX = (1 / window.innerWidth) * e.pageX;
  const deltaY = (1 / window.innerHeight) * e.pageY;
  const range = 25;
  const x = range * deltaX - range;
  const y = range * deltaY - range;

  document.documentElement.style.setProperty("--bg-x", x + "%");
  document.documentElement.style.setProperty("--bg-y", y + "%");
});

style.scss

:root {
  --transition-animation-duration: 0.25s;
  --bg-x: -25%;
  --bg-y: -25%;
}

html,
body {
  height: 100%;
  background: #030507;
  display: flex;
  flex-direction: row;
  place-items: center;
  place-content: center;
}

templates {
  display: none;
}

.flex {
  display: flex;
  flex-direction: row;
  place-items: center;
  place-content: center;
}

.countdown {
  width: 500px;
  max-width: 90vw;
}

.digit,
.divider {
  display: flex;
  margin: 0 -10px;
  svg {
    width: 100%;

    path:last-of-type {
      transform: scaleY(2.5) scaleX(0.4) !important;
      filter: blur(20px) !important;
    }
  }
}

.digit {
  transition: var(--transition-animation-duration) cubic-bezier(0, 0, 0, 0.97);

  &.animate-transition {
    transform: scale(1.1);
    mix-blend-mode: plus-lighter;
    filter: brightness(1.5) drop-shadow(2px 2px 14px rgb(209, 69, 14));
    path {
      stroke: rgba(255, 106, 40, 0.95) !important;
    }
  }
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("https://images.unsplash.com/photo-1475738198235-4b30fc20cff4?q=80&w=2876&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  // transition: 0.15s ease-out;
  transform: translateX(var(--bg-x)) translateY(var(--bg-y)) scale(1.5);
  animation: blink 1s ease-out infinite alternate;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(ellipse, transparent 50%, #000);
}

@keyframes blink {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.1;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.1;
  }
}

.credits {
  position: absolute;
  font-family: sans-serif;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: #df6c1e;
  text-shadow: 0 0px 8px #ca3c05;
  font-size: 0.9rem;

  &:not(:hover) {
    opacity: 0.4;
  }

  a {
    color: #df6c1e;
  }
}