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

Compare commits

base: cg:80e1d97624337e7b08e2dbf4a246bc2707bdf73b
Branches Tags
cg:main
..
compare: cg:57c830ac80fb3a0fe249f4a867c37ffeb210a8e2
Branches Tags
cg:main

3 Commits
80e1d97624 ... 57c830ac80

Author SHA1 Message Date
Keanu Taufan
57c830ac80
Update readme to include demo link 2024-09-22 20:36:38 +07:00
Keanu Taufan
761dec80b5
Set page title 2024-09-22 20:32:38 +07:00
Keanu Taufan
63c677de3d
Adjust animation timing 2024-09-22 20:32:29 +07:00
3 changed files with 17 additions and 10 deletions
Show Stats Expand all files Collapse all files

7
README.md
View File

@ -7,6 +7,13 @@
![App Preview](./images/final-preview.gif) ![App Preview](./images/final-preview.gif)
**Live Demo:** https://demo.taufan.dev/webgl-letters/
**Source Code:** https://git.taufan.dev/cg/webgl-letters/
> [!NOTE]
> Source code will be made public no earlier than Mon, 2024-09-22
## What I came up with ## What I came up with
I figured that the requirements itself are pretty lax; as long as I figured that the requirements itself are pretty lax; as long as

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title> <title>WebGL Letters</title>
</head> </head>
<body> <body>
<canvas id="canvas" width="1200px" height="600px"> <canvas id="canvas" width="1200px" height="600px">

18
src/main.ts
View File

@ -84,24 +84,24 @@ function render() {
]); ]);
const qTrackK = new Track([ const qTrackK = new Track([
{ time: 4.5, value: [100, 610] }, { time: 5.0, value: [100, 610] },
{ time: 5.0, value: [100, 75] }, { time: 5.5, value: [100, 75] },
]); ]);
const qTrackE = new Track([ const qTrackE = new Track([
{ time: 5.0, value: [450, -500] }, { time: 5.5, value: [450, -500] },
{ time: 5.5, value: [450, 75] }, { time: 6.0, value: [450, 75] },
]); ]);
const qTrackA = new Track([ const qTrackA = new Track([
{ time: 5.5, value: [800, 610] }, { time: 6.0, value: [800, 610] },
{ time: 6.0, value: [800, 75] }, { time: 6.5, value: [800, 75] },
]); ]);
const bgTrack = new Track([ const bgTrack = new Track([
{ time: 0, value: [0.0, 0.0, 0.0] }, { time: 0, value: [0.0, 0.0, 0.0] },
{ time: 3, value: [0.0, 0.0, 0.0] }, { time: 4.5, value: [0.0, 0.0, 0.0] },
{ time: 4, value: [0.22745, 0.35294, 0.25098] }, { time: 5.0, value: [0.22745, 0.35294, 0.25098] },
]); ]);
const timeline = new Timeline({ const timeline = new Timeline({
@ -112,7 +112,7 @@ function render() {
"position4": qTrackE, "position4": qTrackE,
"position5": qTrackA, "position5": qTrackA,
"backgroundColor": bgTrack "backgroundColor": bgTrack
}, 8, true); }, 9.5, true);
const fragmentColorUniform = gl.getUniformLocation(program, "uColor"); const fragmentColorUniform = gl.getUniformLocation(program, "uColor");
const canvasSizeUniform = gl.getUniformLocation(program, "uCanvasSize"); const canvasSizeUniform = gl.getUniformLocation(program, "uCanvasSize");