ScriptPAD

File Name:

1:

<!DOCTYPE html>
<html>
<head>
    <title>Free Vibration Simulation for BOTH DAMPED AND UNDAMPED STRUCTURE </title>
    <meta charset="UTF-8">
</head>
<body>

<h2  style="color:blue;"> <u> DAMPED/UNDAMPED  FREE VIBRATION   </u> </h2>

<pre>
	 
	 <u><span style="color: red;">UNdamped SYSTEM  </span></u>                 <u><span style="color: red;">Damped SYSTEM  </span></u>
	                 	
	 Mű + Ku = 0                       Mű + cú + Ku = 0
	 ű + ωn²u = 0                      ű + 2ξωnú + ωn²u = 0
	 ωn = √(K/M)   T=2π/ωn             ωn = √(K/M)   T=2π/ωn
                                           ξ = c/(2√(MK))	  
	 </pre>

<div id="myElement" style="position: absolute; right : 50px; bottom: 100px;">
  <span style="color:DarkRed;"> Worked Based On Saya's JavaScriptCode from egsdof  </span> By <br>
  PCSE-01's BatchOne student Zeya !<br>
  Ref Sources from Saya CHO's Lectures: 
  <a href="https://edu.structsoftlab.asia/" target="_blank">structsoftlab</a><br>
  TQ Very much Sir !
</div>
   
<div>
  <label for="m"> floor mass 'm' in ( kg ) :</label>
  <input type="number" id="m" value="60" required>
  </div>
<div>
  <label for="k"> Total column stiffness 'k' in (N/m ):</label>
  <input type="number" id="k" step="0" value="2000" required>
  </div>
