fun: sine

app/filters/horizontal-sine.frag

@@ -0,0 +1,41 @@
+#define PI_D3 1.047197551
+
+varying vec2 vTextureCoord;
+uniform vec4 filterArea;
+uniform sampler2D uSampler;
+
+uniform float frequency;
+uniform bool isPixelated;
+uniform float magnitude;
+uniform float offset;
+uniform float scale;
+
+vec2 denormalizeCoordinates(vec2 coord) {
+  return coord * filterArea.xy + filterArea.zw;
+}
+
+vec2 normalizeCoordinates( vec2 coord ) {
+  return (coord - filterArea.zw) / filterArea.xy;
+}
+
+void main(void) {
+  // Denormalize coordinates.
+  vec2 coord = denormalizeCoordinates(vTextureCoord);
+  // Calculate rotation radians.
+  float rads = mod(
+    frequency * ((((isPixelated ? floor(offset) : offset) * scale) + coord.y) / scale),
+    6.
+  );
+  if (isPixelated) {
+    rads = floor(rads / frequency) * frequency;
+  }
+  // Apply horizontal shift.
+  float xOff = scale * magnitude * cos(PI_D3 * rads);
+  if (isPixelated) {
+    xOff = floor(xOff / scale) * scale;
+  }
+  coord.x += xOff;
+  // Normalize and apply coordinates.
+  coord = normalizeCoordinates(coord);
+  gl_FragColor = texture2D(uSampler, coord);
+}

app/filters/horizontal-sine.js

@@ -0,0 +1,55 @@
+import {defaultVertex, Filter} from '@pixi/core';
+import frag from './horizontal-sine.frag?raw';
+
+export default class HorizontalSine extends Filter {
+
+  constructor() {
+    super(defaultVertex, frag);
+    this.frequency = 1;
+    this.isPixelated = false;
+    this.magnitude = 0;
+    this.offset = 0;
+    this.scale = 1;
+  }
+
+  get frequency() {
+    return this.uniforms.frequency;
+  }
+
+  set frequency(frequency) {
+    this.uniforms.frequency = frequency;
+  }
+
+  get isPixelated() {
+    return this.uniforms.isPixelated;
+  }
+
+  set isPixelated(isPixelated) {
+    this.uniforms.isPixelated = isPixelated;
+  }
+
+  get magnitude() {
+    return this.uniforms.magnitude;
+  }
+
+  set magnitude(magnitude) {
+    this.uniforms.magnitude = magnitude;
+  }
+
+  get offset() {
+    return this.uniforms.offset;
+  }
+
+  set offset(offset) {
+    this.uniforms.offset = offset;
+  }
+
+  get scale() {
+    return this.uniforms.scale;
+  }
+
+  set scale(scale) {
+    this.uniforms.scale = scale;
+  }
+
+}

app/react-components/pixi/ecs.jsx

@@ -3,6 +3,8 @@ import {useEffect, useState} from 'react';
 
 import {useEcs, useEcsTick} from '@/context/ecs.js';
 import {useMainEntity} from '@/context/main-entity.js';
+// import {useRadians} from '@/context/radians.js';
+// import {TAU} from '@/util/math.js';
 
 import Entities from './entities.jsx';
 import TargetingGhost from './targeting-ghost.jsx';
@@ -36,6 +38,26 @@ export default function Ecs({applyFilters, camera, monopolizers, scale}) {
   const [projected, setProjected] = useState([]);
   const [position, setPosition] = useState({x: 0, y: 0});
   const [water, setWater] = useState();
+  // const radians = useRadians();
+  // const [sine, setSine] = useState();
+  // useEffect(() => {
+  //   async function buildSineFilter() {
+  //     const {default: SineFilter} = await import('@/filters/horizontal-sine.js');
+  //     const sine = new SineFilter();
+  //     sine.frequency = 1;
+  //     sine.magnitude = 3;
+  //     setSine(sine);
+  //   }
+  //   buildSineFilter();
+  // }, []);
+  // useEffect(() => {
+  //   if (!sine) {
+  //     return;
+  //   }
+  //   const r = (radians / 8) % TAU;
+  //   sine.offset = 6 * (camera.y + r);
+  //   sine.magnitude = 2 * (r > Math.PI ? TAU - r : r);
+  // }, [camera, radians, scale, sine]);
   useEffect(() => {
     async function buildNightFilter() {
       const {ColorMatrixFilter} = await import('@pixi/filter-color-matrix');
@@ -89,15 +111,16 @@ export default function Ecs({applyFilters, camera, monopolizers, scale}) {
       setProjected(Wielder.activeItem()?.project(Position.tile, Direction.direction));
     }
   }, [ecs, mainEntity, scale]);
-  // useEffect(() => {
-  //   setFilters(
-  //     applyFilters
-  //       ? [
-  //         ...(night ? [night] : [])
-  //       ]
-  //       : [],
-  //   );
-  // }, [applyFilters, night])
+  useEffect(() => {
+    setFilters(
+      applyFilters
+        ? [
+          ...(false && night ? [night] : []),
+          // ...(sine ? [sine] : []),
+        ]
+        : [],
+    );
+  }, [applyFilters, night])
   return (
     <Container
       scale={scale}