Animation Battle: C++ vs JavaScript

In this video we created an animation that can serve as a prototype for a game introduction. The most interesting thing is that we tried to show equivalent code between C++ and JavaScript.

The video has no speech, just background music, sound effects and step-by-step code in both programming languages.

▶️ Watch the video

💻 C++ code created in the video:

animation.hpp

#pragma once

#include <SFML/Graphics.hpp>
#include <cmath>
#include <memory>

class Animation {
  std::unique_ptr<sf::RenderWindow> window;
  public:
    Animation();
    static constexpr int numpoints = 200;
    struct Point {
      sf::CircleShape shape;
      float phase;
    };

    sf::VertexArray gradient;
    std::vector<Point> points;
    float time;
    sf::Clock clock;
    sf::Text h1, h2;
    sf::Font font;

    void background();
    void update_points();

    void events();
    void draw();
    void run();
};

animation.cpp

#include "animation.hpp"

Animation::Animation(){
  window = std::make_unique<sf::RenderWindow>(
    sf::VideoMode(1280,720),
    "Animation :: C++ vs JS",
    sf::Style::Titlebar | sf::Style::Close
  );

  background();
  time = 0.f;
  points.resize(numpoints);
  for (size_t i {}; i < numpoints; ++i){
    points[i].shape = sf::CircleShape(3);
    points[i].phase = i * 0.3;
  }

  font.loadFromFile("./font.ttf");
  h1.setFont(font);
  h2 = h1;
  h1.setString("Start Game");
  h1.setCharacterSize(30);
  h1.setPosition(window->getSize().x / 2.f - 150.f, window->getSize().y / 2.f);
  h2.setString("Play");
  h2.setCharacterSize(18);
  h2.setPosition(window->getSize().x / 2.f - 50.f, window->getSize().y / 2.f + 50.f);
}

void Animation::background(){
  gradient.setPrimitiveType(sf::TriangleFan);
  gradient.append(
    sf::Vertex(
      sf::Vector2f(
        window->getSize().x / 2.f,
        window->getSize().y / 2.f),
        sf::Color(63,94,251)
    )
  );

  for (int angle {}; angle <= 360; angle +=  5){
    float rad = angle * 3.14159f / 180.f;
    float x = window->getSize().x / 2.f + cos(rad) * window->getSize().x;
    float y = window->getSize().y / 2.f + sin(rad) * window->getSize().y;
    gradient.append(sf::Vertex(sf::Vector2f(x,y), sf::Color(252,70,107)));
  }
}

void Animation::events(){
  sf::Event event;
  while(window->pollEvent(event)){
    if(event.type == sf::Event::Closed){
      window->close();
    }
  }
}

void Animation::run(){
  while(window->isOpen()){
    events();
    time = clock.getElapsedTime().asSeconds() * 2.3f;
    draw();
  }
}

void Animation::draw(){
  window->clear();
  window->draw(gradient);
  update_points();
  for(const auto &var : points){
    window->draw(var.shape);
    
  }
  window->draw(h1);
  window->draw(h2);
  window->display();
}

void Animation::update_points(){
  for (int i {}; i < numpoints; ++i){
    float x = std::sin(time + i * 0.3f) * 200 + window->getSize().x / 2.f;
    float y = std::cos(time + i * 0.5f) * 200 + window->getSize().y / 2.f;
    points[i].shape.setPosition(x, y);
    float alpha = std::sin(i * 0.1f) * 0.5f + 0.5f;
    points[i].shape.setFillColor(sf::Color(255, 255, 255, static_cast<sf::Uint8>(alpha * 255)));
  }
}

main.cpp

#include "animation.hpp"

int main(){
  auto anime = std::make_unique<Animation>();
  anime->run();
  return EXIT_SUCCESS;
}

Click here to download the source used

Compile and run:

g++ main.cpp animation.cpp -lsfml-graphics -lsfml-window -lsfml-system
./a.out

💻 JavaScript code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation :: C++ vs JS</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="background"></div>
  <div class="content">
    <h1>Start Game</h1>
    <h2>Play</h2>
  </div>
  <script src="./main.js"></script>
</body>
</html>

style.css

@font-face {
  font-family: 'Font';
  src: url('./font.ttf');
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Font';
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
  z-index: -1;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

main.js

class Animation{
  constructor(){
    this.canvas = document.createElement('canvas')
    document.body.appendChild(this.canvas)
    this.ctx = this.canvas.getContext('2d')

    this.resizeCanvas()
    window.addEventListener('resize', () => this.resizeCanvas())
  }

  resizeCanvas = () => {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
  }

  animate = () => {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

    const time = Date.now() * 0.002;
    for (let i = 0; i < 200; i++) {
      const x = Math.sin(time + i * 0.3) * 200 + this.canvas.width / 2
      const y = Math.cos(time + i * 0.5) * 200 + this.canvas.height / 2
      this.ctx.fillStyle = `rgba(255, 255, 255, ${Math.sin(i * 0.1) * 0.5 + 0.5})`
      this.ctx.beginPath()
      this.ctx.arc(x, y, 3, 0, Math.PI * 2)
      this.ctx.fill()
    }
    requestAnimationFrame(this.animate)
  }
}

const anime = new Animation()
anime.animate()