@bbki.ng/site 1.7.0 → 1.7.1

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @bbki.ng/site
 
+## 1.7.1
+
 ## 1.7.0
 
 ## 1.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {

package/src/components/effect-layer/EffectLayer.tsx

@@ -1,27 +1,32 @@
-import React from "react";
+import React, { useCallback, useEffect } from "react";
 import { Canvas } from "@bbki.ng/components";
-import frag from "./shader.frag";
+import frag from "./main.frag";
 import vert from "./shader.vert";
 import cls from "classnames";
 import uniforms from "./uniforms";
-
-const canvasDefaultCls = cls(
-  "fixed",
-  "top-0",
-  "left-0",
-  "h-full",
-  "pointer-events-none",
-  "w-full",
-  "z-[999]"
-);
+import { useRender } from "@/components/effect-layer/hooks/useRender";
 
 export const EffectLayer = () => {
+  const canvasDefaultCls = cls(
+    "fixed",
+    "top-0",
+    "left-0",
+    "h-full",
+    "pointer-events-none",
+    "w-full",
+    "z-[999]"
+  );
+
+  const { onRender } = useRender();
+
   return (
     <Canvas
+      style={{ opacity: 0.1 }}
       className={canvasDefaultCls}
       uniforms={uniforms}
       fragment={frag}
       vertex={vert}
+      onRender={onRender}
     />
   );
 };

package/src/components/effect-layer/effects/grain.frag

@@ -0,0 +1,42 @@
+float rand(vec2 co){
+    return fract(
+        sin(
+            dot(
+                co.xy,
+                vec2(12.9898, 78.233)
+            )
+        ) * 43758.5453
+    );
+}
+
+vec4 grain(vec4 fragColor, vec2 uv){
+    vec4 color = fragColor;
+    float diff = (rand(uv) - 0.0) * 0.09;
+    color.r += diff;
+    color.g += diff;
+    color.b += diff;
+    return color;
+}
+
+vec4 randGrain(vec2 uv) {
+    vec4 color = vec4(
+        rand(uv * abs(sin(uProgress))) * 0.09,
+        rand(uv * abs(sin(uProgress))) * 0.09,
+        rand(uv * abs(sin(uProgress))) * 0.09,
+        rand(uv * abs(sin(uProgress)))
+    );
+
+    vec4 result = grain(color, uv);
+    result.a *= 0.8;
+
+    return result;
+}
+
+void drawGrainOnNav(vec2 uv) {
+    float navHeight = 64. * uDevicePixelRatio / uResolution.y;
+
+    if (uv.y <= navHeight) {
+        gl_FragColor = randGrain(uv);
+    }
+}
+

package/src/components/effect-layer/hooks/useRender.ts

@@ -0,0 +1,19 @@
+import {useCallback, useState} from "react";
+import {useMousePosition} from "@/hooks/use_mouse_position";
+
+export const useRender = () => {
+  const [inst, setInst] = useState<any>(null)
+  const pos = useMousePosition();
+
+  const onRender = useCallback((p: any) => {
+    if (inst === null) {
+      setInst(p)
+      return;
+    }
+
+    inst.uniforms.uMouse.value[0] = pos.current.x;
+    inst.uniforms.uMouse.value[1] = pos.current.y;
+  }, [inst]);
+
+  return { inst, onRender }
+}

package/src/components/effect-layer/main.frag

@@ -0,0 +1,27 @@
+precision mediump float;
+
+uniform vec2 uResolution;
+uniform float uProgress;
+uniform float uDevicePixelRatio;
+uniform vec2 uCenter;
+uniform vec2 uOffset;
+
+#define DefaultColor vec4(0.0, 0.0, 0.0, 0.0)
+#define CenterPos uCenter * uDevicePixelRatio / uResolution
+
+#include "effects/grain.frag"
+//#include "shapes/circle.frag"
+
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution;
+
+  // set default color
+  gl_FragColor = DefaultColor;
+
+  // draw circle on mouse
+  // drawCircleUnderMouse(uv, 0.05);
+
+  // draw grain on nav
+  drawGrainOnNav(uv);
+}

package/src/components/effect-layer/shapes/circle.frag

