ScriptPAD

File Name:

1:

<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Free Vibration of Damped SDOF System</title>
</head>

<body>
	<h2>Free vibration of SDOF System</h2>
	 <pre>
	 Mű + cú + Ku = 0
	 ű + 2ξωnú + ωn²u = 0
	 ωn = √(K/M)   T=2π/ωn
	 ξ = c/(2√(MK))
	 </pre>
	
	<div id="out"></div>
	<canvas id="myCanvas" width="400" height="500"></canvas>
	<script>
	const canvas = document.getElementById("myCanvas");
	const ctx = canvas.getContext("2d");
	const output = document.getElementById("out");
	// System parameters

k = 2000; // Spring constant

m = 60; // Mass

c = 20; // Damping coefficient

displacement = 0;
	initialDisplacement = 1.2; // Initial displacement

initialVelocity = 0; // Initial velocity

dampingRatio = c / (2 * Math.sqrt(k * m)); // Damping ratio

naturalFrequency = Math.sqrt(k / m); // Natural frequency

// Time parameters

time = 0;
	timeStep = 0.01; // Time step

endTime = 100; // Simulation duration

vibrationmode = "";
	// Function to calculate displacement

function calculateDisplacement(time, dampingRatio, naturalFrequency, initialDisplacement, initialVelocity) {
		if(dampingRatio < 1) { // Underdamped

vibrationmode = "Underdamped";
			const dampedFrequency = naturalFrequency * Math.sqrt(1 - dampingRatio * dampingRatio);
			const C1 = initialDisplacement;
			const C2 = (initialVelocity + dampingRatio * naturalFrequency * initialDisplacement) / dampedFrequency;
			return Math.exp(-dampingRatio * naturalFrequency * time) * (C1 * Math.cos(dampedFrequency * time) + C2 * Math.sin(dampedFrequency * time));
		} else if(dampingRatio === 1) { // Critically damped

vibrationmode = "Critically damped";
			const C1 = initialDisplacement;
			const C2 = initialVelocity + naturalFrequency * initialDisplacement;
			return Math.exp(-naturalFrequency * time) * (C1 + C2 * time);
		} else { // Overdamped

vibrationmode = "Overdamped";
			const omega1 = naturalFrequency * (dampingRatio - Math.sqrt(dampingRatio * dampingRatio - 1));
			const omega2 = naturalFrequency * (dampingRatio + Math.sqrt(dampingRatio * dampingRatio - 1));
			const C1 = initialDisplacement * (omega1 / (omega2 - omega1));
			const C2 = initialDisplacement * (omega2 / (omega2 - omega1));
			return C1 * Math.exp(omega1 * time) + C2 * Math.exp(omega2 * time);
		}
	}

function showInfo() {
		var html = "Vibration mode: "+ vibrationmode + "<br/>";
		html += "Stiffness: " + k.toFixed(2) + "<br/>";
		html += "Mass: " + m.toFixed(2) + "<br/>";
		html += "Damping: " + c.toFixed(2) + "<br/>";
		html += "Damping Ratio: " + dampingRatio.toFixed(3) + "<br/>";
		html += "Natural Frequency: " + naturalFrequency.toFixed(3) + "<br/>";
		html += "Natural Period: " + (2 * Math.PI / naturalFrequency).toFixed(3) + "<br/>";
		html += "Time: " + time.toFixed(2) + "<br/>";
		html += "Displacement: " + displacement.toFixed(3) + "<br/>";
		output.innerHTML = html;
	}

function drawQuadFrame(displacement){
		var x=100, y=50, H = 150, W=150;
		var massPosition=x+displacement;
		ctx.lineWidth=1;
		ctx.beginPath();
		ctx.moveTo(x, y+H); // Starting point

ctx.bezierCurveTo(x, y+H/2, massPosition, y+H/2, massPosition, y); // Control point and end point

ctx.stroke();

ctx.beginPath();
		ctx.moveTo(x+W, y+H); // Starting point

ctx.bezierCurveTo(x+W, y+H/2, massPosition+W, y+H/2, massPosition+W, y); // Control point and end point

ctx.stroke();
		
		ctx.beginPath();
		ctx.lineWidth=3;
		ctx.moveTo(x-20, y+H);
		ctx.lineTo(x+20, y+H);
		ctx.moveTo(x+W-20, y+H);
		ctx.lineTo(x+W+20, y+H);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.lineWidth=7;
		ctx.moveTo(massPosition, y); 
		ctx.lineTo(massPosition+W, y);
		ctx.stroke();
	}
	// Animation loop

function animate() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		displacement = calculateDisplacement(time, dampingRatio, naturalFrequency, initialDisplacement, initialVelocity);
		
		showInfo();
		drawQuadFrame(displacement * 40);
		
		// Increment time

time += timeStep;
		if(time <= endTime) {
			requestAnimationFrame(animate);
		}
	}
	// Start the animation

animate();
	</script>
</body>

</html>