WebAssembly acceleration: simulating the physics of coffee cooling

WebAssembly Acceleration: Simulating Coffee Cooling with Physical Calculations

Coffee cooling is a classic heat transfer problem governed by Newton's Law of Cooling. Traditional frontend implementations using JavaScript often experience lag when handling complex computations in such simulations. WebAssembly changes this landscape with its near-native execution efficiency, enabling browsers to smoothly process scientific calculations.

Mathematical Expression of Newton's Law of Cooling

The coffee cooling process follows Newton's Law of Cooling:

T(t) = T_env + (T_initial - T_env) * e^(-kt)

Where:

• T(t) is the temperature at time t
• T_env is the ambient temperature
• T_initial is the initial temperature
• k is the cooling coefficient
• t is time

Implementing this calculation in JavaScript requires extensive floating-point operations. For example, simulating temperature changes at 1,000 time points:

function simulateCoolingJS(T_env, T_initial, k, steps) {
  const results = [];
  for (let t = 0; t < steps; t++) {
    const temp = T_env + (T_initial - T_env) * Math.exp(-k * t);
    results.push(temp);
  }
  return results;
}

When steps exceed 100,000, the JavaScript version shows noticeable lag on mobile devices.

WebAssembly Implementation Solution

The computational core is written in Rust and compiled to WebAssembly using wasm-pack:

// cooling.rs
#[wasm_bindgen]
pub fn simulate_cooling(
    t_env: f64,
    t_initial: f64,
    k: f64,
    steps: usize
) -> Vec<f64> {
    (0..steps).map(|t| {
        t_env + (t_initial - t_env) * (-k * t as f64).exp()
    }).collect()
}

Compilation command:

wasm-pack build --target web

Frontend Integration and Performance Comparison

Loading and using the WASM module in a webpage:

import init, { simulate_cooling } from './pkg/cooling.js';

async function runSimulation() {
  await init();
  
  // Simulation parameters
  const params = {
    envTemp: 25,   // Ambient temperature 25°C
    initialTemp: 90, // Initial temperature 90°C
    k: 0.01,       // Cooling coefficient
    steps: 1e6     // 1 million calculations
  };

  // JavaScript version
  console.time('JS');
  const jsResults = simulateCoolingJS(
    params.envTemp,
    params.initialTemp,
    params.k,
    params.steps
  );
  console.timeEnd('JS');

  // WASM version
  console.time('WASM');
  const wasmResults = simulate_cooling(
    params.envTemp,
    params.initialTemp,
    params.k,
    params.steps
  );
  console.timeEnd('WASM');
}

Actual performance comparison (MacBook Pro M1):

• JavaScript: Average 420ms
• WebAssembly: Average 68ms

Visualization Implementation

Temperature change curve using Canvas:

function drawChart(canvasId, data) {
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext('2d');
  
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Draw axes
  ctx.beginPath();
  ctx.moveTo(50, 30);
  ctx.lineTo(50, canvas.height - 50);
  ctx.lineTo(canvas.width - 30, canvas.height - 50);
  ctx.stroke();

  // Draw curve
  ctx.beginPath();
  const stepSize = (canvas.width - 80) / data.length;
  data.forEach((temp, i) => {
    const x = 50 + i * stepSize;
    const y = canvas.height - 50 - (temp * 3);
    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
  });
  ctx.strokeStyle = '#ff6b6b';
  ctx.stroke();
}

Multithreading Acceleration Solution

For more complex scenarios (e.g., simulating multiple cups simultaneously), use Web Workers + WASM:

// worker.js
importScripts('./pkg/cooling.js');

self.onmessage = async (e) => {
  await init(e.data.wasmUrl);
  const results = simulate_cooling(
    e.data.envTemp,
    e.data.initialTemp,
    e.data.k,
    e.data.steps
  );
  postMessage(results);
};

// Main thread
const worker = new Worker('./worker.js');
worker.postMessage({
  wasmUrl: './pkg/cooling_bg.wasm',
  envTemp: 25,
  initialTemp: 90,
  k: 0.01,
  steps: 1e6
});

worker.onmessage = (e) => {
  drawChart('coolingCanvas', e.data);
};

Optimization Techniques in Practical Applications

1. Memory Management: Pre-allocate memory to avoid frequent resizing

#[wasm_bindgen]
pub fn create_buffer(size: usize) -> Vec<f64> {
    Vec::with_capacity(size)
}

2. SIMD Instruction Optimization:

#[cfg(target_arch = "wasm32")]
use std::arch::wasm32::*;

#[wasm_bindgen]
pub fn simd_cooling(/* ... */) {
    // Use v128 type for SIMD operations
}

3. Mixed Precision Calculation: Use f32 for parts that don't require high precision

Browser Compatibility Handling

Dynamic loading strategy for compatibility:

async function loadWasm() {
  try {
    const module = await WebAssembly.compileStreaming(
      fetch('cooling.wasm')
    );
    return await WebAssembly.instantiate(module);
  } catch (e) {
    console.warn('WASM loading failed, falling back to JS');
    return {
      exports: {
        simulate_cooling: simulateCoolingJS
      }
    };
  }
}

Extended Application Scenarios

Similar physical simulations can adopt this architecture:

• Heat conduction simulation
• Simple fluid dynamics models
• Particle system trajectories
• Spring-mass systems

For example, implementing a multi-object heat exchange model:

#[wasm_bindgen]
pub struct ThermalSystem {
    objects: Vec<ThermalObject>,
}

#[wasm_bindgen]
impl ThermalSystem {
    pub fn new(count: usize) -> Self {
        ThermalSystem {
            objects: (0..count).map(|_| ThermalObject::default()).collect()
        }
    }
    
    pub fn simulate_step(&mut self, dt: f64) {
        // Implement heat exchange logic
    }
}