-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
99 lines (85 loc) · 2.32 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chain</title>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="js/paper.js"></script>
<script type="text/javascript" src="js/keyDecode.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/paperscript" canvas="canvas">
// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html
var socket = io.connect('http://localhost');
var speed = 1;
var path = new Path();
path.style = {
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
};
var velx = 0;
var vely = 0;
var vectors = {};
var size = 15;
var segments = path.segments;
var start = view.center / [10, 1];
for (var i = 0; i < size; i++)
path.add(start + new Point(i * 50, 0));
socket.on('velchange',function(data) {
console.log(data.client);
vectors[data.client] = [data.velx, data.vely];
});
function onFrame(e) {
velx = 0;
vely = 0;
for(var i in vectors) {
velx += vectors[i][0];
vely += vectors[i][1];
}
segments[0].point.y += vely;
segments[0].point.x += velx;
for (var i = 0; i < size - 1; i++) {
var nextSegment = segments[i + 1];
var position = path.segments[i].point;
var angle = (position - nextSegment.point).angle;
var vector = new Point({ angle: angle, length: 35 });
nextSegment.point = position - vector;
}
path.smooth();
}
$(function() {
$(document).keydown(function(e) {
console.log(keyDecode(e));
key = keyDecode(e);
if (key == "up") {
vely -= speed;
}
if (key == "down") {
vely += speed;
}
if (key == "right") {
velx += speed;
}
if (key == "left") {
velx -= speed;
}
if (!e.shiftKey && !e.ctrlKey) {
e.preventDefault();
}
});
});
function onMouseDown(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
function onMouseUp(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>