Initial project commit

src/App.vue

@@ -0,0 +1,238 @@
+<template>
+  <canvas id="pixi"></canvas>
+</template>
+
+<script>
+import * as PIXI from 'pixi.js'
+import {Point, TextStyle} from "pixi.js";
+import easing from "@/easing";
+import {MotionBlurFilter} from "@pixi/filter-motion-blur";
+
+export default {
+  name: 'App',
+  components: {},
+  methods: {
+    getAngle: function (originX, originY, targetX, targetY) {
+      var dx = originX - targetX;
+      var dy = originY - targetY;
+
+      // var theta = Math.atan2(dy, dx);  // [0, Ⲡ] then [-Ⲡ, 0]; clockwise; 0° = west
+      // theta *= 180 / Math.PI;          // [0, 180] then [-180, 0]; clockwise; 0° = west
+      // if (theta < 0) theta += 360;     // [0, 360]; clockwise; 0° = west
+
+      // var theta = Math.atan2(-dy, dx); // [0, Ⲡ] then [-Ⲡ, 0]; anticlockwise; 0° = west
+      // theta *= 180 / Math.PI;          // [0, 180] then [-180, 0]; anticlockwise; 0° = west
+      // if (theta < 0) theta += 360;     // [0, 360]; anticlockwise; 0° = west
+
+      var theta = Math.atan2(dy, -dx); // [0, Ⲡ] then [-Ⲡ, 0]; anticlockwise; 0° = east
+      theta *= 180 / Math.PI;          // [0, 180] then [-180, 0]; anticlockwise; 0° = east
+      if (theta < 0) theta += 360;     // [0, 360]; anticlockwise; 0° = east
+      //
+      // var theta = Math.atan2(-dy, -dx); // [0, Ⲡ] then [-Ⲡ, 0]; clockwise; 0° = east
+      // theta *= 180 / Math.PI;           // [0, 180] then [-180, 0]; clockwise; 0° = east
+      // if (theta < 0) theta += 360;      // [0, 360]; clockwise; 0° = east
+
+      return theta;
+    },
+    rotateAngle: function (angle, rotation) {
+      return (angle + rotation) % 360;
+    },
+    generateEven: function (minX, maxX, minY, maxY, minDistance, maxPoints, maxIterations) {
+      let pointCount = 0;
+      let iterations = 0;
+      let points = [];
+
+      // Generate a point until maximums satisifed
+      while (pointCount < maxPoints && iterations < maxIterations) {
+        iterations++;
+        let newPoint = new Point(this.uniform(minX, maxX), this.uniform(minY, maxY));
+        if (!points.some((otherPoint) => this.getDistance(newPoint, otherPoint) < minDistance)) {
+          pointCount++;
+          points.push(newPoint);
+        }
+      }
+
+      return points;
+    },
+    getDistance: function (a, b) {
+      return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2))
+    },
+    randomNumber: function (min, max) {
+      return Math.round(Math.random() * (max - min + 1) + min);
+    },
+    uniform: function (min, max) {
+      return (Math.random() * (max - min)) + min;
+    },
+    randomChoice: function (array) {
+      if (array.length < 1) return null;
+      return array[this.randomNumber(0, array.length - 1)];
+    },
+    drawPixi: function () {
+      var canvas = document.getElementById('pixi')
+
+      const app = new PIXI.Application({
+        width: window.innerWidth,
+        height: window.innerHeight,
+        antialias: true,
+        backgroundColor: 0x171717,
+        view: canvas,
+      })
+
+      // Constants
+      const WIDTH = app.screen.width;
+      const HEIGHT = app.screen.height;
+      const LEFT = -WIDTH / 2;
+      const RIGHT = WIDTH / 2;
+      const TOP = -HEIGHT / 2;
+      const BOTTOM = HEIGHT / 2;
+
+      const commonPositions = {
+        topLeft: new Point(-WIDTH / 2, HEIGHT / 2),
+        topRight: new Point(WIDTH / 2, HEIGHT / 2),
+        bottomLeft: new Point(-WIDTH / 2, -HEIGHT / 2),
+        bottomRight: new Point(WIDTH / 2, -HEIGHT / 2),
+        center: new Point(0, 0)
+      }
+
+      const emojiList = ["heart_with_arrow",
+        "heart_with_ribbon",
+        "heavy_heart_exclamation_mark_ornament",
+        "revolving_hearts",
+        "sparkles",
+        "sparkling_heart"];
+
+      // Load all textures into memory
+      let textures = emojiList.map((emoji_name) => PIXI.Texture.from(require(`./assets/emojis/${emoji_name}.png`)));
+
+      // Add a spawning buffer of 3% of the average of the app's width & height.
+      let edgeBuffer = Math.round(0.03 * ((app.screen.width + app.screen.height) / 2));
+
+      // Generate initial points
+      let objects = [];
+      let points = this.generateEven(
+          -app.screen.width / 2 + edgeBuffer,
+          app.screen.width / 2 - edgeBuffer,
+          -app.screen.height / 2 + edgeBuffer,
+          app.screen.height / 2 - edgeBuffer,
+          50, 200, 10000)
+
+
+      app.stage.x = app.screen.width / 2;
+      app.stage.y = app.screen.height / 2;
+
+      let setupByPoint = (point) => {
+        // Select a random texture for a new sprite
+        let sprite = new PIXI.Sprite(this.randomChoice(textures));
+
+        // Place the sprite at the point
+        sprite.anchor.set(0.5, 0.5);
+        sprite.x = point.x;
+        sprite.y = point.y;
+
+        // Set scale
+        // let distanceFromCenter = this.getDistance(commonPositions.center, point);
+        // sprite.baselineScale = this.uniform(0.45, 0.65);
+        sprite.baselineScale = this.uniform(0.03, 0.07)
+
+        // Get angle to center
+        // let angleToCenter = this.getAngle(point.x, point.y, 0, 0);
+        let angleToCenter = this.getAngle(0, 0, point.x, point.y);
+        angleToCenter *= Math.PI / 180;
+        const velocityScale = 5;
+        sprite.velocityX = Math.cos(angleToCenter) * velocityScale;
+        sprite.velocityY = Math.sin(angleToCenter) * velocityScale * -1;
+        sprite.totalTime = 0;
+        // console.log(`${sprite.velocityX} ${sprite.velocityY}`)
+
+        // Motion Blur
+        // sprite.filters = [new MotionBlurFilter([1, 2], 3)]
+
+        // Setup the sprite for rendering
+        return sprite;
+      }
+
+      // Generate emoji objects
+      points.forEach((point) => {
+        let sprite = setupByPoint(point);
+        objects.push(sprite);
+        app.stage.addChild(sprite);
+      })
+
+      // Buffer the removal of items to 50px outside the canvas.
+      const REMOVAL_BUFFER = 300;
+      const easingFunction = easing.outCirc();
+      const maxDistance = this.getDistance(commonPositions.topLeft, commonPositions.center);
+      const MAX_BASELINE = 0.65;
+      const BASE_SPRITECOUNT = Math.max(objects.length, 150);
+
+      let specialStyle = new PIXI.TextStyle({ fill: "pink", stroke: "white", strokeThickness: 1});
+      let centerText = new PIXI.Text("Love you forever, Cris.", specialStyle);
+      centerText.anchor.set(0.5, 0.5);
+      // app.stage.addChild(centerText);
+      centerText.x = 0;
+
+      // console.log(`${objects.length} sprites generated.`)
+      app.ticker.add((delta) => {
+        let index = 0;
+
+        while (index < objects.length) {
+          let sprite = objects[index];
+          let distanceScale = this.getDistance(commonPositions.center, new Point(sprite.x, sprite.y)) / maxDistance;
+          distanceScale = Math.max(1, distanceScale + 0.3);
+          let easeValue = easingFunction(distanceScale);
+
+          if (sprite.baselineScale < MAX_BASELINE)
+            sprite.baselineScale = Math.min(MAX_BASELINE, sprite.baselineScale + (0.10 * delta * 0.09));
+
+          sprite.x += sprite.velocityX * delta * easeValue;
+          sprite.y += sprite.velocityY * delta * easeValue;
+
+          let scale = sprite.baselineScale * Math.log(distanceScale + 1)
+          sprite.scale.set(scale, scale);
+
+
+          if (sprite.x + REMOVAL_BUFFER < LEFT || sprite.x - REMOVAL_BUFFER > RIGHT || sprite.y - REMOVAL_BUFFER > BOTTOM || sprite.y + REMOVAL_BUFFER < TOP) {
+            objects.splice(index, 1);
+            app.stage.removeChild(sprite);
+          }
+
+          index++;
+
+          if (objects.length < BASE_SPRITECOUNT) {
+            let newPoint = new Point(this.uniform(-WIDTH / 2, WIDTH / 2), this.uniform(-HEIGHT / 2, HEIGHT / 2));
+            let newSprite = setupByPoint(newPoint);
+            objects.push(newSprite);
+            app.stage.addChild(newSprite);
+            console.log(newSprite)
+          }
+        }
+      });
+    },
+  },
+  mounted() {
+    this.drawPixi()
+  }
+}
+</script>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #171717;
+}
+
+#pixi, #app {
+  width: 100%;
+  height: 100%;
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  /*margin-top: 60px;*/
+}
+</style>

