posenet-pose-detection-game/index.html at master · umutkcbs/posenet-pose-detection-game · GitHub

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
<head>
    <meta charset="UTF-8">
</head>
<body>
<div>PoseNet Smashing Stars</div>
<button type="button" onclick="init()">Start</button>
<img id="elel" src="el.png" height="50px" style="position: absolute;">
<img id="yildiz" src="yil.png" height="50px" style="position: absolute;">
<div><canvas id="canvas" style="background: url(arka.png);"></canvas></div>
<h1 style="position: absolute; bottom: 0; color: green">Score: </h1>
<h1 id="sayac" style="position: absolute; bottom: 0; left: 10%; color: green;">0</h1>
<h1 id="kronometre" style="position: absolute; bottom: 0; right: 10%; color: orange;">60</h1>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>

<script type="text/javascript">
    var zaman = 60;
    var skor = 0;
    var audio = new Audio('bep.mp3');

    var yildiz = document.getElementById("yildiz");
    var yilx;
    var yily;

    function gen() {
        yilx = Math.floor(Math.random() * 601) + 1;
        yily = Math.floor(Math.random() * 601) + 1;

        yildiz.style.left = yilx;
        yildiz.style.top = yily;
    }

    function sure() {
    	zaman = zaman - 1;
	    document.getElementById("kronometre").innerHTML = zaman;

        if (zaman == 0) {
            alert("TIME'S UP!\nScore: " + skor);
        } else if (zaman < 0) {
            location.reload();
        }
    }

    // More API functions here:
    // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
    var bilekx = 0;
    var bileky = 0;
    var el = document.getElementById("elel");

    gen();

    // the link to your model provided by Teachable Machine export panel
    const URL = "https://teachablemachine.withgoogle.com/models/zjevLyRHq/";
    let model, webcam, ctx, labelContainer, maxPredictions;

    async function init() {
        const modelURL = URL + "model.json";
        const metadataURL = URL + "metadata.json";

        // load the model and metadata
        // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
        // Note: the pose library adds a tmPose object to your window (window.tmPose)
        model = await tmPose.load(modelURL, metadataURL);
        //maxPredictions = model.getTotalClasses();

        // Convenience function to setup a webcam
        const size = 600;
        const flip = true; // whether to flip the webcam
        webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
        await webcam.setup(); // request access to the webcam
        await webcam.play();
        window.requestAnimationFrame(loop);


        // append/get elements to the DOM
        const canvas = document.getElementById("canvas");
        canvas.width = size; canvas.height = size;
        ctx = canvas.getContext("2d");

        var t=setInterval(sure, 1000);
    }

    async function loop(timestamp) {
        webcam.update(); // update the webcam frame
        await predict();
        window.requestAnimationFrame(loop);
    }

    async function predict() {
        // Prediction #1: run input through posenet
        // estimatePose can take in an image, video or canvas html element
        const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
        // Prediction 2: run input through teachable machine classification model
        //const prediction = await model.predict(posenetOutput);

        try {
            bilekx = pose.keypoints[9].position.x;
            bileky = pose.keypoints[9].position.y;
            //console.log(bilekx, bileky);

            elel.style.left = bilekx - 15;
            elel.style.top = bileky;

        } catch(err) {
            console.error("OLMUYOOOOR OLMUYOOOR NE YAPSAM OLMUYOOOOOOOR");
        }

        if (yilx < bilekx && bilekx < yilx + 50 && yily < bileky && bileky < yily + 50) {
            skor = skor + 1;
            document.getElementById("sayac").innerHTML = skor;
            audio.play();
            gen();
        }
        // finally draw the poses
        drawPose(pose);
    }

    function drawPose(pose) {
        if (webcam.canvas) {
            ctx.drawImage(canvas, 0, 0);
            ctx.clearRect(0, 0, 600, 600);
            // draw the keypoints and skeleton
            if (pose) {
                const minPartConfidence = 0.5;
                tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx, keypointSize = 3);
                tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx, lineWidth = 6, strokeColor = 'red');
            }
        }
    }
</script>

<script>
    //console temizletme
    var t=setInterval(temizle, 10000);

    function temizle() {
        console.clear();
    }
</script>
</body>