mmelodies
/
mmelodies
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rewrote controller gyro logic

This commit is contained in:
Bailey Stevens 2023-10-04 19:28:58 -04:00
parent a1a3221f4d
commit 47fd696e6f
4 changed files with 72 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,8 @@
{
"recommendations": [
"biomejs.biome",
"jnoortheen.nix-ide",
"ms-vscode.vscode-typescript-tslint-plugin",
"ms-python.python"
]
}

2
.vscode/launch.json vendored
View File

@ -33,7 +33,7 @@
"type": "node-terminal",
"name": "Serve",
"request": "launch",
"command": "npm run serve -- --no-client-overlay",
"command": "npm run serve -- --no-client",
"cwd": "${workspaceFolder}"
}
]

202
src/controller/controller.ts
View File

@ -1,6 +1,7 @@
import * as THREE from 'three';
// @ts-ignore
import { UpdateRequest, Update } from "/proto/mmelodies.proto";
import { radToDeg } from 'three/src/math/MathUtils';
// Subscribe to the audioprocess event
let socket: WebSocket | null = null;
@ -83,7 +84,8 @@ declare global {
}
if (window.AbsoluteOrientationSensor) {
const sensor = new window.AbsoluteOrientationSensor();
// Create an AbsoluteOrientationSensor object
const sensor = new window.AbsoluteOrientationSensor({ frequency: 60, referenceFrame: 'device' });
Promise.all([
// @ts-ignore
@ -93,167 +95,88 @@ if (window.AbsoluteOrientationSensor) {
// @ts-ignore
navigator.permissions.query({ name: "gyroscope" }),
]).then((results: PermissionStatus[]) => {
if (results.every((result) => result.state === "granted")) {
sensor.start();
console.log("started")
// …
} else {
if (!results.every((result) => result.state === "granted")) {
console.log("No permissions to use AbsoluteOrientationSensor.");
}
});
} else {
console.log('AbsoluteOrientationSensor is not supported in this browser.');
}
// Create a renderer
const sceneWidth = 100;
const sceneHeight = 100;
const downscaling = 1; // 1 is no downscaling and higher is more downscaling
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(sceneWidth, sceneHeight);
renderer.setPixelRatio(window.devicePixelRatio / downscaling);
(document.getElementById("gyroBox") || document.body).appendChild(renderer.domElement);
// Create a renderer
const sceneSize = new THREE.Vector3(100, 100, 0);
const canvas = document.createElement("canvas");
canvas.width = sceneSize.x;
canvas.height = sceneSize.y;
// Create a scene
const scene = new THREE.Scene();
// Get the checkbox element
const gyroBox = document.getElementById("gyroBox");
const checkbox = document.getElementById('gyro') as HTMLInputElement;
// Create a camera
const camera = new THREE.PerspectiveCamera(50, sceneWidth / sceneHeight, 0.1, 1000);
// Move the camera backwards
camera.position.y = 2;
// Point the camera towards the origin
camera.lookAt(new THREE.Vector3(0, 0, 0));
(gyroBox || document.body).appendChild(canvas);
gyroBox?.hidden == false;
const canvasCtx = canvas.getContext("2d");
// Define a vector representing the initial state (e.g., pointing up)
let xVec = new THREE.Vector3(1, 0, 0); // x-arrow pointing in positive x-direction
let yVec = new THREE.Vector3(0, 1, 0); // y-arrow pointing in positive y-direction
let zVec = new THREE.Vector3(0, 0, 1); // z-arrow pointing in positive z-direction
// Create an arrow
const length = 0.5;
const origin = new THREE.Vector3(0.5, 0.5, 0);
const up = new THREE.Vector3(0, 0, 1);
// Profiling
let sampleCount = 0; // Number of frames since the last second
let sampleSec = 0; // Time last second was recorded for a frame
// Create an arrow
const origin = new THREE.Vector3(0, 0, 0);
const length = 1;
const xColor = 0xff0000;
const yColor = 0x00ff00;
const zColor = 0x0000ff;
const xArrow = new THREE.ArrowHelper(xVec, origin, length, xColor);
const yArrow = new THREE.ArrowHelper(yVec, origin, length, yColor);
const zArrow = new THREE.ArrowHelper(zVec, origin, length, zColor);
let orientation = new THREE.Quaternion();
// Animation loop
let setFPS = 60; // Desired framerate
let fps = 0; // Startup fps
// Add the arrow to the scene
scene.add(xArrow, yArrow, zArrow);
// Initialize default orientation
let calibratedDirection: THREE.Vector3 | null;
let currentDirection: THREE.Vector3 | null;
let relativeDirection: THREE.Vector3 | null;
// Profiling
let frameTime = 0; // Time last frame was taken
let frameCount = 0; // Number of frames since the last second
let frameSec = 0; // Time last second was recorded for a frame
let sampleTime = 0; // Time last frame was taken
let sampleCount = 0; // Number of frames since the last second
let sampleSec = 0; // Time last second was recorded for a frame
// Animation loop
let setFPS = 60; // Desired framerate
let fps = 0; // Startup fps
let clock = new THREE.Clock();
let delta = 0;
function animate() {
requestAnimationFrame(animate);
delta += clock.getDelta();
if (delta > 1 / fps) {
// Orient and render the cursor
orientCursor();
render();
// Profiling
let currTime = Date.now();
if (currTime - frameTime >= 1000) {
console.log("Frames: " + frameCount)
frameCount = 0;
frameTime = currTime;
const render = (direction: THREE.Vector3 | null) => {
if (!canvasCtx) {
return;
}
else { frameCount++; }
delta %= 1 / fps;
if (!direction) {
direction = up.clone();
}
const line = direction.clone().normalize().multiplyScalar(length).multiply(sceneSize);
const startpoint = origin.clone().multiply(sceneSize);
const endpoint = startpoint.clone().add(line);
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
canvasCtx.beginPath();
canvasCtx.moveTo(startpoint.x, startpoint.y);
canvasCtx.lineTo(endpoint.x, endpoint.y);
canvasCtx.stroke();
const debugBox = document.getElementById("debugData");
if (debugBox) debugBox.textContent = radToDeg(up.angleTo(direction)).toPrecision(3);
}
}
function render() {
// Render the scene with the camera
renderer.render(scene, camera);
}
// Initialize default orientation
let initialOrientation: THREE.Quaternion | null = null;
let relOrientation: THREE.Quaternion | null = null;
function orientCursor() {
if (initialOrientation !== null) {
relOrientation = new THREE.Quaternion().multiplyQuaternions(orientation, initialOrientation?.clone().invert());
}
else {
relOrientation = orientation;
console.log("fallback orientation")
}
// Create a vector for each arrow's initial orientation
let xInit = new THREE.Vector3(1, 0, 0); // x-arrow pointing in positive x-direction
let yInit = new THREE.Vector3(0, 1, 0); // y-arrow pointing in positive y-direction
let zInit = new THREE.Vector3(0, 0, 1); // z-arrow pointing in positive z-direction
// Apply the orientation quaternion to the initial vectors
let xOrient = xInit.clone().applyQuaternion(relOrientation);
let yOrient = yInit.clone().applyQuaternion(relOrientation);
let zOrient = zInit.clone().applyQuaternion(relOrientation);
// Set the direction of the arrows
xArrow.setDirection(xOrient);
yArrow.setDirection(yOrient);
zArrow.setDirection(zOrient);
}
function calibrate() {
if (initialOrientation == null) {
console.log("Oriented");
initialOrientation = orientation;
}
}
// Check if AbsoluteOrientationSensor is defined
if (window.AbsoluteOrientationSensor) {
// Create an AbsoluteOrientationSensor object
const sensor = new window.AbsoluteOrientationSensor({ frequency: 60, referenceFrame: 'device' });
// Add an event listener for sensor readings
sensor.addEventListener('reading', () => {
// Apply the sensor's quaternion to the vector
orientation = new THREE.Quaternion(...sensor.quaternion);
// Normalize the quaternion
orientation.normalize;
let orientation = new THREE.Quaternion(...sensor.quaternion).normalize();
// Set the initial orientation if it's not set already
calibrate();
currentDirection = up.clone().applyQuaternion(orientation);
if (!calibratedDirection) {
calibratedDirection = currentDirection;
console.log("cal", calibratedDirection);
}
relativeDirection = calibratedDirection.clone().sub(currentDirection);
render(relativeDirection);
// Profiling
let currTime = new Date().getTime()
let currTime = new Date().getTime();
if (sampleSec < currTime - 1000) {
console.log("Samples: " + sampleCount)
console.log("Samples:", sampleCount)
sampleCount = 0;
sampleSec = currTime;
}
else { sampleCount++; }
sampleTime = currTime;
});
// Get the button element
const checkbox = document.getElementById('gyro') as HTMLInputElement;
console.log("checkboxgotted: " + checkbox)
// Check if the button was found
if (checkbox) {
// Add a click event listener to the button
@ -262,15 +185,13 @@ if (window.AbsoluteOrientationSensor) {
if (!this.checked) {
sensor.stop();
console.log("stopped");
orientation = new THREE.Quaternion();
fps = 0;
initialOrientation = null;
orientCursor();
render();
render(null);
} else {
// Otherwise, start the sensor
sensor.start();
console.log("started");
calibratedDirection = null;
fps = setFPS;
}
});
@ -279,9 +200,8 @@ if (window.AbsoluteOrientationSensor) {
console.log(checkbox)
}
// Start the animation loop
animate();
render();
// Render the first frame
render(null);
} else {
// Log a message to the console if AbsoluteOrientationSensor is not supported
console.log('AbsoluteOrientationSensor is not supported in this browser.');

3
src/controller/index.html
View File

@ -61,9 +61,10 @@
</div>
</div>
<div class="combo-switch" id="gyroBox">
<div hidden class="combo-switch" id="gyroBox">
<input type="checkbox" id="gyro" name="gyro">
<h3>Gyro</h3>
<div id="debugData"></div>
</div>
</div>
</body>