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

prep for service worker

This commit is contained in:
Orion Reed 2024-12-01 06:22:18 -05:00
parent 0f3ee9fa3f
commit a58343a783
2 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/distanceField/distance-field.ts
View File

@ -68,29 +68,10 @@ export class DistanceField extends HTMLElement {
}
private renderDistanceField() {
const imageData = this.offscreenCtx.getImageData(0, 0, this.resolution, this.resolution);
for (let row = 0; row < this.resolution; row++) {
for (let col = 0; col < this.resolution; col++) {
const index = (col * this.resolution + row) * 4;
const distance = this.fields.getDistance(row, col);
const color = this.fields.getColor(row, col);
const maxDistance = 10;
const normalizedDistance = Math.sqrt(distance) / maxDistance;
const baseColor = {
r: (color * 7) % 256,
g: (color * 13) % 256,
b: (color * 19) % 256,
};
imageData.data[index] = baseColor.r * (1 - normalizedDistance);
imageData.data[index + 1] = baseColor.g * (1 - normalizedDistance);
imageData.data[index + 2] = baseColor.b * (1 - normalizedDistance);
imageData.data[index + 3] = 255;
}
}
// Get the computed ImageData from Fields
const imageData = this.fields.generateImageData();
// Put the ImageData onto the offscreen canvas
this.offscreenCtx.putImageData(imageData, 0, 0);
// Draw scaled version to main canvas
@ -164,7 +145,8 @@ export class DistanceField extends HTMLElement {
handleGeometryUpdate = (event: Event) => {
const geometry = event.target as HTMLElement;
const index = Array.from(document.querySelectorAll('fc-geometry')).indexOf(geometry as FolkGeometry);
// TODO: store as array from getgo
const index = Array.from(this.geometries).indexOf(geometry as FolkGeometry);
if (index === -1) return;
const rect = geometry.getBoundingClientRect();
@ -176,16 +158,15 @@ export class DistanceField extends HTMLElement {
];
if (index < this.fields.shapes.length) {
this.updateShape(index, points);
this.fields.updateShape(index, this.transformPoints(points));
} else {
this.addShape(points);
this.fields.addShape(this.transformPoints(points));
}
this.renderDistanceField();
};
updateShape(index: number, points: Vector2[]) {
// Transform each point from screen coordinates to field coordinates
const transformedPoints = points.map((point) => this.transformToFieldCoordinates(point));
this.fields.updateShape(index, transformedPoints);
this.renderDistanceField();
private transformPoints(points: Vector2[]): Vector2[] {
return points.map((point) => this.transformToFieldCoordinates(point));
}
}

37
src/distanceField/fields.ts
View File

@ -39,11 +39,10 @@ export class Fields {
return this.colorField[x][y];
}
addShape(points: Vector2[]) {
const color = Math.floor(Math.random() * 255);
this.shapes.push({ points, color });
addShape(points: Vector2[], color?: number) {
const shapeColor = color ?? Math.floor(Math.random() * 255);
this.shapes.push({ points, color: shapeColor });
this.updateFields();
console.log(this.shapes);
}
removeShape(index: number) {
@ -245,4 +244,34 @@ export class Fields {
this.updateFields();
}
}
/**
* Generates ImageData for rendering, encapsulating all computational logic.
*/
public generateImageData(): ImageData {
const imageData = new ImageData(this.resolution, this.resolution);
for (let row = 0; row < this.resolution; row++) {
for (let col = 0; col < this.resolution; col++) {
const index = (col * this.resolution + row) * 4;
const distance = this.getDistance(row, col);
const color = this.getColor(row, col);
const maxDistance = 10;
const normalizedDistance = Math.sqrt(distance) / maxDistance;
const baseColor = {
r: (color * 7) % 256,
g: (color * 13) % 256,
b: (color * 19) % 256,
};
imageData.data[index] = baseColor.r * (1 - normalizedDistance);
imageData.data[index + 1] = baseColor.g * (1 - normalizedDistance);
imageData.data[index + 2] = baseColor.b * (1 - normalizedDistance);
imageData.data[index + 3] = 255;
}
}
return imageData;
}
}