xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-06 03:17:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

performance improvements, lower frameRate target

Browse Source
This commit is contained in:
Xevion
2024-12-26 17:13:31 -06:00
parent 4e8526f6f0
commit 216513d82d
1 changed files with 20 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Dots.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react';
import { p5i, P5I } from 'p5i'; import { p5i, P5I } from 'p5i';
import React, { useEffect, useRef } from 'react';
const Dots: React.FC = () => { const Dots: React.FC = () => {
const canvasRef = useRef<HTMLDivElement | null>(null); const canvasRef = useRef<HTMLDivElement | null>(null);
@@ -7,12 +7,9 @@ const Dots: React.FC = () => {
const { const {
mount, mount,
unmount, unmount,
createCanvas,
background, background,
noFill,
stroke, stroke,
noise, noise,
noiseSeed,
resizeCanvas, resizeCanvas,
cos, cos,
sin, sin,
@@ -26,57 +23,56 @@ const Dots: React.FC = () => {
const SCALE = 200; const SCALE = 200;
const LENGTH = 10; const LENGTH = 10;
const SPACING = 15; const SPACING = 15;
const TARGET_FRAMERATE = 12;
const TIMESCALE = 18 / TARGET_FRAMERATE;
function getForceOnPoint(x: number, y: number, z: number) { function getForceOnPoint(x: number, y: number, z: number) {
return (noise(x / SCALE, y / SCALE, z) - 0.5) * 2 * TWO_PI; return (noise(x / SCALE, y / SCALE, z) - 0.5) * 2 * TWO_PI;
} }
const existingPoints = new Set<string>(); const pointIds = new Set<string>();
const points: { x: number, y: number, opacity: number }[] = []; const points: { x: number, y: number, opacity: number }[] = [];
function addPoints() { function addPoints() {
for (let x = -SPACING / 2; x < w + SPACING; x += SPACING) { for (let x = -SPACING / 2; x < w + SPACING; x += SPACING) {
for (let y = -SPACING / 2; y < h + offsetY + SPACING; y += SPACING) { for (let y = -SPACING / 2; y < h + offsetY + SPACING; y += SPACING) {
const id = `${x}-${y}`; const id = `${x}-${y}`;
if (existingPoints.has(id)) continue; if (pointIds.has(id)) continue;
existingPoints.add(id); pointIds.add(id);
points.push({ x, y, opacity: Math.random() * 0.5 + 0.5 }); points.push({ x, y, opacity: Math.random() * 0.5 + 0.5 });
} }
} }
} }
function setup() { function setup({ createCanvas, stroke, frameRate, background, noFill, noiseSeed }: P5I) {
createCanvas(w, h); createCanvas(w, h);
background('#000000'); background('#000000');
stroke('rgba(170, 170, 170, 0.05)'); stroke('rgba(170, 170, 170, 0.05)');
noFill(); noFill();
noiseSeed(+new Date()); frameRate(TARGET_FRAMERATE);
noiseSeed(Date.now());
addPoints(); addPoints();
} }
function draw({ circle }: P5I) { function draw({ circle, frameCount }: P5I) {
background('#000000'); background('#000000');
const t = +new Date() / 10000; const t = (frameCount / 80) * TIMESCALE;
// if (frameCount % 10000) console.log(frameRate());
for (const p of points) { for (const p of points) {
const { x, y } = p; const rad = getForceOnPoint(p.x, p.y, t);
const rad = getForceOnPoint(x, y, t); const length = (noise(p.x / SCALE, p.y / SCALE, t * 2) + 0.5) * LENGTH;
const length = (noise(x / SCALE, y / SCALE, t * 2) + 0.5) * LENGTH; const nx = p.x + cos(rad) * length;
const nx = x + cos(rad) * length; const ny = p.y + sin(rad) * length;
const ny = y + sin(rad) * length;
const opacity = 1;
// const center_distance = Math.sqrt((x - w / 2) ** 2 + (y - h / 2) ** 2); // const center_distance = Math.sqrt((x - w / 2) ** 2 + (y - h / 2) ** 2);
// if (center_distance < 350) // if (center_distance < 350)
// opacity = 0; // opacity = 0;
// opacity = // opacity =
stroke(200, 200, 200, (Math.abs(cos(rad)) * 0.8 + 0.2) * p.opacity * 255 * 0.5 * opacity); stroke(200, 200, 200, (Math.abs(cos(rad)) * 0.8 + 0.2) * p.opacity * 255 * 0.5);
circle(nx, ny - offsetY, 1); circle(nx, ny - offsetY, 1);
} }
} }