Zero External Libraries • Pure Canvas 3D & Web Audio Synth

3D ROTOR HEAD & TELEMETRY SIMULATOR

Custom software-rendered 3D perspective pipeline, rotational matrix solver, swashplate kinematics, real-time PID feedback graphs, and synthesized acoustic blade slap.

Flight Maneuver Presets

Control Inputs

Rotor Head Speed (RPM) 2150 RPM

Collective Pitch +4.5°

Cyclic Roll (Aileron) 0.0°

Cyclic Elevator (Nick) 0.0°

FBL Gyro P-Gain 65%

Render Pipeline Custom 3D Matrix Solver

Framerate / Frame-time 60.0 FPS (16.6ms)

3D Vertices Processed 484 points / frame

Acoustic Synth Buffer WebAudio (Active)

Interactive Orbit (Drag Mouse / Touch to Rotate)

FOV: 45° | Ortho-Perspective

Real-Time Gyro Rate Telemetry & PID Error Stream (60 Hz)

Target Rate Actual Gyro Rate PID Correction

Pure JS 3D Perspective Projection & Web Audio Engine

// 1. 3D Vertex Transformation & Perspective Projection Pipeline

function project3D(x, y, z, rotX, rotY, rotZ, fov, cx, cy) {
  // Rotate Yaw (Z-axis)
  let x1 = x * Math.cos(rotZ) - y * Math.sin(rotZ);
  let y1 = x * Math.sin(rotZ) + y * Math.cos(rotZ);
  // Rotate Pitch (X-axis)
  let y2 = y1 * Math.cos(rotX) - z * Math.sin(rotX);
  let z2 = y1 * Math.sin(rotX) + z * Math.cos(rotX);
  // Rotate Roll (Y-axis)
  let x3 = x1 * Math.cos(rotY) + z2 * Math.sin(rotY);
  let z3 = -x1 * Math.sin(rotY) + z2 * Math.cos(rotY);

  // Perspective Projection
  let distance = 600;
  let scale = fov / (distance + z3);
  return {
    px: x3 * scale + cx,
    py: y2 * scale + cy,
    depth: z3
  };
}

// 2. Web Audio API Blade Slap Synthesizer Node Topology

// Generate White Noise Buffer for Blade Thump
const bufferSize = audioCtx.sampleRate * 0.1;
const noiseBuffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
const output = noiseBuffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) {
  output[i] = Math.random() * 2 - 1;
}

// Dynamically trigger pulses tied to Rotor RPM and Collective Pitch Load
let pulseInterval = 60 / (rpm * 2); // 2-Blade head frequency
let bqFilter = audioCtx.createBiquadFilter();
bqFilter.type = "lowpass";
bqFilter.frequency.value = 150 + (collectiveLoad * 80);