আলোর প্রতিফলন

 import React, { useState, useEffect } from 'react';

const LightReflectionAnimation = () => {

  const [angle, setAngle] = useState(45);

  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {

    let animationFrame;

    if (isAnimating) {

      let currentAngle = angle;

      const animate = () => {

        currentAngle = (currentAngle + 1) % 90;

        setAngle(currentAngle);

        animationFrame = requestAnimationFrame(animate);

      };

      animationFrame = requestAnimationFrame(animate);

    }

    return () => cancelAnimationFrame(animationFrame);

  }, [isAnimating, angle]);

  const toggleAnimation = () => setIsAnimating(!isAnimating);

  return (

    <div className="flex flex-col items-center p-4 bg-gray-100 rounded-lg">

      <svg width="300" height="300" viewBox="0 0 300 300">

        <line x1="150" y1="0" x2="150" y2="300" stroke="black" strokeWidth="2" />

        <line

          x1="150"

          y1="150"

          x2={150 + 140 * Math.cos((angle * Math.PI) / 180)}

          y2={150 - 140 * Math.sin((angle * Math.PI) / 180)}

          stroke="red"

          strokeWidth="2"

        />

        <line

          x1="150"

          y1="150"

          x2={150 - 140 * Math.cos((angle * Math.PI) / 180)}

          y2={150 - 140 * Math.sin((angle * Math.PI) / 180)}

          stroke="blue"

          strokeWidth="2"

        />

        <text x="270" y="160" fill="red" fontSize="14">

          আপতন রশ্মি

        </text>

        <text x="10" y="160" fill="blue" fontSize="14">

          প্রতিফলিত রশ্মি

        </text>

        <text x="155" y="20" fill="black" fontSize="14">

          লম্ব

        </text>

      </svg>

      <div className="mt-4">

        <button

          onClick={toggleAnimation}

          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"

        >

          {isAnimating ? 'অ্যানিমেশন বন্ধ করুন' : 'অ্যানিমেশন শুরু করুন'}

        </button>

      </div>

      <div className="mt-2">আপতন কোণ: {angle}°</div>

    </div>

  );

};

export default LightReflectionAnimation;