Computational Physics with JavaScript

JavaScript, with its accessibility and powerful visualization capabilities, is a valuable tool for computational physics, especially in educational contexts and interactive web applications.

Blog> Categories: Scientific

Table of Contents

Why JavaScript for Computational Physics? #

Computational physics is a field that uses numerical algorithms to solve problems in physics for which a quantitative theory already exists. The advent of powerful computing resources and programming languages has enabled physicists to simulate complex systems that would be otherwise intractable. While languages like Python, Fortran, and C++ are traditionally used in this domain, JavaScript offers unique advantages, particularly in the context of web-based simulations and visualizations.

JavaScript, the language of the web, provides several compelling benefits for computational physics:

  1. Accessibility: It runs in any modern web browser, making it easy to share and visualize results.
  2. Interactivity: JavaScript, combined with HTML and CSS, can create interactive simulations that enhance understanding.
  3. Visualization: Libraries like D3.js, Three.js, and p5.js enable sophisticated visualizations directly in the browser.

Applications of JavaScript in Computational Physics #

JavaScript, with its ability to run on any modern web browser and powerful visualization capabilities, is highly versatile for various applications in computational physics. Here are some key areas where JavaScript excels:

1. Educational Tools and Simulations #

JavaScript is ideal for creating interactive educational tools and virtual labs that help students visualize and experiment with complex physical concepts such as harmonic motion, electric fields, and wave interference.

2. Web-Based Data Visualization #

Libraries like D3.js and Plotly enable detailed and interactive visualizations of scientific data. JavaScript can plot graphs, create 3D models, and build dashboards that allow real-time data interaction, making it easier to analyze and present research findings. For more details check out Using JavaScript for Data Visualization in Scientific Applications.

3. Scientific Computing and Simulations #

JavaScript can handle Monte Carlo simulations, agent-based models, and other computational tasks, especially with advancements in JavaScript engines and WebAssembly. These simulations are useful in statistical physics, epidemiology, and ecology. For more details look at the article: Scientific Simulation in JavaScript.

4. Real-Time Collaborative Tools #

JavaScript powers real-time collaborative platforms such as Scribbler Notebooks and online collaboration environments like Github. These tools enable multiple researchers to work together, sharing data and visualizations seamlessly.

5. Virtual and Augmented Reality #

With libraries like Three.js and WebXR, JavaScript can create immersive VR and AR experiences for exploring physical phenomena, such as visualizing atomic structures or electromagnetic fields in 3D space.

6. Citizen Science Projects #

JavaScript enables web-based platforms for citizen science, allowing the public to participate in data collection and interactive simulations, enhancing public engagement and awareness of scientific research.

We will look at a few examples of using JavaScript for computational physics. You can experiment with a few of them using this notebook: Notebook for Physics Visualization.

Example 1: Solving Ordinary Differential Equations (ODEs) #

To illustrate the use of JavaScript in computational physics, let’s start with some basic numerical methods: solving ordinary differential equations (ODEs) and performing simple simulations.

Consider the simple harmonic oscillator, described by the differential equation:

d^2x/dt^2 + ω^2*x = 0

This can be broken down into two first-order ODEs:

dx/dt = v dv/dt = -ω^2*x

We can solve these using the Euler method, a straightforward numerical approach. Here is a JavaScript example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Harmonic Oscillator</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const omega = 1.0;
            let x = 1.0;  // Initial position
            let v = 0.0;  // Initial velocity
            const dt = 0.01;
            const numSteps = 1000;
            let positions = [];

            for (let i = 0; i < numSteps; i++) {
                let newX = x + v * dt;
                let newV = v - omega * omega * x * dt;
                x = newX;
                v = newV;
                positions.push(x);
            }

            console.log(positions);
        });
    </script>
</head>
<body>
    <h1>Simple Harmonic Oscillator Simulation</h1>
    <p>Open the console to see the results.</p>
</body>
</html>

This script initializes the position and velocity of the oscillator and iteratively updates them using the Euler method. The results are logged to the console. For more details look at: Exploring Differential Equations Solving with JavaScript.

Example 2: Visualizing the Harmonic Oscillator #

