Skip to content

Instantly share code, notes, and snippets.

@cfjedimaster

cfjedimaster/Untitled-1.html

Forked from anonymous/Untitled-1.html
Created July 31, 2014 15:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cfjedimaster/0d614422b66075d90c21 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cfjedimaster/0d614422b66075d90c21 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Untitled-1.html
<a href id="reload">clicky</a>
<script type="text/javascript">
$(document).ready(function(){
function getUsers(){
$.ajax({
type: "GET",
url:"../components/user.cfc?method=GET",
dataType: "json",
data: {
objectid: 0
},
success: function (data) {
$("##userTableBody").html("");
$.each(data,function(i,obj){
var div_data= 'obj.blah';
$(div_data).appendTo('#userTableBody');
});
}
});
}
$('#reload').click(getUsers);
getUsers();
});
</script>
@ahmadrawana98-svg
Copy link

ahmadrawana98-svg commented Nov 22, 2025

<!doctype html>

<title>Stage-1 Flight Simulator Prototype</title> <style> html,body{height:100%;margin:0;background:#f5f7fb;color:#072635;font-family:system-ui,Segoe UI,Roboto,Arial;overflow:hidden} #ui{position:absolute;left:12px;top:12px;z-index:20;max-width:360px} .panel{background:rgba(255,255,255,0.85);backdrop-filter:blur(6px);padding:10px;border-radius:8px;margin-bottom:8px;box-shadow:0 2px 10px rgba(16,24,32,0.06)} button,select{padding:6px 8px;border-radius:6px;border:none;background:#1e6fbf;color:white;cursor:pointer} .small{font-size:13px;color:#154b5c} #hud{position:absolute;right:12px;top:12px;text-align:right;z-index:20} #instruments{position:absolute;left:12px;bottom:12px;z-index:20} .inst{background:rgba(255,255,255,0.9);padding:8px;border-radius:8px;color:#072635;font-family:monospace;margin-bottom:6px;box-shadow:0 2px 8px rgba(16,24,32,0.05)} .msg{color:#b00020;font-weight:700} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r155/three.min.js"></script>a <script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
Stage-1 — Flight Prototype
Controls: W/S pitch • A/D roll • Q/E yaw • R/F throttle • G flaps • L gear • Space pause
Reset Cessna-like (light) Jet (fast)
This is a compact, original prototype demonstrating basic flight physics, procedural terrain, and instruments. It's not a copy of any commercial product.
Airspeed: 0 kt
Altitude: 0 m
Pitch: 0° • Roll: 0°
<script> /* Stage-1 Flight Simulator Prototype - Single-file - Uses THREE (global) and SimplexNoise (global) - Basic flight physics, procedural terrain, HUD */ // Safety: ensure libs loaded if (typeof THREE === 'undefined' || typeof SimplexNoise === 'undefined') { document.body.innerHTML = '
Required libraries failed to load. Check network or CDN.
'; throw new Error('Missing libs'); } /* ---------------- Scene & Renderer ---------------- */ const W = window.innerWidth, H = window.innerHeight; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(W, H); renderer.shadowMap.enabled = false; document.body.appendChild(renderer.domElement); const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); // daytime sky const camera = new THREE.PerspectiveCamera(60, W / H, 0.1, 20000); camera.position.set(0, 10, -30); /* ---------------- Lights ---------------- */ const hemi = new THREE.HemisphereLight(0xbfd1ff, 0x202030, 0.9); scene.add(hemi); const sun = new THREE.DirectionalLight(0xffffff, 0.9); sun.position.set(100, 200, 100); scene.add(sun); /* ---------------- Terrain (procedural) ---------------- */ const simplex = new SimplexNoise(); const terrainSize = 2048; const terrainSeg = 128; const terrainGeo = new THREE.PlaneGeometry(terrainSize, terrainSize, terrainSeg, terrainSeg); terrainGeo.rotateX(-Math.PI/2); const heightScale = 120; for (let i = 0; i < terrainGeo.attributes.position.count; i++) { const x = terrainGeo.attributes.position.getX(i); const z = terrainGeo.attributes.position.getZ(i); const n = simplex.noise2D(x * 0.0009, z * 0.0009) * 0.6 + 0.5 * simplex.noise2D(x * 0.0022, z * 0.0022); terrainGeo.attributes.position.setY(i, n * heightScale); } terrainGeo.computeVertexNormals(); const terrainMat = new THREE.MeshStandardMaterial({ color: 0x556644, roughness: 1, metalness: 0 }); const terrain = new THREE.Mesh(terrainGeo, terrainMat); terrain.receiveShadow = false; scene.add(terrain); // Water plane const waterGeo = new THREE.PlaneGeometry(terrainSize, terrainSize, 1, 1); waterGeo.rotateX(-Math.PI/2); const water = new THREE.Mesh(waterGeo, new THREE.MeshStandardMaterial({ color: 0x1e90ff, transparent: true, opacity: 0.55 })); water.position.y = -12; scene.add(water); /* ---------------- Aircraft ---------------- */ // Procedural simple airplane function makePlane() { const g = new THREE.Group(); const body = new THREE.Mesh(new THREE.CylinderGeometry(0.9, 1.2, 10, 10), new THREE.MeshStandardMaterial({ color: 0xddeeff })); body.rotation.z = Math.PI / 2; g.add(body); const wing = new THREE.Mesh(new THREE.BoxGeometry(12, 0.3, 3), new THREE.MeshStandardMaterial({ color: 0xcfe8ff })); wing.position.set(2, 0, 0); g.add(wing); const tail = new THREE.Mesh(new THREE.BoxGeometry(3, 0.2, 1.2), new THREE.MeshStandardMaterial({ color: 0xcfe8ff })); tail.position.set(-4.6, 1.0, 0); tail.rotation.z = 0.25; g.add(tail); const nose = new THREE.Mesh(new THREE.ConeGeometry(0.8, 2, 10), new THREE.MeshStandardMaterial({ color: 0xa6cfff })); nose.rotation.z = Math.PI / 2; nose.position.set(5, 0, 0); g.add(nose); return g; } const planeMesh = makePlane(); scene.add(planeMesh); /* ---------------- Flight state & aircraft parameters ---------------- */ const state = { pos: new THREE.Vector3(0, 200, 0), vel: new THREE.Vector3(60, 0, 0), // m/s quat: new THREE.Quaternion(), angVel: new THREE.Vector3(0, 0, 0), }; const presets = { c172: { mass: 1200, wingArea: 16.2, wingSpan: 11, CL0: 0.2, CLalpha: 5.2, Cd0: 0.025, propMax: 16000, maxSpeed: 80, rollRate: 50 * Math.PI/180 }, jet: { mass: 8000, wingArea: 70, wingSpan: 30, CL0: 0.15, CLalpha: 4.0, Cd0: 0.02, propMax: 120000, maxSpeed: 230, rollRate: 18 * Math.PI/180 } }; let aircraft = Object.assign({}, presets.c172); const controls = { pitch: 0, roll: 0, yaw: 0, throttle: 0.6, flaps: 0, gear: true, crashed: false }; /* ---------------- HUD elements ---------------- */ const airspeedEl = document.getElementById('airspeed'); const altEl = document.getElementById('altitude'); const horizonEl = document.getElementById('horizon'); /* ---------------- Input handling ---------------- */ const key = {}; window.addEventListener('keydown', (e) => { key[e.key.toLowerCase()] = true; if (e.code === 'Space') { e.preventDefault(); togglePause(); } }); window.addEventListener('keyup', (e) => { key[e.key.toLowerCase()] = false; }); document.getElementById('resetBtn').addEventListener('click', resetSim); document.getElementById('preset').addEventListener('change', (ev) => { aircraft = Object.assign({}, presets[ev.target.value || 'c172']); resetSim(); }); /* ---------------- Aerodynamics ---------------- */ function airDensityAtAltitude(alt) { const seaRho = 1.225; const scale = 8500; return seaRho * Math.exp(-alt / scale); } function computeAerodynamics(state, controls) { const vel = state.vel.clone(); const speed = vel.length(); const forward = new THREE.Vector3(1, 0, 0).applyQuaternion(state.quat); const up = new THREE.Vector3(0, 1, 0).applyQuaternion(state.quat); // velocity in body coords const velLocal = state.vel.clone().applyQuaternion(state.quat.clone().conjugate()); const vx = velLocal.x, vz = velLocal.y; const AoA = Math.atan2(vz, Math.max(0.0001, vx)); const rho = airDensityAtAltitude(state.pos.y); const q = 0.5 * rho * speed * speed; const CL = aircraft.CL0 + aircraft.CLalpha * AoA * (1 - controls.flaps * 0.4); const lift = q * aircraft.wingArea * CL; const Cd = aircraft.Cd0 + (CL * CL) / (Math.PI * aircraft.wingSpan * (aircraft.wingSpan / Math.sqrt(aircraft.wingArea))); const drag = q * aircraft.wingArea * Cd; const thrust = aircraft.propMax * controls.throttle; const weight = aircraft.mass * 9.80665; const liftWorld = up.clone().multiplyScalar(lift); const dragWorld = vel.clone().normalize().multiplyScalar(-drag || 0); const thrustWorld = forward.clone().multiplyScalar(thrust); const weightWorld = new THREE.Vector3(0, -weight, 0); return { liftWorld, dragWorld, thrustWorld, weightWorld, speed, AoA, rho, q, CL, Cd }; } /* ---------------- Terrain sampling ---------------- */ function sampleTerrainHeight(x, z) { const half = terrainSize / 2; const u = (x + half) / terrainSize; const v = (z + half) / terrainSize; const cols = terrainSeg + 1, rows = terrainSeg + 1; let ix = Math.floor(u * (cols - 1)), iz = Math.floor(v * (rows - 1)); ix = Math.max(0, Math.min(cols - 2, ix)); iz = Math.max(0, Math.min(rows - 2, iz)); const pos = terrain.geometry.attributes.position; const getY = (col, row) => pos.getY(row * cols + col); const y00 = getY(ix, iz), y10 = getY(ix + 1, iz), y01 = getY(ix, iz + 1), y11 = getY(ix + 1, iz + 1); const fu = (u * (cols - 1)) - ix, fv = (v * (rows - 1)) - iz; const y0 = y00 * (1 - fu) + y10 * fu; const y1 = y01 * (1 - fu) + y11 * fu; const y = y0 * (1 - fv) + y1 * fv; return (typeof y === 'number') ? y : -100; } /* ---------------- Physics integrator ---------------- */ const FIXED_DT = 1 / 60; let accumulator = 0; let lastTime = performance.now(); let paused = false; function integrateStep() { if (controls.crashed) return; // map keys to control inputs const pitchInput = (key['w'] ? 1 : 0) - (key['s'] ? 1 : 0); const rollInput = (key['d'] ? 1 : 0) - (key['a'] ? 1 : 0); const yawInput = (key['e'] ? 1 : 0) - (key['q'] ? 1 : 0); if (key['r']) controls.throttle = Math.min(1, controls.throttle + 0.5 * FIXED_DT); if (key['f']) controls.throttle = Math.max(0, controls.throttle - 0.5 * FIXED_DT); if (key['g']) { if (!key.__glock) { controls.flaps = controls.flaps > 0 ? 0 : 1; key.__glock = true; } } else key.__glock = false; if (key['l']) { if (!key.__llock) { controls.gear = !controls.gear; key.__llock = true; } } else key.__llock = false; const eff = Math.min(1, state.vel.length() / 20); const pitchRate = pitchInput * 1.2 * eff; const rollRate = rollInput * aircraft.rollRate * eff; const yawRate = yawInput * 0.8 * eff; state.angVel.x += pitchRate * FIXED_DT; state.angVel.z += rollRate * FIXED_DT; state.angVel.y += yawRate * FIXED_DT; // damping state.angVel.multiplyScalar(0.995); // integrate orientation const ang = state.angVel.clone().multiplyScalar(FIXED_DT); const q = new THREE.Quaternion().setFromEuler(new THREE.Euler(ang.x, ang.y, ang.z, 'ZYX')); state.quat.multiply(q).normalize(); // aerodynamics const aero = computeAerodynamics(state, controls); // sum forces const total = new THREE.Vector3(); total.add(aero.liftWorld); total.add(aero.dragWorld); total.add(aero.thrustWorld); total.add(aero.weightWorld); const acc = total.clone().multiplyScalar(1 / aircraft.mass); state.vel.add(acc.multiplyScalar(FIXED_DT)); // clamp speed to keep stable const maxSpeed = Math.max(aircraft.maxSpeed * 1.6, 400); if (state.vel.length() > maxSpeed) state.vel.setLength(maxSpeed); state.pos.add(state.vel.clone().multiplyScalar(FIXED_DT)); // ground collision const groundY = sampleTerrainHeight(state.pos.x, state.pos.z); if (state.pos.y <= groundY + 1.2) { if (state.vel.length() > 8) { controls.throttle = 0; state.vel.set(0, 0, 0); state.pos.y = groundY + 1.2; controls.crashed = true; } else { state.pos.y = groundY + 1.2; state.vel.y = 0; } } return aero; } /* ---------------- Graphics update ---------------- */ function updateGraphics() { planeMesh.position.copy(state.pos); planeMesh.quaternion.copy(state.quat); // camera chase const back = new THREE.Vector3(-18, 6, 0).applyQuaternion(state.quat); const camTarget = state.pos.clone().add(back); camera.position.lerp(camTarget, 0.12); camera.lookAt(state.pos); } function updateInstruments(info) { const speed = Math.round(info.speed * 1.94384); // m/s -> knots airspeedEl.textContent = 'Airspeed: ' + speed + ' kt'; altEl.textContent = 'Altitude: ' + Math.round(state.pos.y) + ' m'; const e = new THREE.Euler().setFromQuaternion(state.quat, 'ZYX'); const pitchDeg = Math.round(THREE.MathUtils.radToDeg(e.x)); const rollDeg = Math.round(THREE.MathUtils.radToDeg(e.z)); horizonEl.textContent = `Pitch: ${pitchDeg}° • Roll: ${rollDeg}°`; } /* ---------------- Animation loop (fixed-step) ---------------- */ function animate(now) { requestAnimationFrame(animate); const frameTime = Math.min(0.05, (now - lastTime) / 1000); lastTime = now; if (!paused) { accumulator += frameTime; const maxSteps = 5; let steps = 0; while (accumulator >= FIXED_DT && steps < maxSteps) { const aero = integrateStep(); accumulator -= FIXED_DT; steps++; // optional: update instruments per physics step updateInstruments(aero); } } updateGraphics(); renderer.render(scene, camera); } /* ---------------- Utilities & reset ---------------- */ function resetSim() { state.pos.set(0, 200, 0); state.vel.set(60, 0, 0); state.quat.identity(); state.angVel.set(0, 0, 0); controls.throttle = 0.6; controls.flaps = 0; controls.gear = true; controls.crashed = false; paused = false; airspeedEl.textContent = 'Airspeed: 0 kt'; altEl.textContent = 'Altitude: 0 m'; horizonEl.textContent = 'Pitch: 0° • Roll: 0°'; } function togglePause() { paused = !paused; } /* ---------------- Start ---------------- */ resetSim(); lastTime = performance.now(); requestAnimationFrame(animate); /* ---------------- Resize ---------------- */ window.addEventListener('resize', () => { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); }); /* Small debug: show crash message in HUD */ setInterval(() => { if (controls.crashed) { if (!document.getElementById('crashMsg')) { const msg = document.createElement('div'); msg.id = 'crashMsg'; msg.className = 'panel'; msg.innerHTML = '
CRASHED — press Reset
'; msg.style.position = 'absolute'; msg.style.right = '12px'; msg.style.top = '80px'; msg.style.zIndex = 30; document.body.appendChild(msg); } } else { const m = document.getElementById('crashMsg'); if (m) m.remove(); } }, 500); </script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment