poojarsn · January 8, 2025 05:37
diff --git a/circle sin wave plotting b/circle sin wave plotting
 <!DOCTYPE html>
 <html>
 <head>
 <title>Unit Circle and Sine Wave Animation</title>
 <style>
 body {
    margin: 0;
 }
 canvas {
    display: block;
    background-color: #f0f0f0;
 }
 </style>
 </head>
 <body>
 <canvas id="unitCircle"></canvas>
 <canvas id="sinWave"></canvas>

 <script>
 const unitCircleCanvas = document.getElementById('unitCircle');
 const unitCircleCtx = unitCircleCanvas.getContext('2d');
 const sinWaveCanvas = document.getElementById('sinWave');
 const sinWaveCtx = sinWaveCanvas.getContext('2d');

 // Set canvas dimensions
 unitCircleCanvas.width = 400;
 unitCircleCanvas.height = 400;
 sinWaveCanvas.width = 400;
 sinWaveCanvas.height = 200;

 // Unit circle radius
 const radius = 150;

 // Center of the circle
 const unitCircleCenterX = unitCircleCanvas.width / 2;
 const unitCircleCenterY = unitCircleCanvas.height / 2;

 // Starting angle (radians)
 let angle = 0;

 // Animation speed
 const speed = 0.02;

 // Wave graph parameters
 const waveAmplitude = 75;
 const waveOffset = sinWaveCanvas.height / 2;

 // Array to store previous wave points
 const prevWavePoints = [];

 // Function to draw the unit circle
 function drawUnitCircle() {
    unitCircleCtx.beginPath();
    unitCircleCtx.arc(unitCircleCenterX, unitCircleCenterY, radius, 0, 2 * Math.PI);
    unitCircleCtx.strokeStyle = 'black';
    unitCircleCtx.stroke();
 }

 // Function to draw the coordinate axes
 function drawUnitCircleAxes() {
    unitCircleCtx.beginPath();
    unitCircleCtx.moveTo(unitCircleCenterX, 0);
    unitCircleCtx.lineTo(unitCircleCenterX, unitCircleCanvas.height);
    unitCircleCtx.moveTo(0, unitCircleCenterY);
    unitCircleCtx.lineTo(unitCircleCanvas.width, unitCircleCenterY);
    unitCircleCtx.strokeStyle = 'black';
    unitCircleCtx.stroke();
 }

 // Function to draw the radius and point on the circle
 function drawUnitCircleRadiusAndPoint() {
    // Calculate x and y coordinates of the point
    const x = unitCircleCenterX + radius * Math.cos(angle);
    const y = unitCircleCenterY - radius * Math.sin(angle);

    // Draw radius
    unitCircleCtx.beginPath();
    unitCircleCtx.moveTo(unitCircleCenterX, unitCircleCenterY);
    unitCircleCtx.lineTo(x, y);
    unitCircleCtx.strokeStyle = 'blue';
    unitCircleCtx.stroke();

    // Draw point
    unitCircleCtx.beginPath();
    unitCircleCtx.arc(x, y, 5, 0, 2 * Math.PI);
    unitCircleCtx.fillStyle = 'red';
    unitCircleCtx.fill();

    // Display coordinates (optional)
    unitCircleCtx.font = "12px Arial";
    unitCircleCtx.fillText("(" + Math.cos(angle).toFixed(2) + ", " + Math.sin(angle).toFixed(2) + ")", x + 10, y - 10);

    return { x, y };
 }

 // Function to draw the sine wave
 function drawSineWave() {
    sinWaveCtx.clearRect(0, 0, sinWaveCanvas.width, sinWaveCanvas.height);

    sinWaveCtx.beginPath();

    // Calculate x-coordinate for the current angle on the sine wave canvas
    const waveX = (angle / (2 * Math.PI)) * sinWaveCanvas.width; 
    // Calculate y-coordinate for the current angle on the sine wave
    const waveY = waveOffset - waveAmplitude * Math.sin(angle);

    prevWavePoints.push({ x: waveX, y: waveY });

    // Draw the trace of the sine wave
    sinWaveCtx.strokeStyle = 'lightgray'; 
    sinWaveCtx.moveTo(0, waveOffset);
    prevWavePoints.forEach(point => {
        sinWaveCtx.lineTo(point.x, point.y);
    });
    sinWaveCtx.stroke();

    // Draw the current point on the sine wave
    sinWaveCtx.beginPath();
    sinWaveCtx.arc(waveX, waveY, 3, 0, 2 * Math.PI);
    sinWaveCtx.fillStyle = 'red';
    sinWaveCtx.fill();
 }

 // Animation loop
 function animate() {
    unitCircleCtx.clearRect(0, 0, unitCircleCanvas.width, unitCircleCanvas.height);
    drawUnitCircle();
    drawUnitCircleAxes();
    drawUnitCircleRadiusAndPoint();

    drawSineWave();

    angle += speed;

    if (angle >= 2 * Math.PI) {
        angle = 0;
    }

    requestAnimationFrame(animate);
 }

 // Start the animation
 animate();
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Unit Circle and Sine Wave Animation</title>
	<style>
	body {
	margin: 0;
	}
	canvas {
	display: block;
	background-color: #f0f0f0;
	}
	</style>
	</head>
	<body>
	<canvas id="unitCircle"></canvas>
	<canvas id="sinWave"></canvas>

	<script>
	const unitCircleCanvas = document.getElementById('unitCircle');
	const unitCircleCtx = unitCircleCanvas.getContext('2d');
	const sinWaveCanvas = document.getElementById('sinWave');
	const sinWaveCtx = sinWaveCanvas.getContext('2d');

	// Set canvas dimensions
	unitCircleCanvas.width = 400;
	unitCircleCanvas.height = 400;
	sinWaveCanvas.width = 400;
	sinWaveCanvas.height = 200;

	// Unit circle radius
	const radius = 150;

	// Center of the circle
	const unitCircleCenterX = unitCircleCanvas.width / 2;
	const unitCircleCenterY = unitCircleCanvas.height / 2;

	// Starting angle (radians)
	let angle = 0;

	// Animation speed
	const speed = 0.02;

	// Wave graph parameters
	const waveAmplitude = 75;
	const waveOffset = sinWaveCanvas.height / 2;

	// Array to store previous wave points
	const prevWavePoints = [];

	// Function to draw the unit circle
	function drawUnitCircle() {
	unitCircleCtx.beginPath();
	unitCircleCtx.arc(unitCircleCenterX, unitCircleCenterY, radius, 0, 2 * Math.PI);
	unitCircleCtx.strokeStyle = 'black';
	unitCircleCtx.stroke();
	}

	// Function to draw the coordinate axes
	function drawUnitCircleAxes() {
	unitCircleCtx.beginPath();
	unitCircleCtx.moveTo(unitCircleCenterX, 0);
	unitCircleCtx.lineTo(unitCircleCenterX, unitCircleCanvas.height);
	unitCircleCtx.moveTo(0, unitCircleCenterY);
	unitCircleCtx.lineTo(unitCircleCanvas.width, unitCircleCenterY);
	unitCircleCtx.strokeStyle = 'black';
	unitCircleCtx.stroke();
	}

	// Function to draw the radius and point on the circle
	function drawUnitCircleRadiusAndPoint() {
	// Calculate x and y coordinates of the point
	const x = unitCircleCenterX + radius * Math.cos(angle);
	const y = unitCircleCenterY - radius * Math.sin(angle);

	// Draw radius
	unitCircleCtx.beginPath();
	unitCircleCtx.moveTo(unitCircleCenterX, unitCircleCenterY);
	unitCircleCtx.lineTo(x, y);
	unitCircleCtx.strokeStyle = 'blue';
	unitCircleCtx.stroke();

	// Draw point
	unitCircleCtx.beginPath();
	unitCircleCtx.arc(x, y, 5, 0, 2 * Math.PI);
	unitCircleCtx.fillStyle = 'red';
	unitCircleCtx.fill();

	// Display coordinates (optional)
	unitCircleCtx.font = "12px Arial";
	unitCircleCtx.fillText("(" + Math.cos(angle).toFixed(2) + ", " + Math.sin(angle).toFixed(2) + ")", x + 10, y - 10);

	return { x, y };
	}

	// Function to draw the sine wave
	function drawSineWave() {
	sinWaveCtx.clearRect(0, 0, sinWaveCanvas.width, sinWaveCanvas.height);

	sinWaveCtx.beginPath();

	// Calculate x-coordinate for the current angle on the sine wave canvas
	const waveX = (angle / (2 * Math.PI)) * sinWaveCanvas.width;
	// Calculate y-coordinate for the current angle on the sine wave
	const waveY = waveOffset - waveAmplitude * Math.sin(angle);

	prevWavePoints.push({ x: waveX, y: waveY });

	// Draw the trace of the sine wave
	sinWaveCtx.strokeStyle = 'lightgray';
	sinWaveCtx.moveTo(0, waveOffset);
	prevWavePoints.forEach(point => {
	sinWaveCtx.lineTo(point.x, point.y);
	});
	sinWaveCtx.stroke();

	// Draw the current point on the sine wave
	sinWaveCtx.beginPath();
	sinWaveCtx.arc(waveX, waveY, 3, 0, 2 * Math.PI);
	sinWaveCtx.fillStyle = 'red';
	sinWaveCtx.fill();
	}

	// Animation loop
	function animate() {
	unitCircleCtx.clearRect(0, 0, unitCircleCanvas.width, unitCircleCanvas.height);
	drawUnitCircle();
	drawUnitCircleAxes();
	drawUnitCircleRadiusAndPoint();

	drawSineWave();

	angle += speed;

	if (angle >= 2 * Math.PI) {
	angle = 0;
	}

	requestAnimationFrame(animate);
	}

	// Start the animation
	animate();
	</script>
	</body>
	</html>
No results found