To better understand the oscillator’s behavior, we can visualize the position over time using an HTML canvas and JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Harmonic Oscillator Visualization</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const canvas = document.getElementById('oscillatorCanvas');
            const ctx = canvas.getContext('2d');
            const omega = 1.0;
            let x = 1.0;
            let v = 0.0;
            const dt = 0.01;
            const numSteps = 1000;
            const positions = [];

            for (let i = 0; i < numSteps; i++) {
                let newX = x + v * dt;
                let newV = v - omega * omega * x * dt;
                x = newX;
                v = newV;
                positions.push(x);
            }

            ctx.beginPath();
            ctx.moveTo(0, canvas.height / 2);

            for (let i = 0; i < positions.length; i++) {
                ctx.lineTo(i * canvas.width / positions.length, canvas.height / 2 - positions[i] * 100);
            }

            ctx.stroke();
        });
    </script>
</head>
<body>
    <h1>Harmonic Oscillator Visualization</h1>
    <canvas id="oscillatorCanvas" width="800" height="400"></canvas>
</body>
</html>

In this script, we draw the oscillator’s position over time on an HTML canvas. This visual representation helps in understanding the periodic motion of the oscillator.

Example 3: Particle System with Three.js #

For more advanced simulations, such as those involving particle systems or complex fields, JavaScript libraries like Three.js can be invaluable. Below is an example of using Three.js to simulate and visualize a simple particle system.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Particle System Simulation</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            const renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            const geometry = new THREE.BufferGeometry();
            const particles = 5000;
            const positions = new Float32Array(particles * 3);

            for (let i = 0; i < positions.length; i++) {
                positions[i] = (Math.random() - 0.5) * 10;
            }

            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
            const material = new THREE.PointsMaterial({ color: 0x888888 });
            const particleSystem = new THREE.Points(geometry, material);
            scene.add(particleSystem);

            camera.position.z = 5;

            function animate() {
                requestAnimationFrame(animate);
                particleSystem.rotation.x += 0.001;
                particleSystem.rotation.y += 0.002;
                renderer.render(scene, camera);
            }

            animate();
        });
    </script>
</head>
<body>
</body>
</html>

This example creates a 3D particle system with particles randomly distributed in space. The particle system rotates continuously, providing a dynamic visualization.

Sure! Here are a few more examples that demonstrate the power of JavaScript in computational physics, covering various concepts like projectile motion, chaotic systems, and wave propagation.

Example 4: Projectile Motion Simulation #

Projectile motion is a classic physics problem. We can simulate the trajectory of a projectile under the influence of gravity using JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Projectile Motion Simulation</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const canvas = document.getElementById('projectileCanvas');
            const ctx = canvas.getContext('2d');

            const g = 9.81; // Gravity (m/s^2)
            let angle = 45 * Math.PI / 180; // Launch angle (degrees to radians)
            let speed = 50; // Initial speed (m/s)
            let vx = speed * Math.cos(angle);
            let vy = speed * Math.sin(angle);
            const dt = 0.1;
            let x = 0;
            let y = canvas.height;

            function drawProjectile() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.beginPath();
                ctx.arc(x, y, 5, 0, 2 * Math.PI);
                ctx.fill();
                x += vx * dt;
                y -= vy * dt;
                vy -= g * dt;
                if (y >= canvas.height) {
                    y = canvas.height;
                    vx = 0;
                    vy = 0;
                }
                if (x < canvas.width && y >= 0) {
                    requestAnimationFrame(drawProjectile);
                }
            }

            drawProjectile();
        });
    </script>
</head>
<body>
    <h1>Projectile Motion Simulation</h1>
    <canvas id="projectileCanvas" width="800" height="400"></canvas>
</body>
</html>

This example calculates the trajectory of a projectile and animates its motion on an HTML canvas.

Example 5: Double Pendulum (Chaotic System) #

