SVG animation with mousemove function inside setInterval function

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/Lfv2yjy

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>