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; border: 2px solid black;
} }
distance-field { folk-distance-field {
position: absolute; position: absolute;
inset: 0; inset: 0;
} }
</style> </style>
</head> </head>
<body> <body>
<distance-field></distance-field>
<script type="module"> <script type="module">
import '../src/standalone/distance-field.ts'; import '../src/standalone/folk-distance-field.ts';
import '../src/standalone/folk-shape.ts';
const d = document.querySelector('distance-field');
const d = document.createElement('folk-distance-field');
const geometries = []; const geometries = [];
const now = performance.now(); const now = performance.now();
@ -43,11 +40,11 @@
geo.y = 100 * j + Math.floor(Math.random() * 45); geo.y = 100 * j + Math.floor(Math.random() * 45);
geo.width = geo.height = 45; geo.width = geo.height = 45;
geometries.push(geo); geometries.push(geo);
d.append(geo); d.appendChild(geo);
} }
} }
console.log(performance.now() - now); console.log(performance.now() - now);
document.body.appendChild(d);
// function tick() { // function tick() {
// window.requestAnimationFrame(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); border: 2px solid rgba(0, 0, 0, 0.5);
} }
distance-field { folk-distance-field {
position: absolute; position: absolute;
inset: 0; inset: 0;
} }
</style> </style>
</head> </head>
<body> <body>
<distance-field> <folk-distance-field>
<folk-shape x="100" y="100" width="50" height="50"></folk-shape> <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="200" width="50" height="50"></folk-shape>
<folk-shape x="100" y="300" 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="400" y="250" width="60" height="90"></folk-shape>
<folk-shape x="200" y="400" width="100" height="100"></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> <folk-shape x="500" y="100" width="30" height="70"></folk-shape>
</distance-field> </folk-distance-field>
<script type="module"> <script type="module">
import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-shape.ts';
import '../src/standalone/distance-field.ts'; import '../src/standalone/folk-distance-field.ts';
</script> </script>
</body> </body>
</html> </html>

8
demo/propagator-toolbar.html
View File

@ -24,14 +24,14 @@
border: 2px solid rgba(0, 0, 0, 0.5); border: 2px solid rgba(0, 0, 0, 0.5);
} }
distance-field { folk-distance-field {
position: absolute; position: absolute;
inset: 0; inset: 0;
} }
</style> </style>
</head> </head>
<body> <body>
<distance-field> <folk-distance-field>
<folk-shape id="box1" x="100" y="100" width="50" height="50"></folk-shape> <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="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> <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="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="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> <folk-shape id="box7" x="500" y="100" width="30" height="70"></folk-shape>
</distance-field> </folk-distance-field>
<folk-toolbar></folk-toolbar> <folk-toolbar></folk-toolbar>
<script type="module"> <script type="module">
import '../src/standalone/folk-shape.ts'; 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'; import '../src/standalone/folk-toolbar.ts';
</script> </script>
</body> </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. * 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 * Previous CPU-based implementation: github.com/folk-canvas/folk-canvas/commit/fdd7fb9d84d93ad665875cad25783c232fd17bcc
*/ */
export class DistanceField extends HTMLElement { export class FolkDistanceField extends HTMLElement {
static tagName = 'distance-field'; static tagName = 'folk-distance-field';
private textures: WebGLTexture[] = []; private textures: WebGLTexture[] = [];
@ -223,7 +223,7 @@ export class DistanceField extends HTMLElement {
// Clear the texture with a large initial distance // Clear the texture with a large initial distance
gl.viewport(0, 0, this.canvas.width, this.canvas.height); 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); gl.clear(gl.COLOR_BUFFER_BIT);
// Use the seed shader program // 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('pointerdown', this);
this.addEventListener('keydown', this); this.addEventListener('keydown', this);
this.setAttribute('tabindex', '0');
this.#shadow.adoptedStyleSheets = [styles, this.#dynamicStyles]; 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. // 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();