The double pendulum is a well-known example of a chaotic system. Simulating its motion can demonstrate how sensitive these systems are to initial conditions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Double Pendulum Simulation</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const canvas = document.getElementById('doublePendulumCanvas');
            const ctx = canvas.getContext('2d');

            const g = 9.81;
            const length1 = 200;
            const length2 = 200;
            const mass1 = 10;
            const mass2 = 10;
            let angle1 = Math.PI / 2;
            let angle2 = Math.PI / 2;
            let angle1Vel = 0;
            let angle2Vel = 0;
            const dt = 0.05;

            function drawPendulum() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                const x1 = length1 * Math.sin(angle1);
                const y1 = length1 * Math.cos(angle1);
                const x2 = x1 + length2 * Math.sin(angle2);
                const y2 = y1 + length2 * Math.cos(angle2);

                ctx.beginPath();
                ctx.moveTo(canvas.width / 2, canvas.height / 2);
                ctx.lineTo(canvas.width / 2 + x1, canvas.height / 2 + y1);
                ctx.lineTo(canvas.width / 2 + x2, canvas.height / 2 + y2);
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(canvas.width / 2 + x1, canvas.height / 2 + y1, 10, 0, 2 * Math.PI);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(canvas.width / 2 + x2, canvas.height / 2 + y2, 10, 0, 2 * Math.PI);
                ctx.fill();

                let num1 = -g * (2 * mass1 + mass2) * Math.sin(angle1);
                let num2 = -mass2 * g * Math.sin(angle1 - 2 * angle2);
                let num3 = -2 * Math.sin(angle1 - angle2) * mass2;
                let num4 = angle2Vel * angle2Vel * length2 + angle1Vel * angle1Vel * length1 * Math.cos(angle1 - angle2);
                let den = length1 * (2 * mass1 + mass2 - mass2 * Math.cos(2 * angle1 - 2 * angle2));
                let angle1Acc = (num1 + num2 + num3 * num4) / den;

                num1 = 2 * Math.sin(angle1 - angle2);
                num2 = (angle1Vel * angle1Vel * length1 * (mass1 + mass2) + g * (mass1 + mass2) * Math.cos(angle1) + angle2Vel * angle2Vel * length2 * mass2 * Math.cos(angle1 - angle2));
                den = length2 * (2 * mass1 + mass2 - mass2 * Math.cos(2 * angle1 - 2 * angle2));
                let angle2Acc = (num1 * num2) / den;

                angle1Vel += angle1Acc * dt;
                angle2Vel += angle2Acc * dt;
                angle1 += angle1Vel * dt;
                angle2 += angle2Vel * dt;

                requestAnimationFrame(drawPendulum);
            }

            drawPendulum();
        });
    </script>
</head>
<body>
    <h1>Double Pendulum Simulation</h1>
    <canvas id="doublePendulumCanvas" width="800" height="600"></canvas>
</body>
</html>

This script simulates and visualizes a double pendulum, highlighting its chaotic nature.

Example 6: Wave Propagation #

Wave propagation can be visualized by simulating the wave equation. Here, we demonstrate a simple one-dimensional wave propagation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wave Propagation Simulation</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const canvas = document.getElementById('waveCanvas');
            const ctx = canvas.getContext('2d');

            const numPoints = 200;
            const wave = new Float32Array(numPoints).fill(0);
            const wavePrev = new Float32Array(numPoints).fill(0);
            const c = 1;  // Wave speed
            const dt = 0.1;
            const dx = 1;
            const damping = 0.99;

            // Initialize wave with a pulse in the middle
            wave[Math.floor(numPoints / 2)] = 1;

            function drawWave() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.beginPath();
                for (let i = 1; i < numPoints - 1; i++) {
                    let waveNew = 2 * wave[i] - wavePrev[i] + (c * c * dt * dt / (dx * dx)) * (wave[i + 1] - 2 * wave[i] + wave[i - 1]);
                    waveNew *= damping;
                    wavePrev[i] = wave[i];
                    wave[i] = waveNew;
                }

                for (let i = 0; i < numPoints; i++) {
                    ctx.lineTo(i * canvas.width / numPoints, canvas.height / 2 - wave[i] * 100);
                }

                ctx.stroke();
                requestAnimationFrame(drawWave);
            }

            drawWave();
        });
    </script>
</head>
<body>
    <h1>Wave Propagation Simulation</h1>
    <canvas id="waveCanvas" width="800" height="400"></canvas>
</body>
</html>

This example simulates the propagation of a wave along a string, showcasing the dynamic nature of wave mechanics.

These examples illustrate the versatility of JavaScript in simulating and visualizing various physical phenomena. By leveraging the power of JavaScript and HTML5, complex concepts in computational physics can be made accessible and engaging through interactive web-based simulations. This approach not only aids in understanding but also allows for broader dissemination and experimentation with physical models.