भविष्य के माउस पॉइंटर ट्रेल्स ... प्रदर्शित करें!


24

D3js के उपयोग के इस उदाहरण से प्रेरित होकर , मैं आपको एक कैनवास बनाने के लिए चुनौती देता हूं (या आपकी भाषा-पसंद के बराबर) जिसमें माउस पॉइंटर ट्रेल्स को निम्न मोड़ के साथ प्रदर्शित किया जाएगा:

ट्विस्ट

जहां माउस पॉइंटर था , वहां आपको ट्रेल्स प्रदर्शित नहीं करना चाहिए , लेकिन यह भविष्य में कहां (हो सकता है) का "ट्रेल्स" होगा

आप इसका उपयोग करके कर सकते हैं:

  1. एक टाइम मशीन, या

  2. पिछले माउस आंदोलनों के आधार पर संभाव्य अनुमान

मान्यताओं

यदि आपने समय मशीन कार्यान्वयन का चयन नहीं किया है, जब माउस थ्रेशोल्ड मिलीसेकंड से अधिक नहीं चलता है , तो आप ट्रेल्स में से कोई भी प्रदर्शित नहीं कर सकते हैं। ( थ्रेशोल्ड वैल्यू आप पर निर्भर है।)

कर्सर छवि आपके ऊपर है और इसमें OS के कर्सर के समान नहीं है (आप एक सादे छोटे वृत्त या डॉट्स भी बना सकते हैं)।

किसी भी बुरे इनपुट का परीक्षण नहीं किया जाएगा: आप मान सकते हैं कि चालें चिकनी हैं। इस मामले के लिए 'चिकनी' परिभाषा है: यदि माउस की चालें कैनवास के x और y अक्ष पर एक फ़ंक्शन थीं - यह एक निरंतर कार्य होगा।

जीतना

कोड में कम से कम वर्णों के साथ मान्य उत्तर जीत जाएगा। एक टाई के मामले में - जो पहले पोस्ट किया गया था वह जीत जाएगा।

संपादित करें: सबसे अपवोट के साथ मान्य उत्तर जीत जाएगा। एक टाई के मामले में - जो पहले पोस्ट किया गया था वह जीत जाएगा। आप कार्यान्वयन पर रचनात्मक हो सकते हैं, या भविष्यवाणी के साथ सटीक हो सकते हैं। मैं अब जज नहीं हूं, हम सब हैं :)

  • एक वैध उत्तर में मेरे साथ खेलने के लिए एक तरीका शामिल होना चाहिए (परीक्षण! मेरा परीक्षण था), या तो एक ऑनलाइन टूल पर या स्वतंत्र रूप से डाउनलोड करने योग्य कंपाइलर / दुभाषिया / रनटाइम / आदि।

2
मुझे लगता है कि यह सवाल एक कोड-गोल्फ की तुलना में एक लोकप्रियता प्रतियोगिता के लिए बेहतर हो सकता है, क्योंकि यह काफी व्यक्तिपरक है जो एक अच्छा पर्याप्त भविष्यवाणी के रूप में योग्य है। मैं यह स्पष्ट करने या टैग बदलने की सलाह दूंगा। फिर भी, मजेदार लग रहा है।
isaacg

2
आप सही हे। मैंने प्रश्न संपादित किया और टैग बदल दिया।
जैकब

मशीन लर्निंग एल्गोरिदम को लागू करने के लिए किसी के लिए समय!
इंगो बुर्क

6
परीक्षण उद्देश्यों के लिए, आपके पास समय मशीन के कौन से मॉडल हैं? और क्या हम उनके साथ इंटरफेस करने के लिए मानक पुस्तकालयों का उपयोग कर सकते हैं?
पीटर टेलर

1
बस एक गणितज्ञ यहाँ रोता है: चिकनी! = निरंतर। वास्तव में जंगली स्पाइकी आंदोलन अभी भी निरंतर रहेगा।
CompuChip

