Mercurial

annotate graphics/index.js @ 71:75de5903355c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Giagantic changes that update Dowa library to be more align with stb style array and hashmap. Updated Seobeo to be caching on server side instead of file level caching. Deleted bunch of things I don't really use.
author June Park <parkjune1995@gmail.com>
date Sun, 28 Dec 2025 20:34:22 -0800
parents 70ca1d99f3fd
children 8ceb5d3c6bdd
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
68
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
1 const SCREEN_WIDTH = 600;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
2 const SCREEN_HEIGHT = 600;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
3 const PIXEL_SIZE = 10;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
4 const FRAME = 60
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
5
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
6 game.width = SCREEN_WIDTH;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
7 game.height = SCREEN_HEIGHT;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
8
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
9 const ctx = game.getContext("2d");
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
10
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
11 function drawBackground() {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
12 ctx.fillStyle = "black";
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
13 ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
14 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
15
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
16 function drawPixel({x, y}) {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
17 ctx.fillStyle = "blue";
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
18 ctx.fillRect(x * SCREEN_WIDTH, y * SCREEN_HEIGHT, PIXEL_SIZE, PIXEL_SIZE);
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
19 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
20
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
21 function normazlie({x, y}) {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
22 return {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
23 x: ((x + 1) / 2),
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
24 y: (1 - ((y + 1) / 2)),
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
25 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
26 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
27
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
28 function threeDtotwoD({x, y, z}) {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
29 return {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
30 x: x/z,
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
31 y: y/z
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
32 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
33 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
34
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
35 function drawLine({x, y}, {x2, y2}) {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
36 console.log("Hello", x,y, x2,y2);
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
37 ctx.beginPath();
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
38 ctx.moveTo(x * SCREEN_WIDTH, y * SCREEN_HEIGHT);
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
39 ctx.lineTo(x2 * SCREEN_WIDTH, y2* SCREEN_HEIGHT);
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
40 ctx.lineWidth = 3;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
41 ctx.strokeStyle = "red";
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
42 ctx.stroke();
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
43 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
44
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
45 const test = 0;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
46 const points = [
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
47 {x: -0.25, y: 0.25, z: 0.5 + test},
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
48 {x: -0.25, y: -0.25, z: 0.5 + test},
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
49 {x: 0.25, y: -0.25, z: 0.5 + test},
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
50 {x: 0.25, y: 0.25, z: 0.5 + test},
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
51
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
52 {x: -0.25, y: 0.25, z: -0.5 + test},
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
53 {x: -0.25, y: -0.25, z: -0.5 + test},
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
54 {x: 0.25, y: -0.25, z: -0.5 + test},
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
55 {x: 0.25, y: 0.25, z: -0.5 + test},
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
56 ]
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
57 const vortexs = [
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
58 [0, 1, 2, 3],
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
59 [4, 5, 6, 7],
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
60 [0, 4],
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
61 [1, 5],
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
62 [2, 6],
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
63 [3, 7],
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
64 ]
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
65
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
66 function rotate_xz({x,y,z}, angle) {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
67 return {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
68 x: x * Math.cos(angle) - z*Math.sin(angle),
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
69 y: y,
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
70 z: x * Math.sin(angle) + z*Math.cos(angle),
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
71 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
72 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
73
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
74 function move_z(point, dz) {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
75 return {...point, z: point.z + dz}
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
76 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
77
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
78 let dz = 0;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
79 let dt = 1/FRAME;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
80 let angle = 0;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
81
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
82 function drawAnimation() {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
83 drawBackground();
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
84 dz += 1 * dt;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
85 // angle += 2*Math.PI*dt;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
86 angle = 0;
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
87 for (var vortex of vortexs)
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
88 {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
89 for (let i = 0; i < vortex.length; i++)
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
90 {
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
91 const newPoint = normazlie(
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
92 threeDtotwoD(
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
93 move_z(rotate_xz(points[vortex[(i+1)%vortex.length]], angle), dz)
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
94 )
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
95 );
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
96
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
97 drawLine(
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
98 normazlie(
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
99 threeDtotwoD(
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
100 move_z(rotate_xz(points[vortex[i]], angle), dz)
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
101 )
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
102 ),
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
103 {x2: newPoint.x, y2: newPoint.y}
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
104 );
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
105 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
106 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
107 setTimeout(() => drawAnimation(), 1000/60)
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
108 }
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
109
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
110 drawAnimation()
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
111
70ca1d99f3fd Mimicing what tsoding did for his video. Kinda cool.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
112