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

12
demo/wiggly.html
View File

@ -16,8 +16,8 @@
} }
fc-geometry { fc-geometry {
border: 1px solid black; background-color: black;
border-radius: 3px; border-radius: 10%;
} }
fc-rope { fc-rope {
@ -29,9 +29,13 @@
</style> </style>
</head> </head>
<body> <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="300" y="105">Hello World</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="#box2"></fc-rope>
<fc-rope source="#box1" target="#box3"></fc-rope>
<fc-rope source="#box1" target="#box4"></fc-rope>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; 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 { 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() { get triggers() {
return this.#triggers; return this.#triggers;
} }
@ -11,20 +11,20 @@ export class EventPropagator extends FolkConnection {
this.#triggers = triggers; this.#triggers = triggers;
} }
#expression = ""; #expression = '';
#function = new Function(); #function = new Function();
get expression() { get expression() {
return this.#expression; return this.#expression;
} }
set expression(expression) { set expression(expression) {
this.#expression = expression; this.#expression = expression;
this.#function = new Function("$source", "$target", "$event", expression); this.#function = new Function('$source', '$target', '$event', expression);
} }
constructor() { constructor() {
super(); super();
this.expression = this.getAttribute("expression") || ""; this.expression = this.getAttribute('expression') || '';
} }
override observeSource() { override observeSource() {

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

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