जवाबों:


33

जावास्क्रिप्ट

मेरा कार्यक्रम पिछले 20 माउस चाल की दिशा में कोणीय परिवर्तन के औसत का उपयोग करके सूचक की दिशा की भविष्यवाणी करता है। यह सूचक के संभावित स्थानों और दिशाओं के "क्लाउड" बनाने के लिए कोणीय परिवर्तन के विचरण का भी उपयोग करता है। "क्लाउड" में प्रत्येक पॉइंटर का रंग माउस पॉइंटर की नई स्थिति होने की संभावना को दर्शाता है, जहां गहरे रंग अधिक संभावना का प्रतिनिधित्व करते हैं। माउस के आगे पॉइंटर क्लाउड की दूरी की गणना माउस मूवमेंट की गति का उपयोग करके की जाती है। यह सबसे अच्छी भविष्यवाणी नहीं करता है लेकिन यह साफ-सुथरा दिखता है।

यहाँ एक पहेली है: http://jsfiddle.net/5hs64t7w/4/

पॉइंटर क्लाउड का आकार बढ़ाना दिलचस्प है। इसे cloudSizeप्रोग्राम की पहली लाइन पर वेरिएबल में बदलकर सेट किया जा सकता है । यहाँ एक बादल का आकार 10 है: http://jsfiddle.net/5hs64t7w/5/

मैंने इन स्रोतों का उपयोग परिपत्र माध्य और विचरण के लिए सूत्र प्राप्त करने के लिए किया है:
परिपत्र मीन: http://en.wikipedia.org/wiki/Circular_mean
परिपत्र वियरेन्सी: http://www.ebi.ac.uk/thornton-srun/software/ PROCHECK / nmr_manual / man_cv.html

अगर किसी को दिलचस्पी है तो यहां यह कोड है:

    var cloudSize = 3;

    var canvas = document.getElementById('canvas_element');
    var c = canvas.getContext('2d');
    var prevX = -1;
    var prevY = -1;
    var curX = -1;
    var curY = -1;
    var distance = 0;
    var direction = 0;

    function drawMouse(x, y, angle, gray){
        var grayVal = Math.round(gray*255);
        var grayString = "rgb(" + grayVal + "," + grayVal +"," + grayVal + ")";
        c.fillStyle = grayString;
        c.strokeStyle = grayString;
        c.lineWidth = 1;
        c.beginPath();
        c.moveTo(x, y);
        c.lineTo(x + 16*Math.cos(angle + Math.PI/2.0 + Math.PI/8.0), y + 16*Math.sin(angle + Math.PI/2.0 + Math.PI/8.0));
        c.moveTo(x, y);
        c.lineTo(x + 16*Math.cos(angle + Math.PI/2.0 - Math.PI/8.0), y + 16*Math.sin(angle + Math.PI/2.0 - Math.PI/8.0));
        c.lineTo(x + 16*Math.cos(angle + Math.PI/2.0 + Math.PI/8.0), y + 16*Math.sin(angle + Math.PI/2.0 + Math.PI/8.0));
        c.stroke();
        c.fill();
        c.beginPath();
        c.moveTo(x, y);
        c.lineTo(x + 24*Math.cos(angle + Math.PI/2), y + 24*Math.sin(angle + Math.PI/2));
        c.stroke();
    }

    function sum(array){
        var s = 0.0;
        for(var i=0; i<array.length; i++){
            s += array[i];
        }
        return s;
    }

    var sins = [];
    var coss = [];
    var lengths = [];
    var times = [];
    var index = 0;
    var limit = 20;
    var variance = 0;
    var prevTime = new Date().getTime();
    function updateDistanceAndDirection(x, y){
        var angle = Math.atan2(prevY - curY, prevX - curX);
        sins[index] = Math.sin(angle);
        coss[index] = Math.cos(angle);
        lengths[index] = Math.sqrt((curX-prevX)*(curX-prevX) + (curY-prevY)*(curY-prevY));
        var time = new Date().getTime();
        times[index] = time - prevTime;

        variance = 1.0 - Math.sqrt(sum(coss)*sum(coss)+sum(sins)*sum(sins))/sins.length;

        direction = Math.atan2(1/sins.length*sum(sins),1/coss.length*sum(coss));
        var speed = sum(lengths)/(sum(times)/200);
        distance = Math.min(Math.max(40, speed), 100);
        prevTime = time;
        index = (index+1)%limit;
    }

    function drawMice(count){
        c.clearRect(0, 0, canvas.width, canvas.height);

        for(var i=count; i>=0; i--){
            var dir = direction + i*variance;
            drawMouse(curX - distance*Math.cos(dir), curY - distance*Math.sin(dir), dir - Math.PI/2, i/count);
            dir = direction - i*variance;
            drawMouse(curX - distance*Math.cos(dir), curY - distance*Math.sin(dir), dir - Math.PI/2, i/count);
        }
    }

    canvas.onmousemove = function (event) {
        curX = event.clientX;
        curY = event.clientY;

        updateDistanceAndDirection(curX, curY);

        drawMice(cloudSize);

        prevX = curX;
        prevY = curY;
    };

