166 lines
4.9 KiB
HTML
166 lines
4.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Event Propagator w/ device gravity</title>
|
|
<style>
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100%;
|
|
position: relative;
|
|
margin: 0;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
folk-shape {
|
|
background-color: black;
|
|
border-radius: 5px;
|
|
color: white;
|
|
padding: 0px 5px;
|
|
z-index: 10;
|
|
}
|
|
|
|
button {
|
|
margin: 1rem;
|
|
background-color: black;
|
|
border-radius: 5px;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button onclick="enableGravity()">Enable Gravity</button>
|
|
<div>
|
|
<label for="gravityScale">Gravity Scale:</label>
|
|
<input type="range" id="gravityScale" min="0" max="6000" value="3000" step="100" />
|
|
<span id="gravityScaleValue">3000</span>
|
|
</div>
|
|
<p>Alpha: <span id="alpha">0</span></p>
|
|
<p>Beta: <span id="beta">0</span></p>
|
|
<p>Gamma: <span id="gamma">0</span></p>
|
|
<p>Gravity: <span id="gravity">0, 3000</span></p>
|
|
|
|
<folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
|
|
<folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
|
|
<folk-event-propagator
|
|
source="#box1"
|
|
target="#box2"
|
|
trigger="click"
|
|
expression="textContent: to.textContent + '!'"
|
|
></folk-event-propagator>
|
|
|
|
<folk-shape id="box3" x="350" y="200" width="30" height="30"></folk-shape>
|
|
<folk-shape id="box4" x="500" y="250" width="30" height="30"></folk-shape>
|
|
<folk-event-propagator
|
|
source="#box3"
|
|
target="#box4"
|
|
trigger="transform"
|
|
expression="y: from.x,
|
|
rotation: from.x"
|
|
></folk-event-propagator>
|
|
|
|
<folk-gizmos></folk-gizmos>
|
|
|
|
<script type="module">
|
|
import { requestAnimationFrame } from '@lib';
|
|
import { Vector } from '@lib/Vector';
|
|
|
|
import '@labs/standalone/folk-shape.ts';
|
|
import '@labs/standalone/folk-event-propagator.ts';
|
|
import { Gizmos } from '@lib/folk-gizmos';
|
|
|
|
document.addEventListener(
|
|
'touchmove',
|
|
(event) => {
|
|
event.preventDefault();
|
|
},
|
|
{ passive: false },
|
|
);
|
|
|
|
const ropes = Array.from(document.querySelectorAll('folk-event-propagator'));
|
|
let orientationEvent;
|
|
|
|
const gravitySlider = document.getElementById('gravityScale');
|
|
const gravityScaleValue = document.getElementById('gravityScaleValue');
|
|
|
|
// Initialize gravity scale from slider's initial value
|
|
gravityScale = parseInt(gravitySlider.value);
|
|
gravityScaleValue.textContent = gravityScale;
|
|
|
|
gravitySlider.addEventListener('input', (e) => {
|
|
gravityScaleValue.textContent = gravitySlider.value;
|
|
});
|
|
|
|
function tick() {
|
|
requestAnimationFrame(tick);
|
|
|
|
if (orientationEvent === undefined) return;
|
|
|
|
window.alpha.textContent = Math.round(orientationEvent.alpha);
|
|
window.beta.textContent = Math.round(orientationEvent.beta);
|
|
window.gamma.textContent = Math.round(orientationEvent.gamma);
|
|
|
|
// Convert angles to radians
|
|
const beta = orientationEvent.beta * (Math.PI / 180); // Pitch (x-axis)
|
|
const gamma = orientationEvent.gamma * (Math.PI / 180); // Roll (y-axis)
|
|
|
|
// Calculate the downward vector on the screen plane
|
|
const downwardVector = { x: Math.sin(gamma), y: Math.sin(beta) };
|
|
|
|
// Compute magnitude and normalized direction
|
|
const magnitude = Vector.mag(downwardVector);
|
|
const direction = Vector.normalized(downwardVector);
|
|
|
|
// Scale the vector by gravity constant
|
|
const gravity = Vector.scale(direction, magnitude * gravitySlider.valueAsNumber);
|
|
|
|
window.gravity.textContent = `${Math.round(gravity.x)}, ${Math.round(gravity.y)}`;
|
|
|
|
// Draw the gravity vector
|
|
const center = {
|
|
x: window.innerWidth / 2,
|
|
y: window.innerHeight / 2,
|
|
};
|
|
|
|
Gizmos.clear();
|
|
Gizmos.vector(
|
|
center,
|
|
{
|
|
x: center.x + gravity.x / 10,
|
|
y: center.y + gravity.y / 10,
|
|
},
|
|
{ color: 'grey', width: 3, size: 15 },
|
|
);
|
|
|
|
ropes.forEach((rope) => {
|
|
rope.gravity = gravity;
|
|
});
|
|
}
|
|
|
|
tick();
|
|
|
|
function onDeviceOrientation(e) {
|
|
orientationEvent = e;
|
|
}
|
|
|
|
window.enableGravity = async function enableGravity() {
|
|
if (DeviceOrientationEvent.requestPermission) {
|
|
const permission = await DeviceOrientationEvent.requestPermission();
|
|
|
|
if (permission === 'granted') {
|
|
console.info('Permission granted');
|
|
} else {
|
|
console.warn('Permission for device orientation rejected', permission);
|
|
}
|
|
}
|
|
|
|
window.addEventListener('deviceorientation', onDeviceOrientation);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|