Breadcrumbs

Spring-Mass_Hysteresis_Simulation/

About

Sample Learning Goals

1. Physics Equations:
  - \section*{Physics Equations} The physics equations used in the simulation include: \subsection*{Hooke's Law} \begin{equation} F = -k \cdot x \end{equation} \subsection*{Damping Force} \begin{equation} F_d = -b \cdot v \end{equation} \subsection*{Gravitational Force} \begin{equation} F_g = m \cdot g \end{equation} \subsection*{Net Force} \begin{equation} F_{net} = F_{spring1} + F_{spring2} + F_{external} + F_{gravity} \end{equation} \subsection*{Acceleration} \begin{equation} a = \frac{F_{net}}{m} \end{equation} \subsection*{Velocity Update} \begin{equation} v = v + a \cdot dt \end{equation} \subsection*{Position Update} \begin{equation} x = x + v \cdot dt \end{equation}
Activities to Try with the Simulation:
1. Exploring Hysteresis:
  - Vary the external force and observe how the mass oscillates. Note the difference in the path of deformation and recovery.
  - Adjust the damping factor to see how it affects the energy loss and the hysteresis loop.
2. Effect of Mass:
  - Change the mass of the system and observe how it affects the oscillation frequency and amplitude.
3. Gravity Variations:
  - Experiment with different gravity values (positive and negative) to understand the impact of gravity on the spring-mass system.
4. Spring Natural Length:
  - Modify the natural length of the springs and see how it affects the system's equilibrium position and oscillation behavior.
5. Force vs. Position Graph:
  - Plot the force vs. position graph to visualize the hysteresis loop. This can be done by recording the position and force data over time.
These activities will help in understanding the concept of hysteresis and the dynamics of a V-shaped spring-mass system.

For Teachers

Exploring Hysteresis with a V-Shaped Spring-Mass System Simulation

Understanding complex physical phenomena can be made easier and more engaging through interactive simulations. Today, we delve into the hysteresis effect using a V-shaped spring-mass system simulation, inspired by the work of Christopher Ong. This simulation allows you to visualize how hysteresis occurs in such a system, illustrating the energy loss typically observed due to this phenomenon.

What is Hysteresis?

Hysteresis is a phenomenon where the state of a system depends not only on its current conditions but also on its history. In other words, the path of deformation and recovery of the system differs, leading to energy dissipation, usually in the form of heat. This is commonly seen in magnetic materials, elastic hysteresis in rubbers, and mechanical systems like the one we are exploring here.

The Simulation

This simulation models a V-shaped spring-mass system, where the mass is connected to two springs anchored at fixed points. By adjusting various parameters, you can see how the system behaves under different conditions and observe the hysteresis effect in action.

Features of the Simulation

External Force Adjustment: Apply an upward force to the mass to see how it affects the system.
Spring Natural Length: Change the natural length of the springs to see how the system's equilibrium changes.
Mass: Adjust the mass of the object to observe how inertia influences the system's behavior.
Damping Factor: Modify the damping factor to see how energy dissipation affects the system.
Gravity: Change the gravity to simulate different gravitational environments.

How to Use the Simulation

Play/Pause: Start or pause the simulation.
Step: Advance the simulation step by step to observe gradual changes.
Reset: Reset all parameters to their default values.

The controls are intuitive and allow for a hands-on approach to learning about hysteresis.

Description of the Simulation

This simulation demonstrates the hysteresis effect in a V-shaped spring-mass system based on the work of Christopher Ong. For more details, you can refer to the original paper.

Hysteresis occurs when the path of deformation and recovery of the spring-mass system differ, leading to energy loss typically as heat. The simulation models the forces acting on the mass, including spring forces, damping, external force, and gravity.

Created by This email address is being protected from spambots. You need JavaScript enabled to view it. using Claude (initial code) and GPT-4 (finishing the code).

Visual Representation

Code Implementation

Here's a snippet of the code that powers the simulation. Feel free to explore and modify it to suit your learning needs.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spring-Mass Hysteresis Simulation</title>
    <style>
        /* Styling for the body, container, and canvas */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            background-color: rgb(110, 100, 100);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            width: 100%;
            box-sizing: border-box;
            position: relative;
        }
        canvas {
            border: 1px solid #ddd;
            width: 100%;
            height: 60vh;
        }
        .controls {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 10px;
        }
        .controls h1 {
            margin: 0;
            margin-right: 20px;
            font-size: 1.5em;
            color: white;
            flex: 1 100%;
            text-align: center;
        }
        button {
            margin-right: 5px;
            margin-top: 5px;
            display: inline-block;
        }
        .slider-container {
            margin-bottom: 10px;
            flex: 1 100%;
            text-align: center;
        }
        .slider-container label {
            display: inline-block;
            width: 150px;
        }
        .slider-container input {
            width: 50%;
        }
        .value-display {
            display: inline-block;
            width: 50px;
            text-align: right;
        }
        #info {
            position: relative;
            text-align: center;
            color: white;
            margin-bottom: 10px;
        }
        #footer {
            margin-top: 10px;
            color: rgb(110, 100, 100);
            text-align: center;
        }
        #description {
            color: rgb(110, 100, 100);
            text-align: center;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        @media (max-width: 768px) {
            .slider-container label {
                width: auto;
                display: block;
                margin-bottom: 5px;
            }
            .slider-container input {
                width: 100%;
            }
            .controls {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Control buttons for play/pause, step, and reset -->
        <div class="controls">
            <h1>Spring-Mass Hysteresis Simulation</h1>
            <div>
                <button id="playPauseBtn">Play</button>
                <button id="stepBtn">Step</button>
                <button id="resetBtn">Reset</button>
            </div>
        </div>
        <!-- Slider for adjusting external force -->
        <div class="slider-container">
            <label for="forceSlider">External Force (Upward):</label>
            <input type="range" id="forceSlider" min="-40" max="40" step="1" value="0">
            <span>Force: <span id="forceValue" class="value-display">0</span></span>
        </div>
        <!-- Slider for adjusting spring natural length -->
        <div class="slider-container">
            <label for="lengthSlider">Spring Natural Length:</label>
            <input type="range" id="lengthSlider" min="50" max="150" step="1" value="100">
            <span>Length: <span id="lengthValue" class="value-display">100</span></span>
        </div>
        <!-- Additional sliders -->
        <div class="slider-container">
            <label for="massSlider">Mass:</label>
            <input type="range" id="massSlider" min="0.5" max="5" step="0.1" value="1">
            <span>Mass: <span id="massValue" class="value-display">1</span></span>
        </div>
        <div class="slider-container">
            <label for="dampingSlider">Damping Factor:</label>
            <input type="range" id="dampingSlider" min="0" max="1" step="0.01" value="0.1">
            <span>Damping: <span id="dampingValue" class="value-display">0.1</span></span>
        </div>
        <div class="slider-container">
            <label for="gravitySlider">Gravity:</label>
            <input type="range" id="gravitySlider" min="-9.81" max="9.81" step="0.1" value="-9.81">
            <span>Gravity: <span id="gravityValue" class="value-display">-9.81</span></span>
        </div>
        <!-- Canvas for drawing the simulation -->
        <canvas id="simCanvas"></canvas>
        <!-- Info section to display time and mass position -->
        <div id="info">Time: 0.00s | Mass Position: (0.00, 0.00)</div>
    </div>

    <!-- Description of the simulation -->
    <div id="description">
        <p>This simulation demonstrates the hysteresis effect in a V-shaped spring-mass system based on the work of Christopher Ong. For more details, you can refer to the <a href="https://pubs.aip.org/aapt/ajp/article-abstract/89/7/663/1056905/Hysteresis-in-a-simple-V-shaped-spring-mass-system?redirectedFrom=fulltext" target="_blank">original paper</a>.</p>
        <p>Hysteresis occurs when the path of deformation and recovery of the spring-mass system differ, leading to energy loss typically as heat.</p>
        <p>The simulation models the forces acting on the mass, including spring forces, damping, external force, and gravity.</p>
    </div>

    <!-- Footer for credits -->
    <div id="footer">
        Created by This email address is being protected from spambots. You need JavaScript enabled to view it. using Claude (initial code) and GPT-4 (finishing the code)
    </div>

    <!-- Google Analytics and Ads scripts -->
    <script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-S9EWRY1CPJ"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-S9EWRY1CPJ');
    </script>

    <script data-ad-client="ca-pub-0121577198857509" async="true" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <script>
        // Get references to HTML elements
        const canvas = document.getElementById('simCanvas');
        const ctx = canvas.getContext('2d');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const stepBtn = document.getElementById('stepBtn');
        const resetBtn = document.getElementById('resetBtn');
        const forceSlider = document.getElementById('forceSlider');
        const forceValue = document.getElementById('forceValue');
        const lengthSlider = document.getElementById('lengthSlider');
        const lengthValue = document.getElementById('lengthValue');
        const massSlider = document.getElementById('massSlider');
        const massValue = document.getElementById('massValue');
        const dampingSlider = document.getElementById('dampingSlider');
        const dampingValue = document.getElementById('dampingValue');
        const gravitySlider = document.getElementById('gravitySlider');
        const gravityValue = document.getElementById('gravityValue');
        const info = document.getElementById('info');

        let isPlaying = false; // Variable to track if the simulation is playing
        let externalForce = 0; // External force acting on the mass
        let massPosition = { x: 0, y: 0 }; // Position of the mass
        let massVelocity = { x: 0, y: 0 }; // Velocity of the mass
        let time = 0; // Simulation time

        // Constants for the spring and mass system
        const k = 0.5; // Spring constant
        let m = 1; // Mass
        let L0 = 100; // Natural length of springs
        let dampingFactor = 0.1; // Damping factor for the system
        let gravity = -9.81; // Gravitational acceleration
        const dt = 0.1; // Time step for the simulation

        // Function to resize canvas dimensions
        function resizeCanvas() {
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
            drawSystem();
        }

        // Function to draw an arrow on the canvas
        function drawArrow(fromx, fromy, tox, toy, color) {
            const headlen = 10; // Length of arrowhead in pixels
            const dx = tox - fromx; // Change in x
            const dy = toy - fromy; // Change in y
            const angle = Math.atan2(dy, dx); // Angle of the arrow
            ctx.strokeStyle = color; // Set arrow color
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Function to draw a spring between two points
        function drawSpring(x1, y1, x2, y2, naturalLength, segments = 20) {
            const dx = x2 - x1; // Change in x
            const dy = y2 - y1; // Change in y
            const length = Math.sqrt(dx * dx + dy * dy); // Length of the spring
            const angle = Math.atan2(dy, dx); // Angle of the spring

            ctx.save(); // Save the current context state
            ctx.translate(x1, y1); // Translate the context to the starting point of the spring
            ctx.rotate(angle); // Rotate the context to align with the spring

            const segmentLength = length / segments; // Length of each segment
            const amplitude = segmentLength / 2; // Amplitude of the zigzag

            ctx.beginPath();
            ctx.moveTo(0, 0);
            for (let i = 1; i <= segments; i++) {
                const x = i * segmentLength;
                const y = (i % 2 === 0 ? 1 : -1) * amplitude;
                ctx.lineTo(x, y);
            }
            // Set the color based on spring length
            if (length < naturalLength) {
                ctx.strokeStyle = 'orange'; // Compression
            } else {
                ctx.strokeStyle = 'yellow'; // Extension
            }
            ctx.stroke();

            ctx.restore(); // Restore the previous context state
        }

        // Function to draw the entire system
        function drawSystem() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
            const centerX = canvas.width / 2; // Center x-coordinate
            const centerY = canvas.height / 2; // Center y-coordinate

            // Draw left spring
            drawSpring(centerX - 100, centerY - 100, centerX + massPosition.x, centerY + massPosition.y, L0);
            // Draw right spring
            drawSpring(centerX + 100, centerY - 100, centerX + massPosition.x, centerY + massPosition.y, L0);

            // Draw the mass
            ctx.beginPath();
            ctx.arc(centerX + massPosition.x, centerY + massPosition.y, 10, 0, 2 * Math.PI);
            ctx.fillStyle = '#f00';
            ctx.fill();

            // Draw anchor points
            ctx.beginPath();
            ctx.arc(centerX - 100, centerY - 100, 5, 0, 2 * Math.PI);
            ctx.arc(centerX + 100, centerY - 100, 5, 0, 2 * Math.PI);
            ctx.fillStyle = '#00f';
            ctx.fill();

            // Draw the external force vector if any
            if (externalForce !== 0) {
                const forceScale = 5; // Scale factor for force visualization
                drawArrow(
                    centerX + massPosition.x,
                    centerY + massPosition.y,
                    centerX + massPosition.x,
                    centerY + massPosition.y - externalForce * forceScale,
                    'purple'
                );
            }
        }

        // Function to update the position of the mass
        function updatePosition() {
            const dx1 = massPosition.x + 100; // Distance from left spring anchor
            const dy1 = massPosition.y + 100; // Distance from left spring anchor
            const dx2 = massPosition.x - 100; // Distance from right spring anchor
            const dy2 = massPosition.y + 100; // Distance from right spring anchor

            const L1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); // Length of left spring
            const L2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); // Length of right spring

            const Fx1 = -k * (L1 - L0) * dx1 / L1; // Force by left spring in x
            const Fy1 = -k * (L1 - L0) * dy1 / L1; // Force by left spring in y
            const Fx2 = -k * (L2 - L0) * dx2 / L2; // Force by right spring in x
            const Fy2 = -k * (L2 - L0) * dy2 / L2; // Force by right spring in y

            const Fx = Fx1 + Fx2; // Total force in x
            const Fy = Fy1 + Fy2 - externalForce - m * gravity; // Total force in y, include external force and gravity

            const ax = Fx / m - dampingFactor * massVelocity.x; // Acceleration in x
            const ay = Fy / m - dampingFactor * massVelocity.y; // Acceleration in y

            massVelocity.x += ax * dt; // Update velocity in x
            massVelocity.y += ay * dt; // Update velocity in y
            massPosition.x += massVelocity.x * dt; // Update position in x
            massPosition.y += massVelocity.y * dt; // Update position in y

            time += dt; // Increment time

            drawSystem(); // Redraw the system
            updateInfo(); // Update the info display
        }

        // Function to update the information display
        function updateInfo() {
            info.textContent = `Time: \){time.toFixed(2)}s | Mass Position: (\({massPosition.x.toFixed(2)}, \){massPosition.y.toFixed(2)})`;
        }

        // Function to toggle the simulation play/pause state
        function toggleSimulation() {
            isPlaying = !isPlaying;
            playPauseBtn.textContent = isPlaying ? 'Pause' : 'Play';
            if (isPlaying) {
                simulationLoop();
            }
        }

        // Simulation loop to update the position continuously
        function simulationLoop() {
            if (isPlaying) {
                updatePosition();
                requestAnimationFrame(simulationLoop);
            }
        }

        // Function to perform a single step of the simulation
        function step() {
            isPlaying = false;
            playPauseBtn.textContent = 'Play';
            updatePosition();
        }

        // Function to reset the simulation to its initial state
        function reset() {
            isPlaying = false;
            playPauseBtn.textContent = 'Play';
            massPosition = { x: 0, y: 0 };
            massVelocity = { x: 0, y: 0 };
            time = 0;
            externalForce = 0;
            forceSlider.value = 0;
            forceValue.textContent = '0';
            L0 = 100;
            lengthSlider.value = 100;
            lengthValue.textContent = '100';
            m = 1;
            massSlider.value = 1;
            massValue.textContent = '1';
            dampingFactor = 0.1;
            dampingSlider.value = 0.1;
            dampingValue.textContent = '0.1';
            gravity = -9.81;
            gravitySlider.value = -9.81;
            gravityValue.textContent = '-9.81';
            drawSystem();
            updateInfo();
        }

        // Event listeners for the buttons and sliders
        playPauseBtn.addEventListener('click', toggleSimulation);
        stepBtn.addEventListener('click', step);
        resetBtn.addEventListener('click', reset);

        forceSlider.addEventListener('input', () => {
            externalForce = parseFloat(forceSlider.value);
            forceValue.textContent = externalForce.toFixed(1);
            drawSystem();
        });

        lengthSlider.addEventListener('input', () => {
            L0 = parseFloat(lengthSlider.value);
            lengthValue.textContent = L0.toFixed(0);
            drawSystem();
        });

        massSlider.addEventListener('input', () => {
            m = parseFloat(massSlider.value);
            massValue.textContent = m.toFixed(1);
            drawSystem();
        });

        dampingSlider.addEventListener('input', () => {
            dampingFactor = parseFloat(dampingSlider.value);
            dampingValue.textContent = dampingFactor.toFixed(2);
            drawSystem();
        });

        gravitySlider.addEventListener('input', () => {
            gravity = parseFloat(gravitySlider.value);
            gravityValue.textContent = gravity.toFixed(2);
            drawSystem();
        });

        // Initial draw and info update
        drawSystem();
        updateInfo();

        // Resize canvas when window is resized
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas(); // Initial resize to set canvas dimensions
    </script>