<div>
  <label for="c"> Damping Coefficient 'c' in (N s/m or kg/s):</label>
  <input type="number" id="c" step="0.1" value="20" required>
  <label for="c"> If Undamped 'c = 0 '</label>
  
  </div>
  
  <div>
  <label for="u"> Initial displacement 'u(0)' time zero u(0) in (mm):</label>
  <input type="number" id="u" step="0.1" value="1.2" required>
  </div>
  
   <div>
  <label for="v"> initialVelocity  'v(0) ' time zero v(0) in (mm/s):</label>
  <input type="number" id="v" step="0.1" value="0" required>
  </div>
  
  
   <div>
  <label for="eT"> ENDTime to stop the frame Vibration in (s):</label>
  <input type="number" id="eT" step="0.1" value="50" required>
  </div>
   
   
  <br>
  <button onclick="START()"> CLICK TO START </button>
  <br> <u><span style="color: green ;"> To Reset Parameter value OR Restart ,Pls Wait Time(t) reaches the ENDTime  </span></u>    <br><br> 
  
  	
  <div id="out"></div>
  <canvas id="myCanvas" width="1000" height="500"></canvas>	
	
  <script>
	
	
	
	function START() {
    // system parameters to be used as input data
        
    const m =  parseFloat(document.getElementById("m").value) ;
    const k = parseFloat(document.getElementById("k").value);
    const c = parseFloat(document.getElementById("c").value);
    const u = parseFloat(document.getElementById("u").value)   ;  
    const v = parseFloat(document.getElementById("v").value)  ;  
    const eT = parseFloat(document.getElementById("eT").value) ;  
    
	let displacement = 0;

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

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

// Time parameters

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

let endTime = eT; // Simulation duration

vibrationmode = "";
	
	// Function to calculate displacement
	const canvas = document.getElementById("myCanvas");
	const ctx = canvas.getContext("2d");
	const output = document.getElementById("out");

function calculateDisplacement(time, dampingRatio, naturalFrequency, u, v) {
		if(dampingRatio < 1 &&  dampingRatio > 0    ) { // Underdamped

vibrationmode = '<u><span style="color: blue;">Underdamped SYSTEM</span></u>';
			
			const dampedFrequency = naturalFrequency * Math.sqrt(1 - dampingRatio * dampingRatio);
			const C1 = u;
			const C2 = (v + dampingRatio * naturalFrequency * u) / 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 =u;
			const C2 = v + naturalFrequency *u;
			return Math.exp(-naturalFrequency * time) * (C1 + C2 * time);
		} else  if(dampingRatio > 1)   { // Overdamped

vibrationmode = "Overdamped";
			const omega1 = naturalFrequency * (dampingRatio - Math.sqrt(dampingRatio * dampingRatio - 1));
			const omega2 = naturalFrequency * (dampingRatio + Math.sqrt(dampingRatio * dampingRatio - 1));
			const C1 = u * (omega1 / (omega2 - omega1));
			const C2 = u * (omega2 / (omega2 - omega1));
			return C1 * Math.exp(omega1 * time) + C2 * Math.exp(omega2 * time);
		    } else  if(dampingRatio === 0)   {
		    
	 
		    vibrationmode = '<u><span style="color: red;">UNdamped SYSTEM</span></u>';
		    const dampedFrequency = naturalFrequency  ;
			const C1 = u;
			const C2 = (v + dampingRatio * naturalFrequency * u) / dampedFrequency;
			return Math.exp(-dampingRatio * naturalFrequency * time) * (C1 * Math.cos(dampedFrequency * time) + C2 * Math.sin(dampedFrequency * time));
		 }
	}

function showInfo() {
		var html = "Vibration mode: "+ vibrationmode + "<br/>";
 
		html += "Damping Ratio ( ξ ) : " + dampingRatio.toFixed(5) + "<br/>";
		html += "Natural Frequency (ωn): " + naturalFrequency.toFixed(5) + "<br/>";
		html += "Natural Period (T): " + (2 * Math.PI / naturalFrequency).toFixed(5) + "<br/>";
		html += "Time ( t ): " + time.toFixed(2) + "<br/>";
		html += "Displacement ( u ) : " + displacement.toFixed(5) + "<br/>";
		output.innerHTML = html;
	}

function drawQuadFrame(displacement){
		var x=100, y=50, H = 150, W=150; 
		var massPosition=x+displacement;
		
		    // Frame columns
		ctx.lineWidth=1;
		ctx.beginPath();
		ctx.strokeStyle = "blue ";
		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.strokeStyle = "blue ";
		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.strokeStyle = "blue ";
		ctx.lineWidth=6;
		ctx.moveTo(massPosition, y); 
		ctx.lineTo(massPosition+W, y);
		ctx.stroke();
	}
	
	//plot time vs displacement (Amplitude)
		
	function plotVerWave() {
    ctx.beginPath();
    ctx.strokeStyle = "red";
    ctx.lineWidth = 1;

const scaleX = 70;               // Horizontal scaling for displacement
    const scaleY = 400 / endTime;   // Vertical scaling for time (downward)

for (let i = 0; i < timeSet.length; i++) {
        const x = 500 + displacementSet[i] * scaleX; // center horizontally
        const y = 50 + timeSet[i] * scaleY;          // move downward with time

if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
    }
    ctx.stroke();

// Time (vertical) axis
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    for (let i = 0; i < timeSet.length; i++) {
                const x = 500  ;
                const y = 50 + timeSet[i] * scaleY;           
                if (i === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
               } 
    
    
    
    //ctx.moveTo(500, 50); // start from top
   // ctx.lineTo(500, 50 + endTime * scaleY); // draw down
    ctx.stroke();
}

function plotHorWave() {
	
	        ctx.beginPath();
            ctx.strokeStyle = "red";
            ctx.lineWidth=1;

const scaleX = 400/endTime;
            const scaleY = 70;

for (let i = 0; i < timeSet.length; i++) {
                const x = 100 + timeSet[i] * scaleX;
                const y = 300 - displacementSet[i] * scaleY;              
                if (i === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
               }   
            ctx.stroke();
            
            //time X-axis line 
            
            ctx.beginPath();
            ctx.strokeStyle = "black";
            ctx.lineWidth=1;            
             
            for (let i = 0; i < timeSet.length; i++) {
                 const x = 100 + timeSet[i] * scaleX;
               
                const y = 300  ;             
                if (i === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
               }
            ctx.stroke();
        }

// Clear previous data and canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
   let    timeSet= [];
   let   displacementSet = [];
	
	// Animation loop

function animate() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		
		displacement = calculateDisplacement(time, dampingRatio, naturalFrequency, u, v);
		
		timeSet.push(time);
        displacementSet.push(displacement);
		
		
		showInfo();
		drawQuadFrame(displacement * 40);
		plotVerWave();
		plotHorWave();
	 
		
		// Increment time

time += timeStep;
		if(time <= endTime) {
			requestAnimationFrame(animate);
		}
	}
	animate();
	}
	</script>
</body>

</html>