src/easing.js

@@ -0,0 +1,255 @@
+const Easing = {
+    linear: function () {
+        return function (t) {
+            return t;
+        };
+    },
+
+        inQuad: function () {
+        return function (t) {
+            return t * t;
+        };
+    },
+
+    outQuad: function () {
+        return function (t) {
+            return t * (2 - t);
+        };
+    },
+
+    inOutQuad: function () {
+        return function (t) {
+            t *= 2;
+            if (t < 1) return 0.5 * t * t;
+            return -0.5 * (--t * (t - 2) - 1);
+        };
+    },
+
+    inCubic: function () {
+        return function (t) {
+            return t * t * t;
+        };
+    },
+
+    outCubic: function () {
+        return function (t) {
+            return --t * t * t + 1;
+        };
+    },
+
+    inOutCubic: function () {
+        return function (t) {
+            t *= 2;
+            if (t < 1) return 0.5 * t * t * t;
+            t -= 2
+            return 0.5 * (t * t * t + 2);
+        };
+    },
+
+    inQuart: function () {
+        return function (t) {
+            return t * t * t * t;
+        };
+    },
+
+    outQuart: function () {
+        return function (t) {
+            return 1 - (--t * t * t * t);
+        };
+    },
+
+    inOutQuart: function () {
+        return function (t) {
+            t *= 2;
+            if (t < 1) return 0.5 * t * t * t * t;
+            t -= 2;
+            return -0.5 * (t * t * t * t - 2);
+        };
+    },
+
+    inQuint: function () {
+        return function (t) {
+            return t * t * t * t * t;
+        };
+    },
+
+    outQuint: function () {
+        return function (t) {
+            return --t * t * t * t * t + 1;
+        };
+    },
+
+    inOutQuint: function () {
+        return function (t) {
+            t *= 2;
+            if (t < 1) return 0.5 * t * t * t * t * t;
+            t -= 2;
+            return 0.5 * (t * t * t * t * t + 2);
+        };
+    },
+
+    inSine: function () {
+        return function (t) {
+            return 1 - Math.cos(t * Math.PI / 2);
+        };
+    },
+
+    outSine: function () {
+        return function (t) {
+            return Math.sin(t * Math.PI / 2);
+        };
+    },
+
+    inOutSine: function () {
+        return function (t) {
+            return 0.5 * (1 - Math.cos(Math.PI * t));
+        };
+    },
+
+    inExpo: function () {
+        return function (t) {
+            return t === 0 ? 0 : Math.pow(1024, t - 1);
+        };
+    },
+
+    outExpo: function () {
+        return function (t) {
+            return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+        };
+    },
+
+    inOutExpo: function () {
+        return function (t) {
+            if (t === 0) return 0;
+            if (t === 1) return 1;
+            t *= 2;
+            if (t < 1) return 0.5 * Math.pow(1024, t - 1);
+            return 0.5 * (-Math.pow(2, -10 * (t - 1)) + 2);
+        };
+    },
+
+    inCirc: function () {
+        return function (t) {
+            return 1 - Math.sqrt(1 - t * t);
+        };
+    },
+
+    outCirc: function () {
+        return function (t) {
+            return Math.sqrt(1 - (--t * t));
+        };
+    },
+
+    inOutCirc: function () {
+        return function (t) {
+            t *= 2
+            if (t < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
+            return 0.5 * (Math.sqrt(1 - (t - 2) * (t - 2)) + 1);
+        };
+    },
+
+
+    inElastic: function (a = 0.1, p = 0.4) {
+        return function (t) {
+            let s;
+            if (t === 0) return 0;
+            if (t === 1) return 1;
+            if (!a || a < 1) {
+                a = 1;
+                s = p / 4;
+            } else s = p * Math.asin(1 / a) / (2 * Math.PI);
+            return -(a * Math.pow(2, 10 * (t - 1)) * Math.sin(((t - 1) - s) * (2 * Math.PI) / p));
+        };
+    },
+
+    outElastic: function (a = 0.1, p = 0.4) {
+        return function (t) {
+            let s;
+            if (t === 0) return 0;
+            if (t === 1) return 1;
+            if (!a || a < 1) {
+                a = 1;
+                s = p / 4;
+            } else s = p * Math.asin(1 / a) / (2 * Math.PI);
+            return (a * Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1);
+        };
+    },
+
+    inOutElastic: function (a = 0.1, p = 0.4) {
+        return function (t) {
+            let s;
+            if (t === 0) return 0;
+            if (t === 1) return 1;
+            if (!a || a < 1) {
+                a = 1;
+                s = p / 4;
+            } else s = p * Math.asin(1 / a) / (2 * Math.PI);
+            t *= 2;
+            if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t - 1)) * Math.sin(((t - 1) - s) * (2 * Math.PI) / p));
+            return a * Math.pow(2, -10 * (t - 1)) * Math.sin(((t - 1) - s) * (2 * Math.PI) / p) * 0.5 + 1;
+        };
+    },
+
+    inBack: function (v) {
+        return function (t) {
+            let s = v || 1.70158;
+            return t * t * ((s + 1) * t - s);
+        };
+    },
+
+    outBack: function (v) {
+        return function (t) {
+            let s = v || 1.70158;
+            return --t * t * ((s + 1) * t + s) + 1;
+        };
+    },
+
+    inOutBack: function (v) {
+        return function (t) {
+            let s = (v || 1.70158) * 1.525;
+            t *= 2;
+            if (t < 1) return 0.5 * (t * t * ((s + 1) * t - s));
+            return 0.5 * ((t - 2) * (t - 2) * ((s + 1) * (t - 2) + s) + 2);
+        };
+    },
+
+    inBounce: function () {
+        return function (t) {
+            return 1 - Easing.outBounce()(1 - t);
+        };
+    },
+
+    outBounce: function () {
+        return function (t) {
+            if (t < (1 / 2.75)) {
+                return 7.5625 * t * t;
+            } else if (t < (2 / 2.75)) {
+                t = (t - (1.5 / 2.75));
+                return 7.5625 * t * t + 0.75;
+            } else if (t < (2.5 / 2.75)) {
+                t = (t - (2.25 / 2.75));
+                return 7.5625 * t * t + 0.9375;
+            } else {
+                t -= (2.625 / 2.75);
+                return 7.5625 * t * t + 0.984375;
+            }
+        };
+    },
+
+    inOutBounce: function () {
+        return function (t) {
+            if (t < 0.5) return Easing.inBounce()(t * 2) * 0.5;
+            return Easing.outBounce()(t * 2 - 1) * 0.5 + 0.5;
+        };
+    },
+
+    customArray: function (arr) {
+        if (!arr) return Easing.linear();
+        return function (t) {
+            //todo: convert array => ease
+            return t;
+        }
+    }
+};
+
+export default Easing;

src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')