</body>
</html>

Activities to Try

Observe Hysteresis: Apply an external force and vary it to see how the system’s path differs during loading and unloading.
Damping Effects: Adjust the damping factor and observe how quickly the system returns to equilibrium. Note how energy dissipation changes with different damping values.
Mass Variation: Change the mass and see how inertia affects the system’s response to external forces and damping.
Gravity Simulation: Experiment with different gravity values to simulate the system on different planets or in a microgravity environment.

Conclusion

Interactive simulations like this provide a powerful tool for visualizing and understanding complex physical phenomena. By adjusting parameters and observing outcomes, you gain a deeper insight into concepts like hysteresis and the dynamics of spring-mass systems. Explore the simulation, modify the code, and share your findings!

Feel free to reach out with any questions or feedback on the simulation. Happy learning!

Software Requirements

[SIMU_SWREQ]

Translation

[text]

Research

[text]

Video

[text]

Credits

https://pubs.aip.org/aapt/ajp/article-abstract/89/7/663/1056905/Hysteresis-in-a-simple-V-shaped-spring-mass-system?redirectedFrom=fulltext

Version:

https://claude.ai/chat/6df14257-3c20-46ae-b2e5-86df175e6c07

https://chatgpt.com/c/042b8321-ad20-4b80-867e-3965ce9b985a

https://weelookang.blogspot.com/2024/06/hysteresis-in-simple-v-shaped-spring.html

Other Resources

[text]

end faq

{accordionfaq faqid=accordion3 faqclass="lightnessfaq defaulticon headerbackground headerborder contentbackground contentborder round5"}

5 1 1 1 1 1 1 1 1 1 1 Rating 5.00 (1 Vote)

Details: Written by Loo Kang Wee; Parent Category: 03 Motion & Forces; Category: 02 Dynamics; Published: 27 June 2024; Created: 27 June 2024; Last Updated: 27 June 2024; Hits: 76

RSS Feed

Breadcrumbs

Hysteresis in a simple V-shaped spring-mass system Simulation created using Claude and GPT4o

About

Sample Learning Goals

Activities to Try with the Simulation:

For Teachers

Exploring Hysteresis with a V-Shaped Spring-Mass System Simulation

What is Hysteresis?

The Simulation

Features of the Simulation

How to Use the Simulation

Description of the Simulation

Visual Representation

Code Implementation

Activities to Try

Conclusion

Software Requirements

Translation

Research

Video

Credits

Version:

Other Resources

end faq