-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathUntitled_3.html
88 lines (81 loc) · 2.24 KB
/
Untitled_3.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
<!DOCTYPE html>
<html>
<head>
<title>Untitled_3</title>
<meta charset="utf-8">
<style>
body {
background-color: #323232;
}
canvas {
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
background-color: white;
}
</style>
</head>
<body>
<script src="./lib/playground.js"></script>
<script type="text/javascript">
var scene = new Scene(800, 600);
document.body.appendChild(scene.canvas);
window.onload = function() {
init();
render();
}
var points = [];
function init() {
let distance = 30;
let width = 40;
let height = 30;
let sqrt3 = Math.sqrt(3);
for (let i=0;i<height;i++) {
for (let j=0;j<width;j++) {
let point = new Vector();
point.x = scene.width/2 + (j - width/2 + i%2/2 + Math.random()/3) * distance;
point.y = scene.height/2 + (i - height/2 + Math.random()/3) * distance * sqrt3/2;
points.push(point);
let color1 = "rgb(" + Math.floor(64 * (j/width)+128) + ", " + Math.floor(192 * (j/width)+64) +","+ Math.floor(192 * (j/width)) +")";
if(i!=0&&j!=0) {
let shape;
if (i%2) {
shape = new ShapeNode(new Polygon([point,points[(i)*width+(j-1)],points[(i-1)*width+(j)]]));
shape.color = color1;
scene.addChild(shape);
shape = new ShapeNode(new Polygon([points[(i-1)*width+(j-1)],points[(i)*width+(j-1)],points[(i-1)*width+(j)]]));
shape.color = color1;
scene.addChild(shape);
} else {
shape = new ShapeNode(new Polygon([point,points[(i-1)*width+(j)],points[(i-1)*width+(j-1)]]));
shape.color = color1;
scene.addChild(shape);
shape = new ShapeNode(new Polygon([points[(i)*width+(j-1)],points[(i)*width+(j)],points[(i-1)*width+(j-1)]]));
shape.color = color1;
scene.addChild(shape);
}
}
}
}
}
function render() {
var temp = [];
points.forEach(p => {
temp.push(p.clone());
let dis = (scene.mouse.clone().sub(p)).length;
let rad = 100;
if (dis < rad) {
p.copy((p.clone().sub(scene.mouse)).setScalar(Math.asin(dis/rad)/(Math.PI/2)*rad));
}
});
scene.update();
points.forEach((p, i) => {
p.x = temp[i].x;
p.y = temp[i].y;
});
window.requestAnimationFrame(render);
}
</script>
</body>
</html>