(Date.now());
const newRandomSeed = () => setRandomSeed(Date.now());
const rng = new Random(randomSeed);
const [stroke, setStroke] = useState(WAVE_STROKE);
const [fill, setFill] = useState(WAVE_FILL);
const [numWaves, setNumWaves] = useState(NUM_WAVES);
const [duration, setDuration] = useState(WAVE_DURATION);
const [initialYVel, setInitialYVel] = useState(
WAVE_PARALLAX_TRANSLATE_VELOCITY
);
const [showHills, setShowHills] = useState(false);
const [yAccel, setYAccel] = useState(WAVE_PARALLAX_TRANSLATE_ACCEL);
const [scaleVel, setScaleVel] = useState(WAVE_PARALLAX_SCALE_VELOCITY);
const [useMask, setUseMask] = useState(false);
let scale = WAVE_PARALLAX_SCALE_START;
let y = WAVE_PARALLAX_TRANSLATE_START;
let yVel = initialYVel;
let waves: JSX.Element[] = [];
for (let i = 0; i < numWaves; i++) {
const numHills = Math.floor(rng.inInterval({ min: 0, max: numWaves - i }));
const hazeAmt = lerp(
0,
BG_MAX_BLEND,
// The furthest-away waves (the first ones we draw) should be the
// most hazy. Scale the amount quadratically so that the waves in
// front tend to be less hazy.
Math.pow(1 - i / Math.max(numWaves - 1, 1), 2)
);
const blendedFill = mixColor(fill, BG_COLOR, hazeAmt);
const blendedStroke = mixColor(stroke, BG_COLOR, hazeAmt);
waves.push(
{showHills &&
range(numHills).map((j) => {
return (
);
})}
);
y += yVel;
scale *= scaleVel;
yVel += yAccel;
}
return (
<>
{" "}
{showHills && (
)}
);
};
export const WavesPage: React.FC<{}> = () => (
);