-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmain.html
144 lines (131 loc) · 4.93 KB
/
main.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
<head>
<link href="main.css" type="text/css" rel="stylesheet" />
<body>
<canvas id="canvas"></canvas>
<script>
var max_width = window.innerWidth, max_hight = window.innerHeight, NumOfPoints = 25;//initial the max width, hight and num of points in main page
var canvas = document.getElementById('canvas');//get the object
canvas.width = max_width,//set the max width
canvas.height = max_hight;//set the max hight
var context = canvas.getContext('2d');
context.strokeStyle = 'rgba(0,0,0,0.5)',//initial the stroke style
context.strokeWidth = 1,//set the stroke's width
context.fillStyle = 'rgba(0,0,0,0.2)';//fill the color into the point
var circleList = [];
function Line (x, y, _x, _y, o) {
this.origin_X = x,//initial x of the line
this.origin_Y = y,//initial y of the line
this.end_X = _x,//where x end of the line
this.end_Y = _y,//where y end of the line
this.o = o;//transparency of the line
}
function Circle(x, y, r, currX, currY){//initialize the origin of circle here
this.x = x,//initialize the x
this.y = y,//initialize the y
this.r = r,//initialize the radius
this.currX = currX,//new x where it moves to
this.currY = currY;//new y where it moves to
}
function random_Num(max, _min) {//generates a random number within the max and min
var min = arguments[1] || 0;
return Math.floor(Math.random()*(max-min+1)+min);
}
function drawCricle (cxt, x, y, r, currX, currY) {
var circle = new Circle(x, y, r, currX, currY)
cxt.beginPath()
cxt.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI)
cxt.closePath()
cxt.fill();
return circle;
}
function drawLine (cxt, x, y, _x, _y, o) {//connect the two point
var line = new Line(x, y, _x, _y, o)//create the new line here
cxt.beginPath()
cxt.strokeStyle = 'rgba(0,0,0,'+ o +')'//make the line to stroke
cxt.moveTo(line.origin_X, line.origin_Y)//the destination where the line moves to by x
cxt.lineTo(line.end_X, line.end_Y)//the desination where the line moves to by y
cxt.closePath()
cxt.stroke();
}
function resize(){
canvas.width = window.innerWidth,//set the max width
canvas.height = window.innerHeight;//set the max hight
context.fillStyle = 'rgba(0,0,0,0.2)';
}
function origin() {//creates origin for each new pinte in html, and limit the number of points that will be generated in html
circleList = [];
for (var i = 0; i < NumOfPoints; i++) {//counts down the number of the points that have been drawn
circleList.push(drawCricle(context, random_Num(max_width), random_Num(max_hight), random_Num(15, 2), random_Num(10, -10)/40, random_Num(10, -10)/40));
}
draw();
resize();
}
function draw() {//make each small part to move by updating the x and y
context.clearRect(0,0,canvas.width, canvas.height);//clean the old line here
for (var i = 0; i < NumOfPoints; i++) {//loop the circle in the circleList
drawCricle(context, circleList[i].x, circleList[i].y, circleList[i].r);
}
for (var i = 0; i < NumOfPoints; i++) {//loop the circle in the circleList
for (var j = 0; j < NumOfPoints; j++) {
if (i + j < NumOfPoints) {
var A = Math.abs(circleList[i+j].x - circleList[i].x),
B = Math.abs(circleList[i+j].y - circleList[i].y);
var lineLength = Math.sqrt(A*A + B*B);//get the area
var C = 1/lineLength*7-0.009;
var lineOpacity = C > 0.03 ? 0.03 : C;
if (lineOpacity > 0) {
drawLine(context, circleList[i].x, circleList[i].y, circleList[i+j].x, circleList[i+j].y, lineOpacity);
}
}
}
}
}
window.onload = function () {
origin();
setInterval(function () {//load the function to start drawing
for (var i = 0; i < NumOfPoints; i++) {
var cir = circleList[i];
cir.x += cir.currX;
cir.y += cir.currY;
if (cir.x > max_width) cir.x = 0;
else if (cir.x < 0) cir.x = max_width;
if (cir.y > max_hight) cir.y = 0;
else if (cir.y < 0) cir.y = max_hight;
}
draw();
}, 16);
}
</script>
<ul id="nav">
<li>   </li>
<li>ZHI HU 2.0</li>
<li id="searchbar">
<input id="bar" type="text" placeholder="Search for Topic, Question or Answer..."></input><button href="login.html" class="button" type="button">Search</button>
</li>
<li><a href="main.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</br></br>
<div class="head">
</br>
</br>
</id>
<div id="sidebar" >
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="default.asp">Home</a></li>
<li><a href="default.asp">Home</a></li>
<li><a href="default.asp">Home</a></li>
<li><a href="default.asp">Home</a></li>
<li><a href="default.asp">Home</a></li>
<li><a href="default.asp">Home</a></li>
<li><a href="default.asp">Home</a></li>
<li><a href="default.asp">Home</a></li>
</ul>
</div>
<div id="content">
<text>This is contents</text>
</div>
</body>