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/

RobH · Accepted Answer · 2014-01-28 08:46:44Z

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

edited Jan 28, 2014 at 8:46

answered Jan 22, 2014 at 14:03

RobH

3,6101 gold badge25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nevin Over a year ago

Is the "item" on the iterateItems function the object? And i kinda didn't understand both the "this.iterateItems" and "this.get" functions. Is there an inbuilt get function on js? and the iterateitems function,can u explain the logic? Sorry if i sound kinda dumb,am learning javascript.

Nevin Over a year ago

And is it possible if u can set that fiddle working in such a way that there is an output? Cuz i have been spending hours on this problem,cant seem to fix it with my limited knowledge.

RobH Over a year ago

LimitedArray is a constructor function - if you google that you should find some good tutorials that will explain all the this.get etc. The fiddle does produce output - it logs to your console. Google browser developer console to find out how to get to it on your browser.

Nevin Over a year ago

Ahh i got the fiddle. But it used only single inputs right? How do u handle 2 inputs? That was the confusing part for me,since it has to be inputted dynamically from the mouse pointer position. Can u do that on the fiddle : jsfiddle.net/BVeTH/10 i have updated it a bit. Much appreciated. :)

Nevin Over a year ago

let us continue this discussion in chat

|

Erik Honn · Accepted Answer · 2014-01-22 13:11:58Z

0

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(...);

edited Jan 22, 2014 at 13:11

answered Jan 22, 2014 at 12:58

Erik Honn

7,5665 gold badges36 silver badges42 bronze badges

2 Comments

Nevin Over a year ago

"Uncaught TypeError: Object #<Object> has no method 'push' " This turned up when i tried that.

Erik Honn Over a year ago

You need to do tail.push(obj) not tail[i].push(obj). The latter does not push into array at position i, it grabs the object at position i and tries to push into that object, and since that object is not an array it can't. You can also use tail.unshift(obj) to push the object to the front of the array instead.

Collectives™ on Stack Overflow

Adding objects into an array in javascript

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related