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

add back other renderers

This commit is contained in:
Orion Reed 2024-12-01 06:39:41 -05:00
parent a58343a783
commit 33c18d6349
1 changed files with 56 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
src/distanceField/fields.ts
View File

@ -1,6 +1,8 @@
import type { Vector2 } from '../utils/Vector2.ts'; import type { Vector2 } from '../utils/Vector2.ts';
import { computeCPT } from './cpt.ts'; import { computeCPT } from './cpt.ts';
type ColorFunc = (d: number) => { r: number; g: number; b: number };
export class Fields { export class Fields {
private edt: Float32Array[] = []; private edt: Float32Array[] = [];
private cpt: Vector2[][] = []; private cpt: Vector2[][] = [];
@ -137,7 +139,92 @@ export class Fields {
} }
} }
Color = { updateShape(index: number, points: Vector2[]) {
if (index >= 0 && index < this.shapes.length) {
const existingColor = this.shapes[index].color;
this.shapes[index] = { points, color: existingColor };
this.updateFields();
}
}
private renderEDT(colorFunc: ColorFunc): 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.edt[row][col];
const color = colorFunc(distance);
imageData.data[index] = color.r;
imageData.data[index + 1] = color.g;
imageData.data[index + 2] = color.b;
imageData.data[index + 3] = 255;
}
}
return imageData;
}
private renderCPT(): 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 { x, y } = this.cpt[row][col];
const shapeColor = this.colorField[x][y];
const color = {
r: (shapeColor * 7) % 150,
g: (shapeColor * 13) % 200,
b: (shapeColor * 19) % 250,
};
const index = (col * this.resolution + row) * 4;
imageData.data[index] = color.r;
imageData.data[index + 1] = color.g;
imageData.data[index + 2] = color.b;
imageData.data[index + 3] = 255;
}
}
return imageData;
}
private renderCombined(): 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.edt[row][col];
const { x, y } = this.cpt[row][col];
const shapeColor = this.colorField[x][y] % 200;
const maxDistance = 10;
const normalizedDistance = Math.sqrt(distance) / maxDistance;
const baseColor = {
r: (shapeColor * 7) % 256,
g: (shapeColor * 13) % 256,
b: (shapeColor * 19) % 256,
};
const color = {
r: baseColor.r * (1 - normalizedDistance),
g: baseColor.g * (1 - normalizedDistance),
b: baseColor.b * (1 - normalizedDistance),
};
imageData.data[index] = color.r;
imageData.data[index + 1] = color.g;
imageData.data[index + 2] = color.b;
imageData.data[index + 3] = 255;
}
}
return imageData;
}
public generateImageData(): ImageData {
return this.renderCombined();
// return this.renderCPT();
// return this.renderEDT(Color.rainbowColorFunc);
}
}
const Color = {
simpleColorFunc: (d: number) => { simpleColorFunc: (d: number) => {
return { r: 250 - d * 2, g: 250 - d * 5, b: 250 - d * 3 }; return { r: 250 - d * 2, g: 250 - d * 5, b: 250 - d * 3 };
}, },
@ -167,111 +254,3 @@ export class Fields {
return { r: (value * 5) % 255, g: (value * 3) % 255, b: (value * 7) % 255 }; return { r: (value * 5) % 255, g: (value * 3) % 255, b: (value * 7) % 255 };
}, },
}; };
public renderEDT(canvas: CanvasRenderingContext2D): void {
const imageData = canvas.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.edt[row][col];
const color = this.Color.simpleColorFunc(distance);
imageData.data[index] = color.r;
imageData.data[index + 1] = color.g;
imageData.data[index + 2] = color.b;
imageData.data[index + 3] = 255;
}
}
canvas.putImageData(imageData, 0, 0);
}
public renderCPT(canvas: CanvasRenderingContext2D): void {
const imageData = canvas.getImageData(0, 0, this.resolution, this.resolution);
for (let row = 0; row < this.resolution; row++) {
for (let col = 0; col < this.resolution; col++) {
const { x, y } = this.cpt[row][col];
const shapeColor = this.colorField[x][y];
const color = {
r: (shapeColor * 7) % 150,
g: (shapeColor * 13) % 200,
b: (shapeColor * 19) % 250,
};
const index = (col * this.resolution + row) * 4;
imageData.data[index] = color.r;
imageData.data[index + 1] = color.g;
imageData.data[index + 2] = color.b;
imageData.data[index + 3] = 255;
}
}
canvas.putImageData(imageData, 0, 0);
}
public renderBoth(canvas: CanvasRenderingContext2D): void {
const imageData = canvas.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.edt[row][col];
const { x, y } = this.cpt[row][col];
const shapeColor = this.colorField[x][y] % 200;
const maxDistance = 10;
const normalizedDistance = Math.sqrt(distance) / maxDistance;
const baseColor = {
r: (shapeColor * 7) % 256,
g: (shapeColor * 13) % 256,
b: (shapeColor * 19) % 256,
};
const color = {
r: baseColor.r * (1 - normalizedDistance),
g: baseColor.g * (1 - normalizedDistance),
b: baseColor.b * (1 - normalizedDistance),
};
imageData.data[index] = color.r;
imageData.data[index + 1] = color.g;
imageData.data[index + 2] = color.b;
imageData.data[index + 3] = 255;
}
}
canvas.putImageData(imageData, 0, 0);
}
updateShape(index: number, points: Vector2[]) {
if (index >= 0 && index < this.shapes.length) {
const existingColor = this.shapes[index].color;
this.shapes[index] = { points, color: existingColor };
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;
}
}