在setInterval函数内部具有mousemove函数的SVG动画

Question

I am trying to create something with SVG that responds to mouse movement combined with random movement.

you can check the code here
https://jsfiddle.net/hass/Lfv2yjyf/

$(document).ready(function(){
    var d = document;
    var mysvg = d.getElementById("mysvg");

    var mx,my,random,xmid,ymid,input;

    setInterval(function() {
        //svg size
        var svgw = $("svg").width();
        var svgh = $("svg").height();

        //center point of svg
        xmid = svgw/2;
        ymid = svgh/2;

        //random numbers
        random = {
            a: Math.floor(Math.random()*25),
            b: Math.floor(Math.random()*25),
            c: Math.floor(Math.random()*25)
        };

        //add event to svg
        mysvg.addEventListener("mousemove", function(e) {
            //aqcuire mouse position relative to svg
            mx = e.clientX;
            my = e.clientY;

            //add <path> to svg
            input = '<path d="M ' + xmid + ',' + ymid + ' l ' + 0 + ',' + 0 + ' ' + ((mx-xmid)/2) + ',' + random.a + ' ' + ((mx-xmid)-((mx-xmid)/2)) + ',' + ((my-ymid)-random.a) + ' ' + '" stroke="orange" stroke-width="7" stroke-linejoin="round" fill="none" />';
        });

        //display datas
        $("#status1").html("X Position : " + mx + "<br>Y Position: " + my + "<br><br>Center Point X: " + xmid + "<br><br>Center Point Y: " + ymid + "<br><br>Width: " + svgw + "<br>Height: " + svgh + "<br><br>Random Value a: " + random.a + "<br>Random Value b: " + random.b + "<br>Random Value c: " + random.c);

        $("#mysvg").html(input);
    }, 10);
});

My problem here is the random movement of the line at midpoint only responds when I move the mouse, I know it doesn't work because the random value is only acquired with mouse movement.

what I'm trying to do is I want the random movement even without the mouse movement.

so I want to know how I acquire the values of global object in setInterval every 10 milliseconds or whatever value I set at "setInterval" function but I prefer almost every millisecond so I could get the random vibrating effect.

I also tried to write the "path" outside of mousemove function and it works and this is something I wanted to achieve

https://jsfiddle.net/hass/d2L4hda5/

but the problem here is when I check the console (browser's development tool → console tab) the values of the mouse x and mouse y is "NaN". but the rendering works.

I cannot figure out what I'm missing here.

so I want to get some advice if second link is what I want to achieve and get the right values of mouse x and mouse y or any other technique that works best.

Regards.

Answer 1

I'm not entirely sure what you problem is here. Is your problem that you can't seem to see the values iof mx and my in your browser tools? How are you trying to read them? Note that they aren't global variables. They are local to the ready() function. So, for instance, you won't be able to see the value if you simply type mx into the console.

Note also, that you don't need to keep adding the mousemove event handler every time your interval timer function gets called. It can be totally independent. See below.

 $(document).ready(function(){ var d = document; var mysvg = d.getElementById("mysvg"); var mx,my,random,xmid,ymid,input; //svg size var svgw = $("svg").width(); var svgh = $("svg").height(); //center point of svg xmid = svgw/2; ymid = svgh/2; //add event to svg mysvg.addEventListener("mousemove", function(e) { //aqcuire mouse position relative to svg mx = e.clientX; my = e.clientY; }); setInterval(function() { //random numbers random = { a: Math.floor(Math.random()*25), b: Math.floor(Math.random()*25), c: Math.floor(Math.random()*25) }; //add <path> to svg input = '<path d="M ' + xmid + ',' + ymid + ' l ' + 0 + ',' + 0 + ' ' + ((mx-xmid)/2) + ',' + random.a + ' ' + ((mx-xmid)-((mx-xmid)/2)) + ',' + ((my-ymid)-random.a) + ' ' + '" stroke="orange" stroke-width="7" stroke-linejoin="round" fill="none" />'; //display datas $("#status1").html("X Position : " + mx + "<br>Y Position: " + my + "<br><br>Center Point X: " + xmid + "<br><br>Center Point Y: " + ymid + "<br><br>Width: " + svgw + "<br>Height: " + svgh + "<br><br>Random Value a: " + random.a + "<br>Random Value b: " + random.b + "<br>Random Value c: " + random.c); $("#mysvg").html(input); }, 10); }); 

 html, body { width: 100%; height: 100%; padding: 0; margin: 0; } body { overflow: hidden; } #wrapper { width: 100%; min-height: 100%; margin: 0 auto; position: relative; } svg { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%; outline: 1px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <p id="status1"></p> <svg id="mysvg" width="300" height="300"></svg> </div>