New & improved style, removed blog

resources/js/matrix.js

@@ -0,0 +1,85 @@
+// Canvas Matrix
+
+const hex = "0123456789ABCDEF".split("");
+const jap = "阪熊奈岡鹿梨阜埼茨栃媛".split("");
+
+const matrix = document.getElementById("matrix");
+matrix.height = window.innerHeight;
+matrix.width = window.innerWidth;
+const ctx = matrix.getContext("2d", { alpha: false });
+
+const font_size = 15;
+let columns = 0;
+let drops = [];
+const color = '#FFFFFF';
+let lastFrame = performance.now();
+
+const gradient = ctx.createLinearGradient(0, 0, matrix.width, 0);
+gradient.addColorStop(0, '#ff0000');
+gradient.addColorStop(1 / 7, '#ff8000');
+gradient.addColorStop(2 / 7, '#ffff00');
+gradient.addColorStop(3 / 7, '#00ff00');
+gradient.addColorStop(4 / 7, '#00ffff');
+gradient.addColorStop(5 / 7, '#0000ff');
+gradient.addColorStop(6 / 7, '#ff00ff');
+gradient.addColorStop(1, '#ff0040');
+
+
+
+function initDrop(pos) {
+    return { pos, speed: Math.random() * 3 + 0.2, text: jap[Math.floor(Math.random()*jap.length)], red: Math.random() > 0.99 };
+}
+
+function init() {
+    columns = matrix.width / font_size;
+    drops = [];
+    for(let x=0; x < columns; x++) drops[x] = initDrop(matrix.height);
+}
+
+function render() {
+        // ctx.clearRect(0, 0, matrix.width, matrix.height);
+        ctx.fillStyle = "#465e5e";
+        ctx.globalAlpha = 0.1;
+        ctx.fillRect(0, 0, matrix.width, matrix.height);
+        ctx.globalAlpha = 1.0;
+        
+        ctx.font = font_size + "px arial";
+        
+        for(let i=0; i < drops.length; i++){
+            const drop = drops[i];
+
+            if (drop.red) {
+                ctx.fillStyle = "red";
+            } else {
+                ctx.fillStyle = color;
+            }
+
+            ctx.fillText(jap[Math.floor(Math.random()*jap.length)], i*font_size, drop.pos*(font_size/2));
+            
+            if(drop.pos*(font_size/2) > matrix.height && Math.random() > 0.98) {
+                drops[i] = initDrop(0);
+            } else {
+                drop.pos += drop.speed;
+            }            
+        }
+}
+
+function renderLoop() {
+    const now = performance.now();
+
+    if ((now - lastFrame) > (1000 / 60)) {
+        render();
+        lastFrame = now;
+    }
+
+    requestAnimationFrame(renderLoop);
+}
+
+window.addEventListener('resize', () => {
+    init();
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+    init();
+    requestAnimationFrame(renderLoop);
+});

resources/js/planet.js

@@ -72,8 +72,8 @@ function initLights() {
 async function initModels() {
     // Load Models
 
-    modelPlanet = (await loadModel('/models/LP_planet_only.glb')).scene;
-    modelMoon = (await loadModel('/models/LP_planet_moon.glb')).scene;
+    modelPlanet = (await loadModel('models/LP_planet_only.glb')).scene;
+    modelMoon = (await loadModel('models/LP_planet_moon.glb')).scene;
     
     
     modelPlanet.position.set(1, 1, 0);
@@ -123,10 +123,10 @@ function animateScene() {
 }
 
 // Main
-export function init() {
+export async function init() {
     initScene();
     initLights();
-    initModels();
+    await initModels();
     animateScene();
 }