Flight Control

Developer
Thepheer
Size
5,989 Kb
Views
24,288
  1. Flight Control Previews
  2. Flight Control HTML Codes
  3. Flight Control CSS Codes
  4. Flight Control JS Codes

How do I make an flight control?

What is a flight control? How do you make a flight control? This script and codes were developed by Thepheer on 13 September 2022, Tuesday.

Flight Control Previews
IQ Test

Flight Control - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flight Control</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.2.1/gl-matrix-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flight Control - Script Codes CSS Codes

html { background: #000;
}
canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
div { position: absolute; padding: .75em 1em; white-space: pre; font: .75em/1em 'Consolas', monospace; background: rgba(34, 34, 34, 0.5); color: rgba(255, 255, 255, 0.5);
}
div:nth-of-type(1) { top: 1em; left: 1em;
}
div:nth-of-type(2) { top: 1em; right: 1em;
}
b { font-weight: normal; color: #FFF;
}

Flight Control - Script Codes JS Codes

(function() { 'use strict'; var fmt, hasProp = {}.hasOwnProperty; Math.random = (function(x) { return function() { x ^= x << 13; x ^= x >>> 17; x ^= x << 5; return 1 - (x >>> 0) / 0xffffffff; }; })(Date.now()); this.addEventListener('load', function() { var a_vertex, buffer, canvas, ctrl, fshader, gl, help, i, info, j, keys, now, points, program, ref, render, shaders, ship, u_canvas, u_matrix, vector, vshader, world; document.body.appendChild(canvas = document.createElement('canvas')); if (!(gl = canvas.getContext('experimental-webgl'))) { return alert('WebGL is not supported.'); } document.body.appendChild(help = document.createElement('div')); document.body.appendChild(info = document.createElement('div')); help.innerHTML = "<b>CTRL</b>, <b>SHIFT</b> — Thrust\n <b>A</b>, <b>D</b> — Roll\n <b>S</b>, <b>W</b> — Pitch\n <b>Q</b>, <b>E</b> — Yaw"; keys = new Uint8Array(1000); this.addEventListener('keydown', function(e) { e.preventDefault(); return keys[e.keyCode] = 1; }); this.addEventListener('keyup', function(e) { e.preventDefault(); return keys[e.keyCode] = 0; }); world = { drag: 0.975 }; ship = { pos: vec3.create(), vel: vec3.create(), rot: quat.create() }; ctrl = { value: { thrust: 0.000, roll: 0.000, pitch: 0.000, yaw: 0.000 }, mul: { thrust: 0.001, roll: 0.100, pitch: 0.100, yaw: 0.100 }, smooth: { thrust: 0.750, roll: 0.975, pitch: 0.950, yaw: 0.950 } }; points = new Float32Array(2e6 * 3); vector = vec3.create(); for (i = j = 0, ref = points.length; j < ref; i = j += 3) { while (true) { vec3.set(vector, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1); if (1 >= vec3.sqrLen(vector)) { break; } } points[i++] = vector[0]; points[i++] = vector[1]; points[i++] = vector[2]; } shaders = ["attribute vec3 a_vertex;\nuniform mat4 u_matrix;\nuniform vec2 u_canvas;\nvarying vec4 v_color;\nvoid main() {\n v_color = vec4(1.0);\n gl_Position = u_matrix * vec4(a_vertex, 1.0);\n float s = u_canvas.y / gl_Position.w * 2e-4;\n if(s > 1.0) gl_PointSize = s; else v_color.w = s;\n}", "precision mediump float;\nvarying vec4 v_color;\nvoid main() { gl_FragColor = v_color; }"]; vshader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vshader, shaders[0]); gl.compileShader(vshader); fshader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fshader, shaders[1]); gl.compileShader(fshader); program = gl.createProgram(); gl.attachShader(program, vshader); gl.attachShader(program, fshader); gl.linkProgram(program); gl.useProgram(program); u_canvas = gl.getUniformLocation(program, 'u_canvas'); u_matrix = gl.getUniformLocation(program, 'u_matrix'); a_vertex = gl.getAttribLocation(program, 'a_vertex'); buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW); gl.vertexAttribPointer(a_vertex, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_vertex); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE); gl.clearColor(0.0, 0.0, 0.0, 1.0); now = Date.now(); return (render = function() { var H, MVP, W, delta, fwd, k, ref1, up; requestAnimationFrame(render); delta = (now - (now = Date.now())) * -0.001; W = canvas.clientWidth; H = canvas.clientHeight; if (canvas.width !== W || canvas.height !== H) { gl.viewport(0, 0, canvas.width = W, canvas.height = H); } ref1 = ctrl.value; for (k in ref1) { if (!hasProp.call(ref1, k)) continue; ctrl.value[k] *= ctrl.smooth[k]; } if (keys[17]) { ctrl.value.thrust -= delta; } if (keys[16]) { ctrl.value.thrust += delta; } if (keys[83]) { ctrl.value.pitch -= delta; } if (keys[87]) { ctrl.value.pitch += delta; } if (keys[65]) { ctrl.value.roll -= delta; } if (keys[68]) { ctrl.value.roll += delta; } if (keys[81]) { ctrl.value.yaw -= delta; } if (keys[69]) { ctrl.value.yaw += delta; } quat.rotateZ(ship.rot, ship.rot, ctrl.mul.roll * ctrl.value.roll); quat.rotateX(ship.rot, ship.rot, -ctrl.mul.pitch * ctrl.value.pitch); quat.rotateY(ship.rot, ship.rot, -ctrl.mul.yaw * ctrl.value.yaw); up = vec3.fromValues(0, 1, 0); fwd = vec3.fromValues(0, 0, 1); up = vec3.transformQuat(up, up, ship.rot); fwd = vec3.transformQuat(fwd, fwd, ship.rot); vec3.scale(ship.vel, ship.vel, world.drag); vec3.scaleAndAdd(ship.vel, ship.vel, fwd, ctrl.mul.thrust * ctrl.value.thrust); vec3.add(ship.pos, ship.pos, ship.vel); vec3.add(fwd, ship.pos, fwd); MVP = mat4.mul(mat4.create(), mat4.perspective(mat4.create(), 45 * (Math.PI / 180), W / H, 1e-5, 1e5), mat4.lookAt(mat4.create(), ship.pos, fwd, up)); gl.uniform2f(u_canvas, canvas.width, canvas.height); gl.uniformMatrix4fv(u_matrix, false, MVP); gl.drawArrays(gl.POINTS, 0, points.length / 3); return info.innerHTML = ["Thrust: <b>" + (fmt(ctrl.value.thrust, 4)) + "</b>", "Roll: <b>" + (fmt(ctrl.value.roll, 4)) + "</b>", "Pitch: <b>" + (fmt(ctrl.value.pitch, 4)) + "</b>", "Yaw: <b>" + (fmt(ctrl.value.yaw, 4)) + "</b>", "", "Position", " X: <b>" + (fmt(ship.pos[0], 7)) + "</b>", " Y: <b>" + (fmt(ship.pos[1], 7)) + "</b>", " Z: <b>" + (fmt(ship.pos[2], 7)) + "</b>", "", "Velocity", " X: <b>" + (fmt(ship.vel[0], 7)) + "</b>", " Y: <b>" + (fmt(ship.vel[1], 7)) + "</b>", " Z: <b>" + (fmt(ship.vel[2], 7)) + "</b>", "", "Rotation", " A: <b>" + (fmt(ship.rot[0], 7)) + "</b>", " B: <b>" + (fmt(ship.rot[1], 7)) + "</b>", " C: <b>" + (fmt(ship.rot[2], 7)) + "</b>", " D: <b>" + (fmt(ship.rot[3], 7)) + "</b>"].join('\n'); })(); }); fmt = function(n, digits) { return (n < 0 ? '' : ' ') + n.toFixed(--digits - Math.max(0, 0 | Math.LOG10E * Math.log(Math.abs(n)))); };
}).call(this);
Flight Control - Script Codes
Flight Control - Script Codes
Home Page Home
Developer Thepheer
Username thepheer
Uploaded September 13, 2022
Rating 3
Size 5,989 Kb
Views 24,288
Do you need developer help for Flight Control?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thepheer (thepheer) Script Codes
Name
WebGL shader video processing
100 000 particles
Braille
Strange Attactor
SVG Animation
Emoji Clock
Color Wheel
Audio Visualiser
Fluid Cube
Cylinder
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!