-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (136 loc) · 4.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shi Zhang's Personal Website</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="style-new.css" />
<style>
#donutCanvas {
background-color: #ffffff;
display: block;
margin: 20px auto;
}
</style>
</head>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-BMHC9VDGPY"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-BMHC9VDGPY");
</script>
<body>
<!-- Header -->
<div class="header">
<h1>Welcome to Shi Zhang's Website</h1>
<p>A showcase of my professional journey and projects.</p>
</div>
<!-- Navigation Bar -->
<div class="navbar">
<a href="index.html">Home</a>
<a href="biography.html">Biography</a>
<a href="resume.html">Resume</a>
<a href="projects.html">Projects</a>
<a href="contact.html">Contact</a>
</div>
<!-- Main Content -->
<div class="content">
<h2>Welcome to my website</h2>
<p>
This is a personal website where I share my journey in computer science
and design, showcase my projects, and connect with others in the
industry.
</p>
<p>Feel free to explore my portfolio and get in touch!</p>
<p>Have fun and happy coding!</p>
<!-- Infinity Ring Canvas -->
<canvas id="donutCanvas" width="400" height="300"></canvas>
</div>
<!-- Footer -->
<div class="footer">
<p>© 2024 by Shi Zhang. All rights reserved.</p>
</div>
<script>
const canvas = document.getElementById("donutCanvas");
const ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 300;
let A = 0,
B = 0;
const R = 0.85; // Radius of the infinity ring
const K2 = 5;
const K1 = ((canvas.width * K2 * 3) / (8 * R)) * 0.6; // Adjust scaling factor to 60%
// Characters for shading from light to dark
const shadingChars = ".,-~:;=!*#$@";
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const z = new Array(canvas.width * canvas.height).fill(0);
const b = new Array(canvas.width * canvas.height).fill(" ");
A += 0.07;
B += 0.03;
const cosA = Math.cos(A),
sinA = Math.sin(A);
const cosB = Math.cos(B),
sinB = Math.sin(B);
for (let u = 0; u < 6.28; u += 0.1) {
// Parametric variable for the infinity ring
const cosU = Math.cos(u),
sinU = Math.sin(u);
for (let v = -0.5; v <= 0.5; v += 0.1) {
// Width of the strip
// Parametric equations for a 3D infinity ring
const x = (R + v * Math.cos(u / 2)) * Math.cos(u);
const y = (R + v * Math.cos(u / 2)) * Math.sin(u);
const z0 = v * Math.sin(u / 2);
const D = 1 / (z0 * sinA + y * cosA + K2);
const t1 = z0 * cosA - y * sinA;
const x1 = Math.floor(
canvas.width / 2 + K1 * D * (x * cosB - t1 * sinB)
);
const y1 = Math.floor(
canvas.height / 2 + K1 * D * (x * sinB + t1 * cosB)
);
const o = x1 + canvas.width * y1;
const L = Math.floor(
8 *
((y * sinA - z0 * cosA) * cosB -
z0 * sinA -
y * cosA -
x * cosB)
);
if (
canvas.width > x1 &&
x1 > 0 &&
y1 > 0 &&
canvas.height > y1 &&
D > z[o]
) {
z[o] = D;
b[o] = shadingChars[Math.max(L, 0)];
}
}
}
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.font = "10px monospace";
for (let k = 0; k < canvas.width * canvas.height; k++) {
if (z[k] > 0) {
const x = k % canvas.width;
const y = Math.floor(k / canvas.width);
ctx.fillText(b[k], x, y);
}
}
}
setInterval(render, 80);
</script>
</body>
</html>