2
क्या आप चर दिशा की ओर इशारा करते हुए सूचक के बजाय माउस पॉइंटर (निश्चित अभिविन्यास के साथ) का अनुक्रम प्रदर्शित कर सकते हैं? मैं "माउस ट्रेल्स" को देखने की उम्मीद कर रहा था, लेकिन
जस्टफुल

बहुत अच्छा, लेकिन क्या यह अधिक प्रशंसनीय नहीं है कि सूचक को भविष्य में ऊपर जाना चाहिए जब वह वर्तमान में नीचे जाता है? Imho, कार्यक्रम को इसके विपरीत करना चाहिए ताकि यह स्क्रीन पर सूचक के रहने की भविष्यवाणी करे।
मदमेनियो

@MennoGouw सही नहीं है, लेकिन इसके सुंदर शापित अच्छा
NimChimpsky

@nimchimpsky यह कहना कि माउस के ऊपर जाने की संभावना अधिक है यदि माउस वर्तमान में नीचे चला जाता है। कार्यक्रम ही महान है।
Madmenyo

क्या आपको लगता है कि माउस हैंडलिंग के लिए सामान्य मानव व्यवहार का उपयोग करना संभव है? हलकों की तरह, सीधी रेखाएँ ... ये भविष्य में और भी अधिक भविष्यवाणी की जा सकती हैं (एक जोड़े के इशारे के बाद वृत्त की त्रिज्या की गणना करना, और इससे पहले कि आप इसे तैयार किया जाए, तब भी सर्कल को खत्म करना)
केसर

14

जावा

मैंने टाइम मशीन का तरीका अपनाने का फैसला किया। यह पता चला है कि टाइम मशीन का मुख्य घटक java.awt.Robot है। मेरा कार्यक्रम आपको 10 सेकंड के लिए अपने माउस को घूमने देता है। 10 सेकंड के बाद यह समय पर वापस चला जाता है और आपके माउस आंदोलन को फिर से बनाता है, जबकि यह पूरी तरह से भविष्यवाणी करता है।

यहाँ छवि विवरण दर्ज करें

यहाँ कोड है:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.Robot;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;
import java.util.ArrayList;
import java.util.TimerTask;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;


public class TimeMachine extends JPanel implements MouseMotionListener {

    Timer timer;
    int time = 10;
    java.util.Timer taskTimer;
    ArrayList<Point> mousePoints;
    ArrayList<Long> times;
    Robot robot;
    int width, height;
    ArrayList<Point> drawMousePoints;

