cg/webgl-letters
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add triangle letter

Browse Source
This commit is contained in:
Keanu Taufan 2024-09-21 22:54:59 +07:00
parent 352f034bf5
commit e4f241dbbf
No known key found for this signature in database
GPG Key ID: 1952D665A3A51BE0
2 changed files with 57 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/data/letter_triangle.json Normal file
View File

File diff suppressed because one or more lines are too long

56
src/main.ts
View File

@ -10,6 +10,8 @@ import { createBasicVao } from "./utils/vao";
import Shape2D from "./geometry/Shape2D";
import outline from "./data/letter_outline.json";
import solid from "./data/letter_triangle.json";
import { Timeline, Track } from "./utils/sequence";
function render() {
@ -45,39 +47,72 @@ function render() {
const aBuffer = loadBuffer(gl, aVerts);
const aVao = createBasicVao(gl, aBuffer, vertexPositionAttribLocation);
const KVerts = new Float32Array(solid.k.vertices);
const KBuffer = loadBuffer(gl, KVerts);
const KVao = createBasicVao(gl, KBuffer, vertexPositionAttribLocation);
const EVerts = new Float32Array(solid.e.vertices);
const EBuffer = loadBuffer(gl, EVerts);
const EVao = createBasicVao(gl, EBuffer, vertexPositionAttribLocation);
const AVerts = new Float32Array(solid.a.vertices);
const ABuffer = loadBuffer(gl, AVerts);
const AVao = createBasicVao(gl, ABuffer, vertexPositionAttribLocation);
const shapes: Shape2D[] = [
new Shape2D(new Vector2D(0, 0), 200, [0.22745, 0.35294, 0.25098], kVerts.length / 2, kVao, gl.LINES),
new Shape2D(new Vector2D(0, 0), 200, [0.22745, 0.35294, 0.25098], eVerts.length / 2, eVao, gl.LINES),
new Shape2D(new Vector2D(0, 0), 200, [0.22745, 0.35294, 0.25098], aVerts.length / 2, aVao, gl.LINES),
new Shape2D(new Vector2D(0, 0), 800, [0.98823, 0.30980, 0.21960], KVerts.length / 2, KVao, gl.TRIANGLES),
new Shape2D(new Vector2D(0, 0), 800, [0.98823, 0.30980, 0.21960], EVerts.length / 2, EVao, gl.TRIANGLES),
new Shape2D(new Vector2D(0, 0), 800, [0.98823, 0.30980, 0.21960], AVerts.length / 2, AVao, gl.TRIANGLES),
]
const pTrackK = new Track([
{ time: 0, value: [300, -200] },
{ time: 1, value: [300, 300] },
{ time: 0.0, value: [300, -200] },
{ time: 0.5, value: [300, 300] },
]);
const pTrackE = new Track([
{ time: 1, value: [600, 900] },
{ time: 2, value: [600, 300] },
{ time: 0.5, value: [625, 900] },
{ time: 1.0, value: [625, 300] },
]);
const pTrackA = new Track([
{ time: 2, value: [900, -200] },
{ time: 3, value: [900, 300] },
{ time: 1.0, value: [900, -200] },
{ time: 1.5, value: [900, 300] },
]);
const qTrackK = new Track([
{ time: 4.5, value: [100, -500] },
{ time: 5.0, value: [100, 100] },
]);
const qTrackE = new Track([
{ time: 5.0, value: [450, 600] },
{ time: 5.5, value: [450, 100] },
]);
const qTrackA = new Track([
{ time: 5.5, value: [800, -500] },
{ time: 6.0, value: [800, 100] },
]);
const bgTrack = new Track([
{ time: 0, value: [0.1, 0.1, 0.1, 1.0] },
{ time: 3, value: [0.1, 0.1, 0.1, 1.0] },
{ time: 4, value: [0.2, 0.9, 0.2, 1.0] },
{ time: 0, value: [0.0, 0.0, 0.0] },
{ time: 3, value: [0.0, 0.0, 0.0] },
{ time: 4, value: [0.22745, 0.35294, 0.25098] },
]);
const timeline = new Timeline({
"position0": pTrackK,
"position1": pTrackE,
"position2": pTrackA,
"position3": qTrackK,
"position4": qTrackE,
"position5": qTrackA,
"backgroundColor": bgTrack
}, 10, true);
}, 8, true);
const fragmentColorUniform = gl.getUniformLocation(program, "uColor");
const canvasSizeUniform = gl.getUniformLocation(program, "uCanvasSize");
@ -102,6 +137,7 @@ function render() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
gl.clearColor(r, g, b, a);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);