perf

docs/generative.js

@@ -1,6 +1,4 @@
-
-
-import * as PIXI from 'https://cdn.skypack.dev/pixi.js@5.x?min'
+import { Application, Graphics } from 'https://cdn.skypack.dev/pixi.js@5.x?min'
 import { KawaseBlurFilter } from 'https://cdn.skypack.dev/@pixi/filter-kawase-blur@3.2.0?min'
 import SimplexNoise from 'https://cdn.skypack.dev/simplex-noise@3.0.0?min'
 import hsl from 'https://cdn.skypack.dev/hsl-to-hex?min'
@@ -27,7 +25,7 @@ class ColorPalette {
     }
 
     setColors() {
-    // pick a random hue somewhere between 220 and 360
+        // pick a random hue somewhere between 220 and 360
         this.hue = ~~random(220, 360)
         this.complimentaryHue1 = this.hue + 30
         this.complimentaryHue2 = this.hue + 60
@@ -59,15 +57,15 @@ class ColorPalette {
     }
 
     randomColor() {
-    // pick a random color
+        // pick a random color
         return this.colorChoices[~~random(0, this.colorChoices.length)].replace(
             '#',
             '0x'
         )
     }
 
     setCustomProperties() {
-    // set CSS custom properties so that the colors defined here can be used throughout the UI
+        // set CSS custom properties so that the colors defined here can be used throughout the UI
         document.documentElement.style.setProperty('--hue', this.hue)
         document.documentElement.style.setProperty(
             '--hue-complimentary1',
@@ -84,7 +82,7 @@ class ColorPalette {
 class Orb {
     // Pixi takes hex colors as hexidecimal literals (0x rather than a string with '#')
     constructor(fill = 0x000000) {
-    // bounds = the area an orb is "allowed" to move within
+        // bounds = the area an orb is "allowed" to move within
         this.bounds = this.setBounds()
         // initialise the orb's { x, y } values to a random point within it's bounds
         this.x = random(this.bounds['x'].min, this.bounds['x'].max)
@@ -106,7 +104,7 @@ class Orb {
         this.inc = 0.002
 
         // PIXI.Graphics is used to draw 2d primitives (in this case a circle) to the canvas
-        this.graphics = new PIXI.Graphics()
+        this.graphics = new Graphics()
         this.graphics.alpha = 0.825
 
         // 250ms after the last window resize event, recalculate orb positions.
@@ -119,15 +117,15 @@ class Orb {
     }
 
     setBounds() {
-    // how far from the { x, y } origin can each orb move
+        // how far from the { x, y } origin can each orb move
         const maxDist =
-      window.innerWidth < 1000 ? window.innerWidth / 3 : window.innerWidth / 5
+            window.innerWidth < 1000 ? window.innerWidth / 3 : window.innerWidth / 5
         // the { x, y } origin for each orb (the bottom right of the screen)
         const originX = window.innerWidth / 1.25
         const originY =
-      window.innerWidth < 1000
-          ? window.innerHeight
-          : window.innerHeight / 1.375
+            window.innerWidth < 1000
+                ? window.innerHeight
+                : window.innerHeight / 1.375
 
         // allow each orb to move x distance away from it's x / y origin
         return {
@@ -143,7 +141,7 @@ class Orb {
     }
 
     update() {
-    // self similar "psuedo-random" or noise values at a given point in "time"
+        // self similar "psuedo-random" or noise values at a given point in "time"
         const xNoise = simplex.noise2D(this.xOff, this.xOff)
         const yNoise = simplex.noise2D(this.yOff, this.yOff)
         const scaleNoise = simplex.noise2D(this.xOff, this.yOff)
@@ -160,7 +158,7 @@ class Orb {
     }
 
     render() {
-    // update the PIXI.Graphics position and scale values
+        // update the PIXI.Graphics position and scale values
         this.graphics.x = this.x
         this.graphics.y = this.y
         this.graphics.scale.set(this.scale)
@@ -178,13 +176,15 @@ class Orb {
 }
 
 // Create PixiJS app
-const app = new PIXI.Application({
+const app = new Application({
     // render to <canvas class="orb-canvas"></canvas>
     view: document.querySelector('.orb-canvas'),
     // auto adjust size to fit the current window
     resizeTo: window,
     // transparent background, we will be creating a gradient background later using CSS
-    transparent: true
+    transparent: true,
+    useContextAlpha: false,
+    antialias: false
 })
 
 app.stage.filters = [new KawaseBlurFilter(30, 10, true)]