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

more rope

This commit is contained in:
“chrisshank” 2024-11-16 12:57:48 -08:00
parent 8099d4f307
commit fa7c623002
4 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
demo/event-propagator.html
View File

@ -16,19 +16,23 @@
}
fc-geometry {
border: 1px solid black;
border-radius: 3px;
background-color: black;
border-radius: 5px;
color: white;
padding: 0px 5px;
z-index: 10;
}
event-propagator {
display: block;
position: absolute;
inset: 0 0 0 0;
pointer-events: none;
}
</style>
</head>
<body>
<fc-geometry id="box1" x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry id="box1" x="100" y="100" width="30" height="30"></fc-geometry>
<fc-geometry id="box2" x="200" y="300">Hello World</fc-geometry>
<event-propagator
source="#box1"
@ -37,8 +41,8 @@
expression="$target.textContent += '!'"
></event-propagator>
<fc-geometry id="box3" x="150" y="200" width="50" height="50"></fc-geometry>
<fc-geometry id="box4" x="300" y="350" width="50" height="50"></fc-geometry>
<fc-geometry id="box3" x="150" y="200" width="30" height="30"></fc-geometry>
<fc-geometry id="box4" x="300" y="350" width="30" height="30"></fc-geometry>
<event-propagator
source="#box3"
target="#box4"

12
demo/wiggly.html
View File

@ -16,8 +16,8 @@
}
fc-geometry {
border: 1px solid black;
border-radius: 3px;
background-color: black;
border-radius: 10%;
}
fc-rope {
@ -29,9 +29,13 @@
</style>
</head>
<body>
<fc-geometry id="box1" x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry id="box2" x="300" y="105">Hello World</fc-geometry>
<fc-geometry id="box1" x="100" y="100" width="30" height="30"></fc-geometry>
<fc-geometry id="box2" x="300" y="105" width="30" height="30"></fc-geometry>
<fc-geometry id="box3" x="200" y="150" width="30" height="30"></fc-geometry>
<fc-geometry id="box4" x="400" y="100" width="30" height="30"></fc-geometry>
<fc-rope source="#box1" target="#box2"></fc-rope>
<fc-rope source="#box1" target="#box3"></fc-rope>
<fc-rope source="#box1" target="#box4"></fc-rope>
<script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';

12
src/arrows/event-propagator.ts
View File

@ -1,9 +1,9 @@
import { FolkConnection } from "./fc-connection.ts";
import { FolkConnection } from './fc-connection.ts';
export class EventPropagator extends FolkConnection {
static override tagName = "event-propagator";
static override tagName = 'event-propagator';
#triggers = (this.getAttribute("triggers") || "").split(",");
#triggers = (this.getAttribute('triggers') || '').split(',');
get triggers() {
return this.#triggers;
}
@ -11,20 +11,20 @@ export class EventPropagator extends FolkConnection {
this.#triggers = triggers;
}
#expression = "";
#expression = '';
#function = new Function();
get expression() {
return this.#expression;
}
set expression(expression) {
this.#expression = expression;
this.#function = new Function("$source", "$target", "$event", expression);
this.#function = new Function('$source', '$target', '$event', expression);
}
constructor() {
super();
this.expression = this.getAttribute("expression") || "";
this.expression = this.getAttribute('expression') || '';
}
override observeSource() {

42
src/arrows/fc-rope.ts
View File

@ -1,11 +1,6 @@
import { AbstractArrow } from './abstract-arrow.ts';
import { Vertex } from './utils.ts';
//A small scaffold specifically to help me design code pen interactions
//Math extensions
const lerp = (first, second, percentage) => {
return first + (second - first) * percentage;
};
// This is a direct port from https://github.com/guerrillacontra/html5-es6-physics-rope/blob/master/js/microlib.js
const lerp = (first, second, percentage) => first + (second - first) * percentage;
class Vector2 {
static zero() {
@ -43,8 +38,7 @@ class Vector2 {
}
class App {
constructor(window, canvas, context, updateHandler, drawHandler, frameRate = 60) {
this._window = window;
constructor(canvas, context, updateHandler, drawHandler, frameRate = 60) {
this._canvas = canvas;
this._context = context;
this._updateHandler = updateHandler;
@ -59,18 +53,19 @@ class App {
}
start() {
this._lastTime = new Date().getTime();
this._lastTime = 0;
this._currentTime = 0;
this._deltaTime = 0;
this._interval = 1000 / this._frameRate;
this._onRequestAnimationFrame();
this._onRequestAnimationFrame(performance.now());
}
_onRequestAnimationFrame() {
this._window.requestAnimationFrame(this._onRequestAnimationFrame);
_onRequestAnimationFrame(timestamp) {
requestAnimationFrame(this._onRequestAnimationFrame);
this._currentTime = timestamp;
this._currentTime = new Date().getTime();
this._deltaTime = this._currentTime - this._lastTime;
if (this._deltaTime > this._interval) {
@ -215,17 +210,14 @@ class Rope {
}
update(gravity, dt) {
for (let i = 0; i < this._points.length; i++) {
let point = this._points[i];
for (const point of this._points) {
let accel = { ...gravity };
RopePoint.integrate(point, accel, dt, this._prevDelta);
}
for (let iteration = 0; iteration < this._solverIterations; iteration++)
for (let i = 0; i < this._points.length; i++) {
let point = this._points[i];
for (const point of this._points) {
RopePoint.constrain(point);
}
@ -262,7 +254,7 @@ export class FolkRope extends AbstractArrow {
const args = {
start: { x: 100, y: this.#canvas.height / 2 },
end: { x: this.#canvas.width - 100, y: this.#canvas.height / 2 },
resolution: 10,
resolution: 5,
mass: 1,
damping: 0.99,
gravity: { x: 0, y: 3000 },
@ -300,17 +292,17 @@ export class FolkRope extends AbstractArrow {
drawRopePoints(this.#points, args.ropeSize);
};
const app = new App(window, this.#canvas, this.#context, tick, draw);
const app = new App(this.#canvas, this.#context, tick, draw);
app.start();
}
const startingPoint = this.#rope.getPoint(0);
startingPoint.pos.x = sourceRect.right;
startingPoint.pos.y = sourceRect.bottom;
startingPoint.pos.x = sourceRect.x + sourceRect.width / 2;
startingPoint.pos.y = sourceRect.y + sourceRect.height / 2;
const endingPoint = this.#rope.getPoint(-1);
endingPoint.pos.x = targetRect.x;
endingPoint.pos.y = targetRect.bottom;
endingPoint.pos.x = targetRect.x + targetRect.width / 2;
endingPoint.pos.y = targetRect.y + targetRect.height / 2;
}
}