-
19 |
20 | -
21 |
-
22 |
-
23 |
-
24 |
Loading model...
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /projects/painter/script.js: -------------------------------------------------------------------------------- 1 | 2 | let video; 3 | let poseNet; 4 | let poses = []; 5 | let skeletons = []; 6 | 7 | let pg; 8 | let HandX; 9 | let HandY; 10 | 11 | let pHandX; 12 | let pHandY; 13 | 14 | function setup() { 15 | var cnv = createCanvas(640, 480); 16 | var x = (windowWidth - width) / 2; 17 | var y = (windowHeight - height) / 2; 18 | cnv.position(x, y); 19 | video = createCapture(VIDEO); 20 | video.size(width, height); 21 | pixelDensity(1); 22 | pg = createGraphics(width, height); 23 | 24 | poseNet = ml5.poseNet(video, modelReady); 25 | 26 | poseNet.on('pose', function(results) { 27 | poses = results; 28 | }); 29 | 30 | video.hide(); 31 | } 32 | 33 | function draw() { 34 | image(video, 0, 0, width, height); 35 | image(pg, 0, 0, width, height); 36 | 37 | drawKeypoints(); 38 | drawSkeleton(); 39 | } 40 | 41 | function drawKeypoints() { 42 | // Loop through all the poses detected 43 | for (let i = 0; i < min(poses.length,1); i++) { 44 | // For each pose detected, loop through all the keypoints 45 | for (let j = 0; j < poses[i].pose.keypoints.length; j++) { 46 | // A keypoint is an object describing a body part (like rightArm or leftShoulder) 47 | let keypoint = poses[i].pose.keypoints[j]; 48 | if (keypoint.score > 0.15) { 49 | // fill(255, 0, 0); 50 | // noStroke(); 51 | // ellipse(keypoint.position.x, keypoint.position.y, 10, 10); 52 | // fill(0,255,0); 53 | // text(j, keypoint.position.x, keypoint.position.y); 54 | 55 | if (j == 0) { 56 | HandX = keypoint.position.x; 57 | HandY = keypoint.position.y; 58 | 59 | pg.stroke(230, 80, 0); 60 | pg.strokeWeight(5); 61 | pg.line(HandX, HandY, pHandX, pHandY); 62 | 63 | pHandX = HandX; 64 | pHandY = HandY; 65 | 66 | } 67 | 68 | } 69 | } 70 | } 71 | } 72 | 73 | // A function to draw the skeletons 74 | function drawSkeleton() { 75 | // Loop through all the skeletons detected 76 | for (let i = 0; i < poses.length; i++) { 77 | // For every skeleton, loop through all body connections 78 | for (let j = 0; j < poses[i].skeleton.length; j++) { 79 | let partA = poses[i].skeleton[j][0]; 80 | let partB = poses[i].skeleton[j][1]; 81 | stroke(255, 0, 0); 82 | line(partA.position.x, partA.position.y, partB.position.x, partB.position.y); 83 | } 84 | } 85 | } 86 | 87 | // The callback that gets called every time there's an update from the model 88 | function gotPoses(results) { 89 | poses = results; 90 | } 91 | 92 | function keyPressed() { 93 | pg.clear(); 94 | } 95 | 96 | function modelReady() { 97 | select('#status').html('Model Loaded!'); 98 | } 99 | -------------------------------------------------------------------------------- /assets/styles/90style.css: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | font-size: 100%; 4 | -webkit-text-size-adjust: 100%; 5 | -ms-text-size-adjust: 100%; 6 | padding: 0; 7 | margin: 0; 8 | height: 100%; 9 | } 10 | 11 | a:focus { 12 | outline: thin dotted #333; 13 | outline: 5px auto -webkit-focus-ring-color; 14 | outline-offset: -2px; 15 | } 16 | 17 | 18 | img { 19 | width: auto\9; 20 | height: auto; 21 | max-width: 100%; 22 | vertical-align: middle; 23 | border: 0; 24 | -ms-interpolation-mode: bicubic; 25 | } 26 | 27 | 28 | button, 29 | input, 30 | select, 31 | textarea { 32 | margin: 0; 33 | font-size: 100%; 34 | vertical-align: middle; 35 | } 36 | 37 | 38 | body { 39 | margin-left: 10vw; 40 | margin-right: 10vw; 41 | padding: 0; 42 | height: 100%; 43 | font-size: 100%; 44 | font-family: "Helvetica", cursive, sans-serif; 45 | font-size: 16px; 46 | line-height: 20px; 47 | color: #ffff00; 48 | background-color: #0000ff; 49 | } 50 | 51 | a { 52 | color: #00eeee; 53 | text-decoration: none; 54 | } 55 | 56 | a:hover, 57 | a:focus { 58 | color: #00eeee; 59 | text-decoration: underline; 60 | } 61 | 62 | .img-rounded { 63 | -webkit-border-radius: 6px; 64 | -moz-border-radius: 6px; 65 | border-radius: 6px; 66 | } 67 | 68 | 69 | .img-polaroid { 70 | padding: 4px; 71 | background-color: #fff; 72 | border: 1px solid #ccc; 73 | border: 1px solid rgba(0, 0, 0, 0.2); 74 | -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 75 | -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 76 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 77 | } 78 | 79 | .img-circle { 80 | -webkit-border-radius: 500px; 81 | -moz-border-radius: 500px; 82 | border-radius: 500px; 83 | } 84 | 85 | 86 | 87 | h1, h2, h3, h4, h5, h6 { 88 | font-family: inherit; 89 | font-weight: bold; 90 | color: inherit; 91 | text-rendering: optimizelegibility; 92 | } 93 | 94 | h1 { 95 | font-size: 44px; 96 | line-height: 85%; 97 | } 98 | 99 | h2 { 100 | line-height: 110%; 101 | font-size: 36px; 102 | } 103 | 104 | h3 { 105 | font-size: 28px; 106 | } 107 | 108 | h4 { 109 | font-size: 20px; 110 | } 111 | 112 | h5 { 113 | font-size: 16px; 114 | } 115 | 116 | h6 { 117 | font-size: 13.6px; 118 | } 119 | 120 | li { 121 | line-height: 20px; 122 | } 123 | 124 | h1 { 125 | color: #ff0000; 126 | margin:0 127 | } 128 | 129 | h2 { 130 | color: #66ff00; 131 | } 132 | 133 | h3 { 134 | color: #ffff00; 135 | } 136 | 137 | h4 { 138 | color: #ffcc00; 139 | } 140 | 141 | h5 { 142 | color: #0000ff; 143 | } 144 | 145 | h6 { 146 | color: #ff00ff; 147 | } 148 | 149 | a { 150 | text-decoration: underline; 151 | } 152 | 153 | a:hover { 154 | text-decoration: underline !important; 155 | } 156 | 157 | blink { 158 | color: yellowgreen; 159 | padding-top:3em; 160 | font-size: 3em; 161 | -webkit-animation: blink 1s linear infinite; 162 | -moz-animation: blink 1s linear infinite; 163 | -ms-animation: blink 1s linear infinite; 164 | -o-animation: blink 1s linear infinite; 165 | animation: blink 1s linear infinite; 166 | } 167 | 168 | span.runner{ 169 | color: orange; 170 | font-weight: bold; 171 | } 172 | span.winner{ 173 | color: red; 174 | font-weight: bold; 175 | 176 | } 177 | 178 | body { 179 | -webkit-font-smoothing: none; 180 | background: #0000ff url('../img/microfab.gif') top left; 181 | } 182 | 183 | span.rainbow { 184 | background: #000000 url('../img/rainbow.gif') top left; 185 | } 186 | 187 | div.flames{ 188 | background: #000000 url('../img/flames.gif'); 189 | bottom: 0; 190 | position:fixed; 191 | height:70px; 192 | width:100%; 193 | margin-left: -10vw; 194 | margin-bottom: 0; 195 | } 196 | 197 | 198 | @-webkit-keyframes blink { 199 | 0% { 200 | opacity: 0; 201 | } 202 | 40% { 203 | opacity: 0; 204 | } 205 | 41% { 206 | opacity: 1; 207 | } 208 | 99% { 209 | opacity: 1; 210 | } 211 | 100% { 212 | opacity: 0; 213 | } 214 | } 215 | 216 | @-moz-keyframes blink { 217 | 0% { 218 | opacity: 0; 219 | } 220 | 40% { 221 | opacity: 0; 222 | } 223 | 41% { 224 | opacity: 1; 225 | } 226 | 99% { 227 | opacity: 1; 228 | } 229 | 100% { 230 | opacity: 0; 231 | } 232 | } 233 | 234 | @-ms-keyframes blink { 235 | 0% { 236 | opacity: 0; 237 | } 238 | 40% { 239 | opacity: 0; 240 | } 241 | 41% { 242 | opacity: 1; 243 | } 244 | 99% { 245 | opacity: 1; 246 | } 247 | 100% { 248 | opacity: 0; 249 | } 250 | } 251 | 252 | @-o-keyframes blink { 253 | 0% { 254 | opacity: 0; 255 | } 256 | 40% { 257 | opacity: 0; 258 | } 259 | 41% { 260 | opacity: 1; 261 | } 262 | 99% { 263 | opacity: 1; 264 | } 265 | 100% { 266 | opacity: 0; 267 | } 268 | } 269 | 270 | @keyframes blink { 271 | 0% { 272 | opacity: 0; 273 | } 274 | 40% { 275 | opacity: 0; 276 | } 277 | 41% { 278 | opacity: 1; 279 | } 280 | 99% { 281 | opacity: 1; 282 | } 283 | 100% { 284 | opacity: 0; 285 | } 286 | } 287 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 
43 |
44 | name: Adrià Cabeza Sant'Anna
45 |
46 | email: adriacabezasantanna[at]gmail.com
47 |
48 | github: adriacabeza
49 |
50 |