damus.io

damus.io website
git clone git://jb55.com/damus.io
Log | Files | Refs | README | LICENSE

StarField.tsx (4780B)

      1 /*
      2 The code below was taken from https://codepen.io/ChuckWines/pen/OJPEzqN and licensed under the MIT License.
      3 
      4 The code was further modified to be used in a React component with TypeScript.
      5 ---------
      6 Copyright (c) 2024 by Charles Wines (https://codepen.io/ChuckWines/pen/OJPEzqN)
      7 
      8 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
      9 
     10 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
     11 
     12 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
     13 */
     14 import { useScroll, useTransform } from 'framer-motion';
     15 import React, { useEffect, useRef, useState } from 'react';
     16 
     17 const STAR_COUNT = 300;
     18 const STAR_MIN_SPEED = 0.005;
     19 const STAR_MAX_SPEED = 0.1;
     20 const MIN_VISION_PERSISTENCE = 0.2;
     21 const MAX_VISION_PERSISTENCE = 0.99;
     22 
     23 export function StarField({ className }: { className?: string }) {
     24   const canvasRef = useRef<HTMLCanvasElement>(null);
     25   const contextRef = useRef<CanvasRenderingContext2D | null>(null);
     26   const { scrollYProgress } = useScroll()
     27   const speed = useTransform(scrollYProgress, [0, 0.3], [STAR_MIN_SPEED, STAR_MAX_SPEED]);
     28   const visionPersistence = useTransform(scrollYProgress, [0, 0.3], [MIN_VISION_PERSISTENCE, MAX_VISION_PERSISTENCE]);
     29 
     30   class Star {
     31     x: number;
     32     y: number;
     33     prevX: number;
     34     prevY: number;
     35     z: number;
     36 
     37     constructor(canvasWidth: number, canvasHeight: number) {
     38       this.x = Math.random() * canvasWidth - canvasWidth / 2;
     39       this.y = Math.random() * canvasHeight - canvasHeight / 2;
     40       this.prevX = this.x;
     41       this.prevY = this.y;
     42       this.z = Math.random() * 4;
     43     }
     44 
     45     update(speed: number, canvasWidth: number, canvasHeight: number) {
     46       this.prevX = this.x;
     47       this.prevY = this.y;
     48       this.z += speed;
     49       this.x += this.x * (speed * 0.2) * this.z;
     50       this.y += this.y * (speed * 0.2) * this.z;
     51       if (
     52         this.x > canvasWidth / 2 + 50 ||
     53         this.x < -canvasWidth / 2 - 50 ||
     54         this.y > canvasHeight / 2 + 50 ||
     55         this.y < -canvasHeight / 2 - 50
     56       ) {
     57         this.x = Math.random() * canvasWidth - canvasWidth / 2;
     58         this.y = Math.random() * canvasHeight - canvasHeight / 2;
     59         this.prevX = this.x;
     60         this.prevY = this.y;
     61         this.z = 0;
     62       }
     63     }
     64 
     65     show(context: CanvasRenderingContext2D) {
     66       context.lineWidth = this.z;
     67       context.beginPath();
     68       context.moveTo(this.x, this.y);
     69       context.lineTo(this.prevX, this.prevY);
     70       context.stroke();
     71     }
     72   }
     73 
     74   const getContext = () => {
     75     if (!contextRef.current && canvasRef.current) {
     76         let context = canvasRef.current.getContext('2d');
     77         if (!context) throw new Error('Failed to get canvas context');
     78         contextRef.current = context;
     79         return context;
     80     }
     81     else {
     82         if (!contextRef.current) throw new Error('Canvas context is not available');
     83         return contextRef.current;
     84     }
     85   }
     86 
     87   useEffect(() => {
     88     const canvas = canvasRef.current;
     89     if (!canvas) return;
     90 
     91     const context = getContext();
     92 
     93     canvas.width = window.innerWidth;
     94     canvas.height = window.innerHeight;
     95 
     96     let stars: Star[] = [];
     97     for (let i = 0; i < STAR_COUNT; i++) {
     98       stars.push(new Star(canvas.width, canvas.height));
     99     }
    100 
    101     context.fillStyle = `rgba(0, 0, 0, ${1 - visionPersistence.get()})`;
    102     context.strokeStyle = 'rgba(235, 215, 255)';
    103     context.translate(canvas.width / 2, canvas.height / 2);
    104 
    105     function draw() {
    106       if (!context) return;
    107       if (!canvas) return;
    108       context.fillStyle = `rgba(0, 0, 0, ${1 - visionPersistence.get()})`;
    109       context.fillRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
    110       for (let star of stars) {
    111         star.update(speed.get(), canvas.width, canvas.height);
    112         star.show(context);
    113       }
    114       requestAnimationFrame(draw);
    115     }
    116 
    117     draw();
    118   }, []);
    119 
    120   return <canvas ref={canvasRef} className={className} style={{
    121     zIndex: -1,
    122   }} />;
    123 };
    124 
    125 export default StarField;