    public TimeMachine(){
        width = 500;
        height = 500;
        drawMousePoints = new ArrayList<Point>();

        robot = null;
        try{
            robot = new Robot();
        }
        catch(Exception e){
            System.out.println("The time machine malfunctioned... Reverting to 512 BC");
        }
        mousePoints = new ArrayList<Point>();
        times = new ArrayList<Long>();

        taskTimer = new java.util.Timer();

        ActionListener al = new ActionListener(){
            public void actionPerformed(ActionEvent e){
                time--;
                if(time == 0)
                    rewind();
                repaint();
            }
        };
        timer = new Timer(1000, al);
        start();
    }

    public void paint(Graphics g){
        g.clearRect(0, 0, width, height);
        g.drawString("Time Machine activiates in: " + time, 15, 50);
        for(int i=0; i<drawMousePoints.size(); i++){
            Point drawMousePoint = drawMousePoints.get(i);
            drawMouse(drawMousePoint.x-getLocationOnScreen().x, drawMousePoint.y-getLocationOnScreen().y, g, Color.BLACK, Color.LIGHT_GRAY, (double)i/drawMousePoints.size());
        }
    }

    public void drawMouse(int x, int y, Graphics g, Color line, Color fill, double alpha){
        Graphics2D g2d = (Graphics2D)g;
        g2d.setColor(new Color(fill.getRed(), fill.getGreen(), fill.getBlue(), (int)Math.max(Math.min(alpha*255, 255), 0)));
        g2d.fillPolygon(new int[]{x, x, x+4, x+8, x+10, x+7, x+12}, new int[]{y, y+16, y+13, y+20, y+19, y+12, y+12}, 7);

        g2d.setColor(new Color(line.getRed(), line.getGreen(), line.getBlue(), (int)Math.max(Math.min(alpha*255, 255), 0)));
        g2d.drawLine(x, y, x, y + 16);
        g2d.drawLine(x, y+16, x+4, y+13);
        g2d.drawLine(x+4, y+13, x+8, y+20);
        g2d.drawLine(x+8, y+20, x+10, y+19);
        g2d.drawLine(x+10, y+19, x+7, y+12);
        g2d.drawLine(x+7, y+12, x+12, y+12);
        g2d.drawLine(x+12, y+12, x, y);
    }

    public void start(){
        timer.start();
        prevTime = System.currentTimeMillis();
        mousePoints.clear();
    }

    public void rewind(){
        timer.stop();
        long timeSum = 0;
        for(int i=0; i<times.size(); i++){
            timeSum += times.get(0);
            final boolean done = i == times.size()-1;
            taskTimer.schedule(new TimerTask(){
                public void run(){
                    Point point = mousePoints.remove(0);
                    drawMousePoints.clear();
                    drawMousePoints.addAll(mousePoints.subList(0, Math.min(mousePoints.size(), 30)));
                    robot.mouseMove(point.x, point.y);
                    repaint();
                    if(done)
                        System.exit(0);
                }
            }, timeSum);
        }
    }

    long prevTime = 0;
    public void record(MouseEvent m){
        if(timer.isRunning()){
            long time = System.currentTimeMillis();
            mousePoints.add(new Point(m.getXOnScreen(), m.getYOnScreen()));
            times.add((time-prevTime)/10);
            prevTime = time;
        }
    }

    public static void main(String[] args){

        TimeMachine timeMachine = new TimeMachine();

        JFrame frame = new JFrame("Time Machine");
        frame.setSize(timeMachine.width, timeMachine.height);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
        frame.addMouseMotionListener(timeMachine);

        frame.add(timeMachine);
    }

    public void mouseDragged(MouseEvent m) {
        record(m);
    }

    public void mouseMoved(MouseEvent m) {
        record(m);
    }

}

नेटबीन्स द्वारा कोड को थोड़ा अनुकूलित किया गया (चेतावनियों से छुटकारा): pastebin.com/E57LZ4zY
कज़ वोल्फ

10

वेनिला जावास्क्रिप्ट

