ভবিষ্যতের মাউস পয়েন্টার ট্রেইলগুলি প্রদর্শন করুন!


24

D3js ব্যবহারের এই উদাহরণ থেকে অনুপ্রাণিত হয়ে , আমি আপনাকে একটি ক্যানভাস (বা আপনার পছন্দসই ভাষা পছন্দসই সমতুল্য) তৈরি করার জন্য চ্যালেঞ্জ জানাব যাতে মাউস পয়েন্টার ট্রেলগুলি প্রদর্শিত হবে, নিম্নলিখিত মোচড় সহ:

টুইস্ট

মাউস পয়েন্টারটি যেখানে ছিল সেগুলির ট্রেলগুলি আপনার প্রদর্শন করা উচিত নয় , তবে ভবিষ্যতে এটি কোথায় হবে তার "ট্রেইলগুলি" ।

আপনি এটি ব্যবহার করে এটি করতে পারেন:

  1. একটি সময় মেশিন, বা

  2. পূর্ববর্তী মাউস আন্দোলনের উপর ভিত্তি করে সম্ভাব্য অনুমান

অনুমিতি

আপনি যদি সময় মেশিন বাস্তবায়ন চয়ন না করেন, যখন মাউস থ্রেশহোল্ড মিলিসেকেন্ডের বেশি না সরায় , আপনি কোনও ট্রেইল প্রদর্শন করতে পারবেন না। ( প্রান্তিক মানটি আপনি পছন্দ করতে পারেন)।

কার্সার চিত্রটি আপনার উপর নির্ভর করে এবং ওএসের কার্সারের মতো হতে হবে না (আপনি এমনকি একটি সরল ছোট বৃত্ত বা বিন্দুও আঁকতে পারেন)।

কোনও খারাপ ইনপুট পরীক্ষা করা হবে না: আপনি আন্দোলনগুলি মসৃণ বলে ধরে নিতে পারেন। এই ক্ষেত্রে 'স্মুথ' সংজ্ঞাটি হ'ল: যদি মাউস মুভমেন্টগুলি ক্যানভাসের এক্স এবং ওয়াই অক্ষের উপরে একটি ফাংশন হত - এটি একটি ক্রমাগত ফাংশন হবে।

জয়লাভ

কোডের সর্বনিম্ন অক্ষরের সাথে বৈধ উত্তরটি জিতবে। টাই করার ক্ষেত্রে - যেটি প্রথম পোস্ট করা হয়েছিল সে বিজয়ী হবে।

সম্পাদনা: সর্বাধিক প্রচার সহ বৈধ উত্তরটি জিতবে। টাই করার ক্ষেত্রে - যেটি প্রথম পোস্ট করা হয়েছিল সে বিজয়ী হবে। আপনি বাস্তবায়নে সৃজনশীল হতে পারেন, বা পূর্বাভাসের সাথে সুনির্দিষ্ট হতে পারেন। আমি আর বিচারক নই, আমরা সবাই :)

  • একটি বৈধ উত্তরে অবশ্যই আমার সাথে (টেস্ট! আমি পরীক্ষার অর্থ দিয়েছিলাম) খেলার জন্য একটি উপায় অন্তর্ভুক্ত করতে হবে, তা কোনও অনলাইন সরঞ্জামে বা একটি অবাধে ডাউনলোডযোগ্য সংকলক / ইন্টারপ্রেটার / রানটাইম / ইত্যাদি।

2
আমি মনে করি এই প্রশ্নটি কোনও কোড-গল্ফের চেয়ে জনপ্রিয়তার প্রতিযোগিতার পক্ষে আরও উপযুক্ত হতে পারে, কারণ এটি যথেষ্ট পরিমাণে পূর্বাভাস হিসাবে কী যোগ্যতা অর্জন করতে পারে তা মোটামুটি বিষয়গত। আমি তা স্পষ্ট করে বা ট্যাগ পরিবর্তন করার পরামর্শ দেব। তবুও, মজা লাগে।
isaacg

2
তুমি ঠিক বলছো. আমি প্রশ্নটি সম্পাদনা করেছি এবং ট্যাগটি পরিবর্তন করেছি।
ইয়াকুব

কারও জন্য মেশিন লার্নিং অ্যালগরিদম বাস্তবায়নের সময়!
ইনগো বার্ক

6
পরীক্ষার উদ্দেশ্যে, আপনি কোন মডেলের টাইম মেশিনের অ্যাক্সেস করতে পারেন? এবং আমরা কি তাদের সাথে ইন্টারফেসের জন্য স্ট্যান্ডার্ড লাইব্রেরি ব্যবহার করতে পারি?
পিটার টেলর

1
এখানে কেবল একজন গণিতবিদ ঝকঝকে: মসৃণ! = অবিচ্ছিন্ন। আসলে বুনো স্পাইকি আন্দোলন এখনও অবিচ্ছিন্ন থাকবে।
CompuChip

উত্তর:


33

জাভাস্ক্রিপ্ট

