xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-06 01:16:58 -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

44
src/components/Dots.tsx
View File

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