Symbol.tsx: undefined is not a constructor (evaluating 'new _simplexNoise.default(i + "-" + j)')

Question

construct.js infraction, coupled in with the source at Symbol.tsx, likely.

Symbol.tsx

import type {
  SkFont,
  Vector,
  SkiaValue,
  SkiaClockValue,
} from "@shopify/react-native-skia";
import {
  interpolate,
  dist,
  useComputedValue,
  vec,
  Group,
  Text,
} from "@shopify/react-native-skia";
import React from "react";
import SimplexNoise from "simplex-noise";
import { useWindowDimensions } from "react-native";

import { FG } from "./Theme";

export const COLS = 5;
export const ROWS = 10;
const DIGITS = new Array(10).fill(0).map((_, i) => `${i}`);
const F = 0.0008;
const R = 125;
const A = 10;

interface SymbolProps {
  i: number;
  j: number;
  font: SkFont;
  pointer: SkiaValue<Vector>;
  clock: SkiaClockValue;
}

export const Symbol = ({ i, j, font, pointer, clock }: SymbolProps) => {
  const { width, height } = useWindowDimensions();
  const SIZE = { width: width / COLS, height: height / ROWS };
  const x = i * SIZE.width;
  const y = j * SIZE.height;
  const noise = new SimplexNoise(`${i}-${j}`);
  const text = DIGITS[Math.round(Math.random() * 9)];
  const [symbolWidth] = font.getGlyphWidths(font.getGlyphIDs(text));
  const origin = vec(x + SIZE.width / 2, y + SIZE.height / 2);
  const transform = useComputedValue(
    () => [
      {
        scale: interpolate(
          dist(pointer.current, origin),
          [0, R],
          [1.25, 0.25],
          {
            extrapolateLeft: "clamp",
            extrapolateRight: "clamp",
          }
        ),
      },
    ],
    [pointer]
  );
  const dx = useComputedValue(() => {
    const d = A * noise.noise2D(x, clock.current * F);
    return origin.x - symbolWidth / 2 + d;
  }, [clock]);
  const dy = useComputedValue(() => {
    const d = A * noise.noise2D(y, clock.current * F);
    return origin.y + font.getSize() / 2 + d;
  }, [clock]);
  return (
    <Group transform={transform} origin={origin}>
      <Text text={text} x={dx} y={dy} font={font} color={FG} />
    </Group>
  );
};

Severance.tsx
import {
  Canvas,
  Fill,
  Group,
  useClockValue,
  useFont,
  useTouchHandler,
  useValue,
} from "@shopify/react-native-skia";
import React from "react";
import { useWindowDimensions } from "react-native";

import { CRT } from "./CRT";
import { COLS, ROWS, Symbol } from "./Symbol";
import { BG } from "./Theme";

const rows = new Array(COLS).fill(0).map((_, i) => i);
const cols = new Array(ROWS).fill(0).map((_, i) => i);

export const Severance = () => {
  const { width, height } = useWindowDimensions();
  const clock = useClockValue();
  const font = useFont(require("./SF-Mono-Medium.otf"), height / ROWS);
  const pointer = useValue({ x: width / 2, y: height / 2 });
  const onTouch = useTouchHandler({
    onActive: (pt) => {
      pointer.current = pt;
    },
  });
  if (font === null) {
    return null;
  }
  return (
    <Canvas style={{ flex: 1 }} onTouch={onTouch} debug>
      <CRT>
        <Group>
          <Fill color={BG} />
          {rows.map((_i, i) =>
            cols.map((_j, j) => {
              return (
                <Symbol
                  key={`${i}-${j}`}
                  i={i}
                  j={j}
                  font={font}
                  pointer={pointer}
                  clock={clock}
                />
              );
            })
          )}
        </Group>
      </CRT>
    </Canvas>
  );
};



CRT.tsx
import {
  Group,
  Skia,
  RuntimeShader,
  usePaintRef,
  Paint,
  vec,
} from "@shopify/react-native-skia";
import type { ReactNode } from "react";
import React from "react";
import { useWindowDimensions } from "react-native";

const source = Skia.RuntimeEffect.Make(`
uniform shader image;
uniform vec2 resolution;
vec2 curve(vec2 uv)
{
    // as we near the edge of our screen apply greater distortion using a sinusoid.
    float curvature = 6.0;
    uv = uv * 2.0 - 1.0;
    vec2 offset = abs(uv.yx) / curvature;
    uv = uv + uv * offset * offset;
    uv = uv * 0.5 + 0.5;
    return uv;
}
vec4 scanLine(float x)
{
    float f = 900;
    float opacity = 0.25;
    float intensity = ((0.5 * sin(x * f)) + 0.5) * 0.9 + 0.1;
    return vec4(vec3(pow(intensity, opacity)), 1.0);
}
half4 main(float2 xy) {
  vec2 uv = xy/resolution;
  vec2 curvedUV = curve(vec2(uv.x, uv.y));
  vec4 baseColor = image.eval(curvedUV * resolution);
  baseColor *= scanLine(curvedUV.x);
  baseColor *= scanLine(curvedUV.y);
  baseColor *= vec4(vec3(1.5), 1.0);
  if (curvedUV.x < 0.0 || curvedUV.y < 0.0 || curvedUV.x > 1.0 || curvedUV.y > 1.0){
      return vec4(0.0, 0.0, 0.0, 1.0);
  } else {
      return baseColor;
  }
}
`)!;

interface CRTProps {
  children: ReactNode | ReactNode[];
}

export const CRT = ({ children }: CRTProps) => {
  const paint = usePaintRef();
  const { width, height } = useWindowDimensions();
  return (
    <>
      <Paint ref={paint}>
        <RuntimeShader
          source={source}
          uniforms={{ resolution: vec(width, height) }}
        />
      </Paint>
      <Group layer={paint}>{children}</Group>
    </>
  );
};

index.ts
export * from "./Severance";

Issue occurs in Symbol.tsx at const noise = SimplexNoise declaration, please help.

Answer 1

I guess it’s pretty niche software. It was predictably version 4.0 updates, however I was trying to format with seeding using a now separated alea feature when I just had to format for randomization now all works perfectly.