-
Notifications
You must be signed in to change notification settings - Fork 0
/
collision-example.html
85 lines (68 loc) · 1.95 KB
/
collision-example.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
<html>
<head>
<style>
canvas {
position: absolute;
left: 100;
top: 100;
}
#imageCanvas {z-index: 1}
#coverCanvas {z-index: 2}
</style>
</head>
<body>
<canvas id="imageCanvas" width="300" height="300"></canvas>
<canvas id="coverCanvas" width="300" height="300"></canvas>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var IMAGE_URL = 'https://d3rt1990lpmkn.cloudfront.net/unbranded/bca86acd1f3ddef6fe9f70d095cd72e4cdc1cc3e';
var imageCanvas = document.getElementById("imageCanvas");
var coverCanvas = document.getElementById("coverCanvas");
var imageContext = imageCanvas.getContext('2d');
var coverContext = coverCanvas.getContext('2d');
var width = parseInt($(imageCanvas).attr('width'))
var height = parseInt($(imageCanvas).attr('height'))
// load image from data url
var imageObj = new Image();
imageObj.onload = function() {
imageContext.drawImage(this, 0, 0);
};
imageObj.src = IMAGE_URL;
coverContext.fillStyle = "#FF0000";
coverContext.fillRect(0,0,width,height);
var isMouseDown = false;
$(coverCanvas).mousedown(function(e) { isMouseDown = true })
$(coverCanvas).mouseup(function(e) { isMouseDown = false })
$(coverCanvas).mouseout(function(e) { isMouseDown = false })
$(coverCanvas).mousemove(function(e) {
if (!isMouseDown) return;
var pos = {
x: e.offsetX,
y: e.offsetY
}
var strokeSize = 20;
// Clear the space
coverContext.clearRect(
pos.x - strokeSize / 2,
pos.y-strokeSize/2 ,
strokeSize,
strokeSize
);
var imgDataArray = coverContext.getImageData(0, 0, width, height).data;
// Flatten the RGBA array into an array of zeroes and ones
var bitArray = new Uint8ClampedArray(imgDataArray.length/4);
var j = 0;
for (var i=3;i<imgDataArray.length;i+=4) {
bitArray[j] = imgDataArray[i] === 0 ? 0 : 1;
j++;
}
var out = {
width: width,
height: height,
pixels: bitArray
}
console.log("this is nice output", out);
})
</script>
</body>
</html>