-
Notifications
You must be signed in to change notification settings - Fork 0
/
sketch.js
154 lines (137 loc) · 4.26 KB
/
sketch.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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
let video;
let posNet;
let pose;
let skeleton;
let hand_armour_img;
let debug = 0; // set this var to 1 if you'd like to see the pose estimation from the model
let if_want_armour = 0;
let red_monster;
let green_monster;
let random_values_0_1 = [0 , 1];
// monster fields
let is_monster_alive = true; // start with a live monster
let random_monster_choosen;
// monster dimensions
let mx = 0;
let my = 0;
let mwidth = 80;
let mheight = 80;
let max_x = 0;
let max_y = 0;
function preload() {
// load game assets
red_monster = loadImage('red_monster.png');
green_monster = loadImage('green_monster.png');
random_monster_choosen = red_monster;
if(1 == if_want_armour) {
hand_armour_img = loadImage('hand_armour.png');
}
}
function setup(){
createCanvas(640, 480);
// TODO:
// set a reduced framerate for better performance
video = createCapture(VIDEO);
video.hide();
posNet = ml5.poseNet(video, modelLoaded);
posNet.on('pose', gotPoses);
max_x = width - 150;
max_y = height - 150;
}
function gotPoses(poses) {
// console.log(poses);
if (poses.length > 0 ) {
pose = poses[0].pose;
// console.log(pose);
skeleton = poses[0].skeleton;
} else {
console.log("no pose found")
}
}
function modelLoaded(){
console.log("model ready");
}
// http://127.0.0.1:5500/p5/empty-example/index.html
function draw(){
// background(200);
// flip the video on y-axis only when not in debug
if(0 == debug){
translate(width,0);
scale(-1.0,1.0);
}
image(video,0,0);
if (pose && skeleton) {
let eyeR = pose.rightEye;
let eyeL = pose.leftEye;
// realtive distanve between two eye's
// used to dynamically increase or decrease the
let d = dist(eyeR.x,eyeR.y,eyeL.x,eyeL.y);
if (1 == debug) {
// fill(255,0,0); // red nose
// ellipse(pose.nose.x, pose.nose.y, d);
for (let i=0; i < pose.keypoints.length ; i++) {
let x = pose.keypoints[i].position.x;
let y = pose.keypoints[i].position.y;
fill(0,255,0);
ellipse(x, y, 16, 16);
}
for (let i=0; i < skeleton.length; i++) {
let a = skeleton[i][0];
let b = skeleton[i][1];
strokeWeight(2);
stroke(255);
line(a.position.x,a.position.y,b.position.x,b.position.y);
}
} // debug end
// only draw images if required
if (1 == if_want_armour){
// https://math.stackexchange.com/questions/873366/calculate-angle-between-two-lines
// calculate atan2 for the elbow to wrist line and rotate the armour to that angle
// check if left elbow and left wrist are within the screen
let leftElbowConfidence = parseInt(pose.leftElbow.confidence * 100);
// if the confidence is low, then the had is not there don't drew the armour image
if( leftElbowConfidence > 60){
push();
// console.log(leftElbowConfidence);
let a = atan2(pose.leftElbow.y - pose.leftWrist.y, pose.leftElbow.x - pose.leftWrist.x);
translate(pose.leftWrist.x,pose.leftWrist.y);
console.log(a);
rotate(a/.5);
strokeWeight(4);
stroke(51);
image(hand_armour_img, 0, 0,150,150);
pop();
}
}
push();
// create a new monster if there are no other monsters already
if (is_monster_alive){
image(random_monster_choosen, mx, my,mwidth,mheight);
}
// TODO check confidence score
hit_left = collideLineRect(pose.leftWrist.x, pose.leftWrist.y, pose.leftElbow.x, pose.leftElbow.y, mx, my, mwidth, mheight);
hit_right = collideLineRect(pose.rightWrist.x, pose.rightWrist.y, pose.rightElbow.x, pose.rightElbow.y, mx, my, mwidth, mheight);
if(1==debug){
console.log(hit_left, hit_right);
}
// if user hits the monster
if(hit_left || hit_right){
// is_monster_alive = false;
// choose a random monster image to be shown
let value = random(random_values_0_1);
// console.log(value);
if(0 == value) {
// red monster
random_monster_choosen = red_monster;
} else {
// green monster
random_monster_choosen = green_monster;
}
// choose a new location for monster in canvas
mx = parseInt(random(max_x));
my = parseInt(random(max_y));
}
pop();
}
// text(ml5.version, width/2, height/2);
}