diff --git a/src/comps/canvas.jsx b/src/comps/canvas.jsx index c92a939..f4ed3fd 100644 --- a/src/comps/canvas.jsx +++ b/src/comps/canvas.jsx @@ -2,7 +2,7 @@ import { use, useEffect, useRef } from "react"; const StartCount=50; -const StartUpdateInterval=1000; +const StartUpdateInterval=1800; const PointCount=4; const PointScale=0.7; @@ -33,8 +33,8 @@ export default function Canvas({ lookat, ...props }) { const radius_y=425/393*PointScale; const rotate_angle=54*Math.PI/180; - const angle=baseangle+(Math.random()-0.5)*Math.PI/2; - const scale=Math.random()*0.5+0.5; + const angle=baseangle+(Math.random()-0.5)*Math.PI; + const scale=Math.random()*0.75+0.25; @@ -79,7 +79,7 @@ export default function Canvas({ lookat, ...props }) { const width=refCanvas.current.width; const height=refCanvas.current.height; const moveScale=50000; - const rotateScale=0.000001; + const rotateScale=0.0001; refPoints.current.forEach(point => { const angle=Date.now()/1000+point.start_angle; const radius=point.radius; @@ -120,7 +120,8 @@ export default function Canvas({ lookat, ...props }) { const alpha = star.alpha; context.beginPath(); 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(); }); @@ -181,11 +182,11 @@ export default function Canvas({ lookat, ...props }) { movePoints(); - if(Date.now()-refLastUpdate.current>StartUpdateInterval){ - randomStars(); - // randomPoints(); - refLastUpdate.current=Date.now(); - } + // if(Date.now()-refLastUpdate.current>StartUpdateInterval){ + // // randomStars(); + // // randomPoints(); + // refLastUpdate.current=Date.now(); + // } refDrawing.current=requestAnimationFrame(draw); }