बस चीजों को शुरू करने के लिए, यहां दो मूल्यों पर आधारित एक सरल भविष्यवाणी है। अंतिम nमाउस पोस्ट को याद किया जाता है और एक कतार में रखा जाता है, भविष्यवाणी कतार में पहले और अंतिम तत्व का एक सरल रैखिक एक्सट्रपलेशन है।

यह सिर्फ भविष्यवाणी कोड है, डेमो सहित पूर्ण कोड में देखा जा सकता है this fiddle:

function predict(trail) {
    var b = trail.pop(),
        a = trail[0],
        d = {
            x: b.x - a.x,
            y: b.y - a.y
        },
        m = Math.sqrt( d.x * d.x + d.y * d.y );

    d.x = 5 * d.x / m;
    d.y = 5 * d.y / m;

    var predictions = [];
    for(var i = 1; i <= 10; i++) {
        predictions.push({
            x: b.x + i * d.x,
            y: b.y + i * d.y
        });
    }

    return predictions;
}

डेमो में भविष्यवाणी में एक टिप्पणी है जो आपको भविष्यवाणी के लिए कतार में अंतिम दो तत्वों का उपयोग करने की अनुमति देती है। परिणाम को अधिक "वास्तविक समय" बनाता है, लेकिन कम "चिकनी" भी।

यदि कोई भी boilerplate workएक अलग भविष्यवाणी एल्गोरिथ्म को लागू करने के लिए उपयोग करना चाहता है , तो स्वतंत्र महसूस करें। वैसे भी यह बहुत काम नहीं है।


क्या आप एक लाइन के बजाय माउस पॉइंटर प्रदर्शित कर सकते हैं? मैं "माउस ट्रेल्स" को देखने के लिए उम्मीद कर रहा था, लेकिन किसी भी नहीं देख सकते हैं, haha
justhalf

सवाल यह है कि यह एक कर्सर होने की जरूरत नहीं है;)
इंगो बुर्क

4

जावास्क्रिप्ट

अतीत भविष्य के लिए सबसे अच्छी भविष्यवाणी है - मुझे, और संभवतः किसी और को भी

मेरा समाधान बहुत सरल है। सबसे पहले, यहाँ >>> फिडेल है! <<<

यह सब कुछ पिछले निशान को स्थानांतरित कर रहा है, इसलिए यह भविष्य के निशान की तरह दिखता है। मूल रूप से कोई गणित शामिल नहीं है (मुझे पता है, बहुत उबाऊ)। आप आसानी से त्रुटियों को देख सकते हैं, खासकर जब कर्सर को हलकों में घुमाते हैं। इसलिए मैंने निशान को इतना छोटा कर दिया;)

कोड:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .cursor {
                width: 12px;
                height: 19px;
                position: absolute;
                background-image: url(https://i.imgur.com/h8imKBP.png);
            }
        </style>
        <script type="text/javascript">

            var x, y;
            window.onmousemove = function(e) {x=e.clientX; y=e.clientY;}

            var p = [0,0,0,0,0,0,0,0,0,0];
            window.setInterval(function() {
                p.shift();
                p.push([x, y]);
                var diff = [x-p[0][0], y-p[0][1]];
                for (var i = 0; i < 10; i++) {
                    var e = document.getElementById(i);
                    e.style.left = (p[9-i][0]+diff[0])+"px";
                    e.style.top = (p[9-i][1]+diff[1])+"px";
                }
            }, 10);

        </script>
    </head>
    <body>
    <div id="0" class="cursor"></div>
    <div id="1" class="cursor"></div>
    <div id="2" class="cursor"></div>
    <div id="3" class="cursor"></div>
    <div id="4" class="cursor"></div>
    <div id="5" class="cursor"></div>
    <div id="6" class="cursor"></div>
    <div id="7" class="cursor"></div>
    <div id="8" class="cursor"></div>
    <div id="9" class="cursor"></div>
    </body>
</html>

haha मैं सिर्फ तारीख पर एक नज़र था। जो भी हो, मुझे यह पसंद है
फेल्क
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.