Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Masina</title>
        <script src=build/tracking-min.js></script>
        <style>
            body {
                background-color: #fff;
                margin: 0px;
                font-family: "Arial", monospace;
                font-size: 30px;
                color: #888ed1;
                overflow: hidden;
                myVideo {
                    margin-left: 100px;
                    margin-top: 35px;
                    position: absolute;
                }

            }
        </style>
        <script src="/build/tracking-min.js"></script>
    </head>
    <body>
        <video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
        <canvas id="cvs"></canvas>
        <script>
            var fps = 60; // Kadrai per sekunde
            var video = document.getElementById("myVideo")
            var canvas = document.getElementById("cvs");
            var ctx = canvas.getContext("2d");
            var m_img = new Image();
            m_img.src = "masina.png";
            var mx = 0;
            var my = 0;
            var md = false; //md - mouse down
            //var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

            var tracker = new tracking.ColorTracker();

           tracking.track("#myVideo", tracker, { camera: true });

            tracker.on("track", function(event) {
                context.clearRect(0, 0, canvas.width, canvas.height);

                event.data.forEach(function(rect) {
                    if (rect.color === "#fff") {
                        rect.color = tracker.customColor;
                    }

                    context.strokeStyle = rect.color;
                    context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                    context.fillStyle = "#fff";
                    context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
                    context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
                });
            });


            function Masina(xas, yas, spd){
                this.x = xas;
                this.y = yas;
                this.angle = 0; //pasisukimo kampas
                this.speed = spd;

                this.step = function(){
                    var dx = mx - this.x; //atstumas tarp tanko ir peles X asyje
                    var dy = my - this.y; //atstumas Y asije
                    this.angle = Math.atan2(dy, dx);

                    if(md){
                        this.x += Math.cos(this.angle) * this.speed;
                        this.y += Math.sin(this.angle) * this.speed;
                    }


                }

                this.draw = function(){
                    ctx.save();
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.angle);
                    ctx.drawImage(m_img, -25, -25);
                    ctx.restore();
                }
            }

            function frame(){ // Kartoja pati save
                setTimeout(frame, 1000/fps);
                calc();
                requestAnimationFrame(render);
            }

            function calc(){ // Skaiciavimai
                car.step();
            }

            function render(){ // Piesimas ekrane
                ctx.clearRect(0,0, canvas.width, canvas.height);
                car.draw();
            }

            function resize() { //canvas prisitaiko prie lango dydzio
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }

            function mmove(evt){//kai juda pele
                mx = evt.clientX;
                my = evt.clientY;
            }

            function mdown(){ //kai pele paspausta md = true
                md = true;

            }

            function mup(){ //kai pele paspausta md = false
                md = false;
            }

            resize();
            var car = new Masina(canvas.width/2, canvas.height/2, 4);
            window.addEventListener("resize", resize);
            document.addEventListener("mousemove", mmove);
            document.addEventListener("mousedown", mdown);
            document.addEventListener("mouseup", mup);


            //tracking.track('#myVideo', colors);

            frame(); // Kadru laikmacio startas
        </script>
    </body>
</html>