-
Notifications
You must be signed in to change notification settings - Fork 0
/
fabulous.js
61 lines (53 loc) · 1.77 KB
/
fabulous.js
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
// Configuration
var emissionFrequency = 0.25;
var particleColor = 'red';
var scaleRate = 1.05;
var particleSize = 5;
var particleDuration = 0.5;
// State
var lastEmissionTime = 0;
var faceRectangles = [];
ws = new WebSocket("ws://localhost:8001");
ws.onmessage = function (msg) {
console.log(msg.data);
var obj = JSON.parse(msg.data);
faceRectangles = [];
for(var i = 0; i < obj.faceDetails.length; i++) {
var face = obj.faceDetails[i];
faceRectangles.push(new Rectangle(face.x, face.y, face.width, face.height));
}
};
function onFrame(event) {
if (event.time - lastEmissionTime > emissionFrequency) {
for (var i = 0; i < faceRectangles.length; i++) {
var point = randomPerimeterPointOnRectangle(faceRectangles[i]);
emitParticle(point, event.time);
}
lastEmissionTime = event.time;
}
}
function onMouseMove(event) {
// This mocks the presence of a detected face.
faceRectangles = [new Rectangle(event.point.x - 50, event.point.y - 50, 100, 100)];
}
function emitParticle(point, timeStamp) {
var particle = Path.Circle(point, particleSize);
particle.fillColor = particleColor;
particle.timeStamp = timeStamp;
particle.onFrame = function(event) {
particle.scale(scaleRate);
if (event.time > particleDuration) particle.remove();
}
}
function randomPerimeterPointOnRectangle(rectangle) {
var random = Point.random();
if (random.x < 0.25) {
return new Point(rectangle.topLeft.x, rectangle.y + random.y * rectangle.height);
} else if (random.x < 0.5) {
return new Point(rectangle.x + random.y * rectangle.width, rectangle.topLeft.y);
} else if (random.x < 0.75) {
return new Point(rectangle.bottomRight.x, rectangle.y + random.y * rectangle.height);
} else {
return new Point(rectangle.x + random.y * rectangle.width, rectangle.bottomRight.y);
}
}