construct.js违规，可能与Symbol.tsx处的源代码耦合。
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";
Symbol.tsx中const-noise=SimplexNoise声明处出现问题，请提供帮助。
我想这是一款非常小众的软件。不出所料，这是4.0版本的更新，但我试图使用现在分离的alea功能进行种子格式化，当时我只需要进行随机化格式化，现在一切都很完美。