update webpage

main
reng 1 month ago
parent 1bad38a664
commit e2ced4e464
  1. 21
      src/comps/canvas.jsx

@ -2,7 +2,7 @@ import { use, useEffect, useRef } from "react";
const StartCount=50; const StartCount=50;
const StartUpdateInterval=1000; const StartUpdateInterval=1800;
const PointCount=4; const PointCount=4;
const PointScale=0.7; const PointScale=0.7;
@ -33,8 +33,8 @@ export default function Canvas({ lookat, ...props }) {
const radius_y=425/393*PointScale; const radius_y=425/393*PointScale;
const rotate_angle=54*Math.PI/180; const rotate_angle=54*Math.PI/180;
const angle=baseangle+(Math.random()-0.5)*Math.PI/2; const angle=baseangle+(Math.random()-0.5)*Math.PI;
const scale=Math.random()*0.5+0.5; const scale=Math.random()*0.75+0.25;
@ -79,7 +79,7 @@ export default function Canvas({ lookat, ...props }) {
const width=refCanvas.current.width; const width=refCanvas.current.width;
const height=refCanvas.current.height; const height=refCanvas.current.height;
const moveScale=50000; const moveScale=50000;
const rotateScale=0.000001; const rotateScale=0.0001;
refPoints.current.forEach(point => { refPoints.current.forEach(point => {
const angle=Date.now()/1000+point.start_angle; const angle=Date.now()/1000+point.start_angle;
const radius=point.radius; const radius=point.radius;
@ -120,7 +120,8 @@ export default function Canvas({ lookat, ...props }) {
const alpha = star.alpha; const alpha = star.alpha;
context.beginPath(); context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2); context.arc(x, y, radius, 0, Math.PI * 2);
context.fillStyle = `rgba(255, 255, 255, ${alpha})`; const color=Math.random()*20+Math.abs(Math.sin(Date.now()/1000+(x+y)/200))*200;
context.fillStyle = `rgba(${color}, ${color}, ${color}, ${alpha})`;
context.fill(); context.fill();
}); });
@ -181,11 +182,11 @@ export default function Canvas({ lookat, ...props }) {
movePoints(); movePoints();
if(Date.now()-refLastUpdate.current>StartUpdateInterval){ // if(Date.now()-refLastUpdate.current>StartUpdateInterval){
randomStars(); // // randomStars();
// randomPoints(); // // randomPoints();
refLastUpdate.current=Date.now(); // refLastUpdate.current=Date.now();
} // }
refDrawing.current=requestAnimationFrame(draw); refDrawing.current=requestAnimationFrame(draw);
} }

Loading…
Cancel
Save