jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

demo update

This commit is contained in:
“chrisshank” 2024-12-20 14:48:27 -08:00
parent c8b6f04ef4
commit da91f5991c
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/index.ts
View File

@ -1,3 +1,7 @@
// Base elements and components
// Due to a circular dependency between folk element and folk observer this should be exported first
export * from './folk-element';
// Observers (move these to the top since they're dependencies) // Observers (move these to the top since they're dependencies)
export * from './client-rect-observer'; export * from './client-rect-observer';
export * from './folk-observer'; export * from './folk-observer';
@ -21,9 +25,6 @@ export * from './rAF';
export * from './collision'; export * from './collision';
export * from './EffectIntegrator'; export * from './EffectIntegrator';
// Base elements and components
export * from './folk-element';
// WebGL utilities // WebGL utilities
export * from './webgl'; export * from './webgl';

29
website/canvas/event-propagators-with-device-gravity.html
View File

@ -28,7 +28,6 @@
button { button {
margin: 1rem; margin: 1rem;
background-color: black; background-color: black;
font-size: 2rem;
border-radius: 5px; border-radius: 5px;
color: white; color: white;
} }
@ -39,6 +38,8 @@
<p>Alpha: <span id="alpha">0</span></p> <p>Alpha: <span id="alpha">0</span></p>
<p>Beta: <span id="beta">0</span></p> <p>Beta: <span id="beta">0</span></p>
<p>Gamma: <span id="gamma">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="box1" x="100" y="100" width="30" height="30"></folk-shape>
<folk-shape id="box2" x="200" y="350">Hello World</folk-shape> <folk-shape id="box2" x="200" y="350">Hello World</folk-shape>
<folk-event-propagator <folk-event-propagator
@ -59,6 +60,7 @@ rotation: from.x"
></folk-event-propagator> --> ></folk-event-propagator> -->
<script type="module"> <script type="module">
import {requestAnimationFrame} from '@lib'
import '@labs/standalone/folk-shape.ts'; import '@labs/standalone/folk-shape.ts';
import '@labs/standalone/folk-event-propagator.ts'; import '@labs/standalone/folk-event-propagator.ts';
@ -67,15 +69,30 @@ rotation: from.x"
const ropes = Array.from(document.querySelectorAll('folk-event-propagator')); const ropes = Array.from(document.querySelectorAll('folk-event-propagator'));
function onDeviceOrientation(e) { let orientationEvent;
console.log(event.alpha, event.beta, event.gamma)
window.alpha.textContent = event.alpha; /**
window.beta.textContent = event.beta; *
window.gamma.textContent = event.gamma; * 0 -> 0, 3000
* 270 -> 3000, 0
*/
function tick() {
if (orientationEvent === undefined) return;
window.alpha.textContent = orientationEvent.alpha.toFixed(2);
window.beta.textContent = orientationEvent.beta.toFixed(2);
window.gamma.textContent = orientationEvent.gamma.toFixed(2);
// if (event.alpha) { // if (event.alpha) {
// // ropes.forEach(rope => { rope.gravity = { x: 0, y: 0} }) // // ropes.forEach(rope => { rope.gravity = { x: 0, y: 0} })
// } // }
requestAnimationFrame(tick);
}
tick();
function onDeviceOrientation(e) {
orientationEvent = e;
} }
window.enableGravity = async function enableGravity() { window.enableGravity = async function enableGravity() {