Adding objects into an array in javascript

Question

I am trying to get the mouse pointer coordinates and store them into an array(tail) such that the array is limited only to 100 objects. If extra objects comes,the old one's are to be replaced with the new one's. Basically like a queue. Basically i am trying to create a trail after the basic circle using a circle of smaller radius.

Here's my js:

 $(document).ready(function() {
    var tail = {
        x:0,
        y:0
    };
    var i = 0;
    var stage = new Kinetic.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
        listening: true
    });
    var layer = new Kinetic.Layer({
        listening: true
    });
    var layer = new Kinetic.Layer();
    var player = new Kinetic.Circle({
        x: 20,
        y: 20,
        radius: 6,
        fill: 'cyan',
        stroke: 'black',
        draggable: true
    });

  var pixel = new Kinetic.Circle({
        x: 20,
        y: 20,
        radius: 2,
        width: stage.getWidth(),
        height: stage.getHeight(),
        fill: "white"
    });

    layer.add(player);
    stage.add(layer);

    // move the circle with the mouse
    stage.getContent().addEventListener('mousemove', function() {
        player.setPosition(stage.getPointerPosition());
        console.log(stage.getPointerPosition());
        var obj = {
            x: stage.getPointerPosition().x,
            y: stage.getPointerPosition().y
        }
        tail[i].push(obj);
        ++i;
        console.log(tail[i]);
//        pixel.setPosition(tail[i], tail[i + 1]);
        layer.draw();
    });
  });

And here's the html:

 <!DOCTYPE html>
<html>
    <head>
        <title>Collision Detection</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="../css/style.css"/>
    </head>
    <body>
        <div id="container" style=" background:#000; margin:auto; float:left;"></div>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/kinetic-v5.0.0.min.js"></script>
        <script src="../js/main_kinetic.js"></script>
    </body>
</html>

Output: Uncaught TypeError: Cannot call method 'push' of undefined main_kinetic.js:46 Object {x: 656, y: 175} --> console output which returns the cursor position.

Here's the fiddle: http://jsfiddle.net/BVeTH/

Answer 1

You could create your own container for your data points that handles only keeping 100 (or however many you want). Something like this:

var LimitedArray = function (upperLimit) {
    var storage = [];

    // default limit on length if none/invalid supplied;
    upperLimit = +upperLimit > 0 ? upperLimit : 100;

    this.push = function (item) {
        storage.push(item);
        if (storage.length > upperLimit) {
            storage.shift();
        }
        return storage.length;
    };

    this.get = function (i) {
        return storage[i];
    };

    this.iterateItems = function (iterator) {
        var i, l = storage.length;
        if (typeof iterator !== 'function') { return; }
        for (i = 0; i < l; i++) {
            iterator(storage[i]);
        }
    };
};

(see here: http://jsfiddle.net/Frm27/4/ )

Then you can track your datapoints easily:

var trail = new LimitedArray(100);

// code...

// move the circle with the mouse
stage.getContent().addEventListener('mousemove', function() {
    player.setPosition(stage.getPointerPosition());
    console.log(stage.getPointerPosition());
    var obj = {
        x: stage.getPointerPosition().x,
        y: stage.getPointerPosition().y
    }
    trail.push(obj);
    trail.iterateItems(function (item) { 
         // Do something with each item.x and item.y
    });
    //        pixel.setPosition(tail[i], tail[i + 1]);
    layer.draw();
});

Answer 2

Unless you reassign it somewhere I am not seeing tail is not an array.

var tail = {
    x:null,
    y:0
};

If you wanted to store objects with x and y coordinates in it you would need

var tail = [{
    x:null,
    y:0
}];
tail.push(...);

Adding objects into an array in javascript

Question

2 answers

solution1
1 ACCPTED 2014-01-22 14:03:34

solution2
0 2014-01-22 12:58:24

Adding objects into an array in javascript

Question

2 answers

solution1 1 ACCPTED 2014-01-22 14:03:34

solution2 0 2014-01-22 12:58:24

solution1
1 ACCPTED 2014-01-22 14:03:34

solution2
0 2014-01-22 12:58:24