-
Notifications
You must be signed in to change notification settings - Fork 1
/
display.html
104 lines (85 loc) · 3.84 KB
/
display.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
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Splash</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$displayCanvas = $('#displayCanvas');
var canvas = document.getElementById('screen');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var createCrosshair = function(xPos, yPos, color){
}
var deleteCrosshair = function(prevX, prevY){
}
var socket = io.connect('/');
$(canvas).click(function(e){
var offset = $(this).offset();
var xPos = e.clientX;
var yPos = e.clientY;
crosshair = createCrosshair(xPos, yPos);
//deleteCrosshair(prevX, prevY);
prevX = xPos;
prevY = yPos;
socket.emit('data', {'xPos': xPos, 'yPos': yPos, 'color': "000000"});
var color;
console.log("x: " + xPos + "y: " + yPos);
});
socket.on('userName', function(uname){
console.log("i'm here");
});
socket.on('data2', function(data){
console.log("Position Data sent");
var xPos = data.xPos;
var yPos = data.yPos;
var color = data.color;
console.log(data);
ctx.fillStyle = color;
ctx.fillRect(parseInt(xPos) - 5, parseInt(yPos) - 5, 10, 10);
//ctx.fillRect(data.xPos - 5, data.yPos - 5, 10, 10);
//(xPos, yPos, color);
});
socket.on('paint', function(data) {
console.log("Paint data");
var xPos = data.xPos;
var yPos = data.yPos;
var color = data.color;
ctx.fillStyle = "#" + hex;
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
});
canvas.splat = function (x, y, power, xdir, ydir) {
canvas.drawsplat(x * canvas.width, y * canvas.height, power, 0, xdir, ydir);
};
canvas.drawsplat = function (x, y, power, num, xdir, ydir) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
if (num != 5) {
canvas.drawsplat(x + (Math.random() - xdir) * power / 2, y + (Math.random() - ydir) * power / 2, power/(1.5 + Math.random()), num + 1, xdir, ydir);
canvas.drawsplat(x + (Math.random() - xdir) * power * 2, y + (Math.random() - ydir) * power * 2, power/ (1.3 + Math.random()), num + 1, xdir, ydir);
canvas.drawsplat(x + (Math.random() - xdir) * power * 4, y + (Math.random() - ydir) * power * 4, power/ (2 + 2*Math.random()), num + 1, xdir, ydir);
}
};
});
</script>
<script src="/socket.io/socket.io.js"></script>
<style> #displayCanvas{
position:absolute;
}
</style>
</head>
<body>
<canvas id="screen" style="position: absolute;
width: 100%;
height: 100%"></canvas>
<div id="displayCanvas" class="displayCanvas">
</div>
</body>
</html>