Mercurial

annotate graphics/index.js @ 159:05cf9467a1c3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[Postdog] Updated to use text area that can handle like html text area.
author June Park <parkjune1995@gmail.com>
date Wed, 14 Jan 2026 08:56:33 -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