আমার প্রোগ্রামটি সর্বশেষ 20 মাউস পদক্ষেপের দিকের কৌণিক পরিবর্তনের গড় ব্যবহার করে পয়েন্টারের দিকের পূর্বাভাস দেয়। এটি পয়েন্টারের সম্ভাব্য অবস্থান এবং দিকনির্দেশগুলির একটি "মেঘ" তৈরি করতে কৌণিক পরিবর্তনের বৈকল্পিকতাও ব্যবহার করে। "মেঘ" এর প্রতিটি পয়েন্টারের রঙটি মাউস পয়েন্টারটির নতুন অবস্থান হওয়ার সম্ভাবনাটি প্রতিনিধিত্ব করে বলে মনে করা হয়, যেখানে গাer় রঙগুলি একটি বৃহত্তর সম্ভাবনা উপস্থাপন করে। মাউসের সামনের পয়েন্টার মেঘের দূরত্বটি মাউস চলাচলের গতি ব্যবহার করে গণনা করা হয়। এটি সেরা পূর্বাভাস দেয় না তবে এটি ঝরঝরে দেখাচ্ছে।

এখানে একটি বেহালতা: http://jsfiddle.net/5hs64t7w/4/

পয়েন্টার মেঘের আকার বাড়ানো দেখতে আকর্ষণীয়। cloudSizeপ্রোগ্রামের প্রথম লাইনে ভেরিয়েবল পরিবর্তন করে এটি সেট করা যেতে পারে । এখানে মেঘ আকারের 10 টির সাথে একটি ফ্রিডল রয়েছে : http://jsfiddle.net/5hs64t7w/5/

আমি এই উত্সগুলি বিজ্ঞপ্তি গড় এবং বৈচিত্রের সূত্রগুলি পেতে ব্যবহার করেছি:
বিজ্ঞপ্তি গড়: http://en.wikedia.org/wiki/Circular_mean
বিজ্ঞপ্তি বৈকল্পিক: http://www.ebi.ac.uk/thornton-srv/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
পরিবর্তনশীল দিক নির্দেশকারী পয়েন্টারের পরিবর্তে আপনি কি মাউস পয়েন্টার (স্থির দিকনির্দেশ সহ) এর ক্রম প্রদর্শন করতে পারেন? আমি "মাউস ট্রেলস" দেখার আশা করছিলাম তবে হাহা কিছুই দেখতে পাচ্ছি না
জাস্টহাল্ফ

খুব সুন্দর, তবে এটি কী আরও প্রশংসনীয় নয় যে পয়েন্টারটি বর্তমানে নীচে নেমে যাওয়ার পরে ভবিষ্যতে উপরে উঠে যাওয়া উচিত? ইমো, প্রোগ্রামটি ঠিক তার বিপরীতে করা উচিত যাতে এটি পয়েন্টারটি স্ক্রিনে থেকে যায়।
ম্যাডমিনিয়ো

@ মেন্নোগউ এটি নিখুঁত নয় তবে এটির জন্য খুব সুন্দর
নিন্দা

@ নিমচিম্পস্কি শুধু বলছেন মাউসটি বর্তমানে নিচে চলে যাওয়ার সম্ভাবনা বেশি। প্রোগ্রাম নিজেই দুর্দান্ত।
ম্যাডমিনিয়ো

আপনি কি মনে করেন যে মাউস পরিচালনার জন্য সাধারণ মানুষের ব্যবহার ব্যবহার করা সম্ভব? চেনাশোনাগুলির মতো, সরল রেখাগুলি ... ভবিষ্যতেও এগুলি আরও পূর্বাভাস দেওয়া যেতে পারে (কয়েক দফা ম্যাসেজ করার পরে বৃত্তের ব্যাসার্ধ গণনা করা, এবং আপনি এটি খসড়া তৈরির আগেই বৃত্তটি সমাপ্ত করে)
জাফরান ২

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);
    }

}

কোড নেটবিয়ানদের দ্বারা কিছুটা অপ্টিমাইজড হয়েছে (সতর্কতা থেকে মুক্তি পেয়েছে): পেস্টবিন.com
কাজ ওল্ফ

10

ভ্যানিলা জাভাস্ক্রিপ্ট

কেবল জিনিস শুরু করতে এখানে দুটি মানের উপর ভিত্তি করে একটি সাধারণ পূর্বাভাস দেওয়া হয়েছে। শেষের nমাউস পোস্টগুলি মুখস্থ এবং একটি কাতারে রাখা হয়, ভবিষ্যদ্বাণীটি সারিতে প্রথম এবং শেষ উপাদানটির একটি সাধারণ লিনিয়ার অতিরিক্ত বহির্মুখ tion

এটি কেবলমাত্র পূর্বাভাস কোড, ডেমো সহ পুরো কোডটি এখানে দেখা যায় 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পৃথক ভবিষ্যদ্বাণীযুক্ত অ্যালগরিদম প্রয়োগ করতে ব্যবহার করতে চান তবে নির্দ্বিধায়। যাইহোক এটি অনেক বেশি কাজ নয়।


আপনি কি লাইনের পরিবর্তে মাউস পয়েন্টার প্রদর্শন করতে পারবেন? আমি "মাউস ট্রেলস" দেখার আশা করছিলাম তবে হাহা কিছুই দেখতে পাচ্ছি না
জাস্টহাল্ফ

প্রশ্নটি বলে যে এটি একটি কার্সার হতে হবে না;)
ইনগো বার্ক

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>

হা হা আমি তারিখে একবার তাকান। যাই হোক না কেন, আমি এটি পছন্দ করি
ফিলিপ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.