@@ -0,0 +1,32 @@
+uniform vec2 uMouse;
+
+vec4 sdfCircle(vec2 uv, float r, vec2 center) {
+    float x = uv.x;
+    float y = uv.y;
+
+    float d = distance(vec2(x, y), center) - r;
+
+    return d > 0. ? DefaultColor : vec4(1.0, 0.0, 1.0, 1.0);
+}
+
+vec4 sdfSquare(vec2 uv, vec4 rect) {
+    float x = uv.x;
+    float y = uv.y;
+
+    float dx = max(abs(x - rect.x) - rect.z, 0.);
+    float dy = max(abs(y - rect.y) - rect.w, 0.);
+
+    float d = max(dx, dy);
+
+    return d > 0. ? DefaultColor : vec4(1.0, 0.0, 1.0, 1.0);
+
+}
+
+void drawCircleUnderMouse(vec2 uv, float r) {
+    // flip uMouse vertically
+    vec2 normalizedMouse = vec2(uMouse.x, uResolution.y - uMouse.y) * uDevicePixelRatio / uResolution;
+
+    // sdfCircle transition to sdfSquare
+
+    // gl_FragColor = sdfSquare(uv, vec4(normalizedMouse, 0.1, 0.1));
+}

package/src/components/effect-layer/shapes/heart.frag

@@ -0,0 +1,11 @@
+float sdHeart(vec2 p)
+{
+    p.x = abs(p.x);
+
+    if( p.y+p.x>1.0 ) {
+        return sqrt(dot2(p-vec2(0.25,0.75))) - sqrt(2.0)/4.0;
+    }
+
+    return sqrt(min(dot2(p-vec2(0.00,1.00)),
+                    dot2(p-0.5*max(p.x+p.y,0.0)))) * sign(p.x-p.y);
+}

package/src/components/effect-layer/uniforms.ts

@@ -1,14 +1,32 @@
 export default {
   uResolution: {
     type: "vec2",
-    value: [innerWidth, innerHeight],
+    value: [
+      Math.min(innerWidth, innerHeight),
+      Math.min(innerWidth, innerHeight),
+    ],
   },
   uDevicePixelRatio: {
     type: "float",
     value: [devicePixelRatio],
   },
+  uOffset: {
+    type: "vec2",
+    value: [
+      (innerWidth / innerHeight) > 1 ? (innerWidth - innerHeight) / 2 : 0,
+      (innerWidth / innerHeight) < 1 ? (innerHeight - innerWidth) / 2 : 0,
+    ],
+  },
   pi: {
     type: "float",
     value: [Math.PI],
   },
+  uCenter: {
+    type: "vec2",
+    value: [innerWidth / 2, innerHeight / 2],
+  },
+  uMouse: {
+    type: "vec2",
+    value: [0, 0],
+  }
 }

package/src/hooks/use_mouse_position.ts

@@ -1,14 +1,17 @@
-import {useEffect, useState} from "react";
+import {useEffect, useRef} from "react";
 
 export const useMousePosition = () => {
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const posRef = useRef<{x: number, y:number}>({x: 0, y: 0});
   useEffect(() => {
     const updateMousePosition = (e: MouseEvent) => {
-      setMousePosition({ x: e.clientX, y: e.clientY });
+      posRef.current = {
+        x: e.clientX,
+        y: e.clientY,
+      };
     };
     window.addEventListener("mousemove", updateMousePosition);
     return () => window.removeEventListener("mousemove", updateMousePosition);
   }, []);
 
-  return mousePosition;
+  return posRef;
 }

package/src/components/effect-layer/attributes.ts

@@ -1,15 +0,0 @@
-export default [
-  {
-    name: "aPos",
-    size: 2,
-    data: (i: number, total: number) => {
-      const col = Math.sqrt(total);
-      const row = col;
-
-      const x = (i % col) / col;
-      const y = Math.floor(i / row) / row;
-
-      return [x, y];
-    },
-  },
-];

package/src/components/effect-layer/shader.frag

@@ -1,37 +0,0 @@
-precision mediump float;
-
-uniform vec2 uResolution;
-uniform float uProgress;
-uniform float uDevicePixelRatio;
-
-float rand(vec2 co){
-  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
-}
-
-vec4 grain(vec4 fragColor, vec2 uv){
-  vec4 color = fragColor;
-  float diff = (rand(uv) - 0.0) * 0.09;
-  color.r += diff;
-  color.g += diff;
-  color.b += diff;
-  return color;
-}
-
-vec4 randGrain(vec2 uv) {
-  vec4 color = vec4(0.0, 0.0, 0.0, 0.1);
-  color.a = rand(uv + uProgress) * 0.1;
-  return grain(color, uv);
-}
-
-void main() {
-  vec2 uv = gl_FragCoord.xy/uResolution;
-
-  float navHeight = 64. * uDevicePixelRatio / uResolution.y;
-
-  if (uv.y <= navHeight) {
-      gl_FragColor = randGrain(uv);
-  } else {
-      gl_FragColor = vec4(0., 0., 0., 0.);
-  }
-
-}

package/src/components/effect-layer/useRenderHandler.ts

@@ -1,6 +0,0 @@
-import {useCallback} from "react";
-
-export const useRenderHandler = () => {
-  return useCallback((inst: any) => {
-  }, [])
-}