Mercurial

comparison graphics/index.js @ 68:70ca1d99f3fd

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