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

windy rope

This commit is contained in:
“chrisshank” 2024-12-03 19:40:27 -08:00
parent a7421f9eab
commit 4e2ece8f01
2 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
demo/sticky-html-rope.html
View File

@ -26,9 +26,17 @@
inset: 0 0 0 0; inset: 0 0 0 0;
pointer-events: none; pointer-events: none;
} }
button {
margin: 1rem;
background-color: black;
font-size: 2rem;
border-radius: 5px;
}
</style> </style>
</head> </head>
<body> <body>
<button id="wind">☁️</button>
<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="300" y="105" width="30" height="30"></folk-shape> <folk-shape id="box2" x="300" y="105" width="30" height="30"></folk-shape>
<folk-shape id="box3" x="200" y="150" width="30" height="30"></folk-shape> <folk-shape id="box3" x="200" y="150" width="30" height="30"></folk-shape>
@ -40,6 +48,29 @@
<script type="module"> <script type="module">
import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-rope.ts'; import '../src/standalone/folk-rope.ts';
let timeout = -1;
let isBlowing = false;
const ropes = document.querySelectorAll('folk-rope');
const randomInt = (multiplier, adjust = 0) => Math.floor(Math.random() * multiplier) + adjust;
const updateGravity = (gravity) => ropes.forEach((rope) => (rope.gravity = gravity));
function simulateWind() {
updateGravity({ x: randomInt(5000), y: randomInt(5000) });
timeout = setTimeout(simulateWind, randomInt(1000, 200));
}
wind.addEventListener('click', () => {
if (isBlowing) {
clearTimeout(timeout);
updateGravity({ x: 0, y: 3000 });
wind.textContent = '☁️';
} else {
simulateWind();
wind.textContent = '🌬️';
}
isBlowing = !isBlowing;
});
</script> </script>
</body> </body>
</html> </html>

8
src/folk-rope.ts
View File

@ -42,6 +42,14 @@ export class FolkRope extends FolkBaseConnection {
return this.#points; return this.#points;
} }
get gravity() {
return this.#gravity;
}
set gravity(gravity) {
this.#gravity = gravity;
}
#stroke = ''; #stroke = '';
get stroke() { get stroke() {
return this.#stroke; return this.#stroke;