initial animation and title

InteractiveDataVis · May 17, 2020 · 3105439 · 3105439
1 parent c338f83
commit 3105439
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 11 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1,12 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Output Management</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="main.css" rel="stylesheet"></head><body><script src="bundle.js"></script></body></html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Output Management</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="main.css" rel="stylesheet" />
+  </head>
+  <body>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/src/Animation.js b/src/Animation.js
@@ -0,0 +1,44 @@
+import { select } from "d3";
+import { Triangle } from "./Triangle";
+import { animationConfig } from "../utils/constants";
+
+const { width, height, count, delay, drawRate } = animationConfig;
+const [x, y] = [width / 2, height / 2];
+
+export class Animation {
+  intervalId;
+  intervalCount = 0;
+
+  constructor() {
+    this.triangles = [];
+
+    this.canvas = select("body")
+      .append("canvas")
+      .attr("id", "animation")
+      .attr("width", width)
+      .attr("height", height);
+
+    this.ctx = this.canvas.node().getContext("2d");
+
+    [...Array(count)].forEach((d, i) =>
+      setTimeout(() => this.triangles.push(new Triangle(this.ctx)), i * delay)
+    );
+  }
+
+  draw() {
+    this.intervalCount++;
+    this.ctx.fillStyle = "rgba(210, 210, 210, 0.05)";
+    this.ctx.fillRect(0, 0, width, height); // clear canvas
+    this.triangles.map((t) => t.update([x, y]));
+  }
+
+  startAnimation() {
+    // note: doing `()=> this.function` maintains the proper scoping for the method
+    // so that it has access to the object as `this`
+    this.intervalId = setInterval(() => this.draw(), drawRate);
+  }
+
+  stopAnimation() {
+    clearInterval(this.intervalId);
+  }
+}
diff --git a/src/Title.js b/src/Title.js
@@ -1,7 +1,19 @@
 import { select } from "d3";
-const Title = () => {
-  console.log("testing");
-  select("#container").append("h1").text("Interactive Data Visualization");
-};
 
-export default Title;
+export class Title {
+  constructor() {
+    this.el = select("body")
+      .append("div")
+      .attr("id", "page-title")
+      .text("Interactive Data Visualization")
+      .classed("visible", false);
+  }
+
+  makeVisible() {
+    this.el.classed("visible", true);
+  }
+
+  makeHidden() {
+    this.el.classed("visible", false);
+  }
+}
diff --git a/src/Triangle.js b/src/Triangle.js
@@ -0,0 +1,72 @@
+import { getRandom, animationConfig } from "../utils/constants";
+
+const { width, height, count, delay, drawRate } = animationConfig;
+
+export class Triangle {
+  constructor(ctx) {
+    this.ctx = ctx;
+    this.resetPoints();
+    this.opacity = 1;
+    this.draw();
+    this.count = 0;
+  }
+
+  draw() {
+    const [cx, cy] = this.calcCentroid();
+    this.ctx.save();
+    this.ctx.translate(width / 2 - cx, height / 2 - cy);
+    this.ctx.beginPath();
+    this.ctx.strokeStyle = "steelblue";
+    this.ctx.globalAlpha = this.opacity;
+    this.ctx.moveTo(this.p1.x, this.p1.y);
+    this.ctx.lineTo(this.p2.x, this.p2.y);
+    this.ctx.lineTo(this.p3.x, this.p3.y);
+    this.ctx.closePath();
+    this.ctx.stroke();
+    this.ctx.restore();
+  }
+
+  update() {
+    this.opacity = Math.max(this.opacity - 0.003, 0);
+    this.p1 = this.updatePoint(this.p1);
+    this.p2 = this.updatePoint(this.p2);
+    this.p3 = this.updatePoint(this.p3);
+    this.count += 1;
+    this.checkBounds();
+    this.draw();
+  }
+
+  checkBounds() {
+    const inBounds = [this.p1, this.p2, this.p3].reduce(
+      (inBounds, { x, y }) => inBounds && x < width && y < height,
+      true
+    );
+    if (!inBounds && this.count > (delay / drawRate) * count)
+      this.resetPoints();
+  }
+
+  resetPoints() {
+    this.opacity = 1;
+    this.p1 = { x: 0, y: 0, ...this.getRandomUnitVector() };
+    this.p2 = { x: 0, y: 0, ...this.getRandomUnitVector() };
+    this.p3 = { x: 0, y: 0, ...this.getRandomUnitVector() };
+    this.count = 0;
+  }
+
+  getRandomUnitVector() {
+    const [mx, my] = [getRandom(), getRandom()]; //[deltaX, deltaY]
+    const mag = Math.sqrt(mx ** 2 + my ** 2);
+    return { mx: mx / mag, my: my / mag };
+  }
+
+  calcCentroid() {
+    const { p1, p2, p3 } = this;
+    return [(p1.x + p2.x + p3.x) / 3, (p1.y + p2.y + p3.y) / 3];
+  }
+
+  updatePoint({ x, y, mx, my }) {
+    // they appear to get slower as they get larger, so gradually increase
+    // the mx/my so that they accelerate out
+    return { x: x + mx, y: y + my, mx: mx * 1.005, my: my * 1.005 };
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,24 @@
-import { select } from "d3";
-import Title from "./Title";
+import { Animation } from "./Animation";
+import { Title } from "./Title";
+
 import "./style.scss";
 
-select("#container").text("Interactive Data Visualization");
-Title();
+import { appConfig } from "../utils/constants";
+const { titleDuration } = appConfig;
+
+class Controller {
+  state = {
+    selectedStudent: null,
+    isAnimating: true,
+  };
+
+  constructor() {
+    this.animation = new Animation();
+    this.title = new Title();
+    this.animation.startAnimation();
+
+    setTimeout(() => this.title.makeVisible(), titleDuration);
+  }
+}
+
+new Controller();
diff --git a/src/style.scss b/src/style.scss
@@ -1,3 +1,22 @@
 body {
-  background: palegoldenrod;
+  font-family: "Open Sans";
+}
+
+canvas#animation {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#page-title {
+  position: relative;
+  font-weight: 700;
+  font-size: 4em;
+  visibility: hidden;
+
+  &.visible {
+    visibility: visible;
+    color: transparent;
+    -webkit-text-stroke: black 1px;
+  }
 }
diff --git a/utils/constants.js b/utils/constants.js
@@ -0,0 +1,14 @@
+export const getRandom = (min = -1, max = 1) =>
+  Math.random() * (max - min) + min;
+
+export const appConfig = {
+  titleDuration: 2500,
+};
+
+export const animationConfig = {
+  width: window.innerWidth,
+  height: window.innerHeight,
+  count: 25,
+  delay: 1500,
+  drawRate: 35,
+};