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

rename distance field, fix sdf demo

This commit is contained in:
“chrisshank” 2024-12-03 16:37:25 -08:00
parent e8d430372c
commit 8e1a8a7691
7 changed files with 19 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo/[tests] distance-field.html
View File

@ -19,20 +19,17 @@
border: 2px solid black;
}
distance-field {
folk-distance-field {
position: absolute;
inset: 0;
}
</style>
</head>
<body>
<distance-field></distance-field>
<script type="module">
import '../src/standalone/distance-field.ts';
import '../src/standalone/folk-shape.ts';
const d = document.querySelector('distance-field');
import '../src/standalone/folk-distance-field.ts';
const d = document.createElement('folk-distance-field');
const geometries = [];
const now = performance.now();
@ -43,11 +40,11 @@
geo.y = 100 * j + Math.floor(Math.random() * 45);
geo.width = geo.height = 45;
geometries.push(geo);
d.append(geo);
d.appendChild(geo);
}
}
console.log(performance.now() - now);
document.body.appendChild(d);
// function tick() {
// window.requestAnimationFrame(tick);

8
demo/distance-field-visualization.html
View File

@ -24,14 +24,14 @@
border: 2px solid rgba(0, 0, 0, 0.5);
}
distance-field {
folk-distance-field {
position: absolute;
inset: 0;
}
</style>
</head>
<body>
<distance-field>
<folk-distance-field>
<folk-shape x="100" y="100" width="50" height="50"></folk-shape>
<folk-shape x="100" y="200" width="50" height="50"></folk-shape>
<folk-shape x="100" y="300" width="50" height="50"></folk-shape>
@ -39,11 +39,11 @@
<folk-shape x="400" y="250" width="60" height="90"></folk-shape>
<folk-shape x="200" y="400" width="100" height="100"></folk-shape>
<folk-shape x="500" y="100" width="30" height="70"></folk-shape>
</distance-field>
</folk-distance-field>
<script type="module">
import '../src/standalone/folk-shape.ts';
import '../src/standalone/distance-field.ts';
import '../src/standalone/folk-distance-field.ts';
</script>
</body>
</html>

8
demo/propagator-toolbar.html
View File

@ -24,14 +24,14 @@
border: 2px solid rgba(0, 0, 0, 0.5);
}
distance-field {
folk-distance-field {
position: absolute;
inset: 0;
}
</style>
</head>
<body>
<distance-field>
<folk-distance-field>
<folk-shape id="box1" x="100" y="100" width="50" height="50"></folk-shape>
<folk-shape id="box2" x="100" y="200" width="50" height="50"></folk-shape>
<folk-shape id="box3" x="100" y="300" width="50" height="50"></folk-shape>
@ -39,13 +39,13 @@
<folk-shape id="box5" x="400" y="250" width="60" height="90"></folk-shape>
<folk-shape id="box6" x="200" y="400" width="100" height="100"></folk-shape>
<folk-shape id="box7" x="500" y="100" width="30" height="70"></folk-shape>
</distance-field>
</folk-distance-field>
<folk-toolbar></folk-toolbar>
<script type="module">
import '../src/standalone/folk-shape.ts';
import '../src/standalone/distance-field.ts';
import '../src/standalone/folk-distance-field.ts';
import '../src/standalone/folk-toolbar.ts';
</script>
</body>

6
src/distance-field.ts → src/folk-distance-field.ts
View File

@ -7,8 +7,8 @@ import { FolkShape } from './folk-shape.ts';
* It renders shapes as seed points and computes the distance from each pixel to the nearest seed point.
* Previous CPU-based implementation: github.com/folk-canvas/folk-canvas/commit/fdd7fb9d84d93ad665875cad25783c232fd17bcc
*/
export class DistanceField extends HTMLElement {
static tagName = 'distance-field';
export class FolkDistanceField extends HTMLElement {
static tagName = 'folk-distance-field';
private textures: WebGLTexture[] = [];
@ -223,7 +223,7 @@ export class DistanceField extends HTMLElement {
// Clear the texture with a large initial distance
gl.viewport(0, 0, this.canvas.width, this.canvas.height);
gl.clearColor(0.0, 0.0, 0.0, DistanceField.MAX_DISTANCE);
gl.clearColor(0.0, 0.0, 0.0, FolkDistanceField.MAX_DISTANCE);
gl.clear(gl.COLOR_BUFFER_BIT);
// Use the seed shader program

1
src/folk-shape.ts
View File

@ -328,7 +328,6 @@ export class FolkShape extends HTMLElement {
this.addEventListener('pointerdown', this);
this.addEventListener('keydown', this);
this.setAttribute('tabindex', '0');
this.#shadow.adoptedStyleSheets = [styles, this.#dynamicStyles];
// Ideally we would creating these lazily on first focus, but the resize handlers need to be around for delegate focus to work.

3
src/standalone/distance-field.ts
View File

@ -1,3 +0,0 @@
import { DistanceField } from '../distance-field';
DistanceField.define();

3
src/standalone/folk-distance-field.ts Normal file
View File

@ -0,0 +1,3 @@
import { FolkDistanceField } from '../folk-distance-field';
FolkDistanceField.define();