I think your problem might not be with Canvas Library (which I've
never heard of before now) - but more with the fact that you store
coordinates in a string(?).
At one point you're doing this:
positionCoordinates[grid_id] = x_cord + "," + y_cord; // let's say
"50,75"
and later you do this:
xycoord = positionCoordinates[j].split(","); // this would result
in ["50", "75"]
x_cord = xycoord[0]; // "50"
y_cord = xycoord[1]; // "75"
x_cord is now a string - not a number.
In javascript string concatenation and number addition use the same
operator: + (plus)
So "50" + "-40" results in "50-40" not 10 as you would probably
expect. Thats what results in the console output:
examples.interactive.js:3611450-1305NaN,24957-24651NaN
You need to convert your strings to numbers (if you still insist on
storing coords in string format) - String.toInt method to the rescue:
x_cord = xycoord[0].toInt(); // 50 - now a number
y_cord = xycoord[1].toInt(); // 75 - also a number
...BUT you should definately consider using an array with numbers in
it for storing the coords! - and remember to declare your variables
with the "var" keyword - also in your for-loops
On Oct 4, 11:20 am, shouvik <[email protected]> wrote:
> Here is a Jsfiddle implementation of my code. Hope this helps.
>
> http://jsfiddle.net/WRRns/5/
>
> If I run it without the animate function it works fine. But
> otherwise.. You got to see it in a browser console to understand whats
> happening.
>
> You could find the usage of the function
> here.http://forvar.de/js/mcl/examples.interactive.html
>
> Thanks
> Shouvik
>
> On Oct 4, 10:50 am, Oskar Krawczyk <[email protected]> wrote:
>
>
>
>
>
>
>
> > It would be better if you posted a jsfiddle.net instead of pasting the code
> > here.
>
> > O.
>
> > On 2010-10-04, at 06:59, shouvik wrote:
>
> > > Hi Guys,
>
> > > Newbie here. I may lack my knowledge in understanding of mootools but
> > > here is an issue I am facing.
>
> > > I am facing some trouble implementing an animation function.
> > > specifically the Cmorph function. If I hard set the new position of
> > > the tiles on the canvas element the position changes directly, but
> > > when I try animate into that position instead of just replacing the
> > > value. All the items from my canvas just disappear.
>
> > > Here is the function:
>
> > > CANVAS.reanimate = function ()
> > > {
> > > //not optimised yet: animations are not working
> > > properly.
>
> > > console.log("calling the reanimate function");
>
> > > for(i=0; i<(gridSize*gridSize); i++)
> > > {
> > > var cfn = currentCoinPositions[i];
> > > var xycoord = positionCoordinates[i].split(",");
> > > //hold
> > > the new position of the elements
> > > var x_cord_new = xycoord[0];
> > > var y_cord_new = xycoord[1];
>
> > > currentCoinPositions[i].x = x_cord_new; //assigning
> > > positions
> > > from an object array which is a copy of all the items on canvas
> > > currentCoinPositions[i].y = y_cord_new;
>
> > > if(cfn !=
> > > 'nill') //
> > > changing the position of the elemet
> > > {
> > > var x_cord =
> > > CANVAS.layers.get("myLayer").get("coin_"+i).x;
> > > CANVAS.layers.get("myLayer").get("coin_"+i).y
> > > = y_cord_new; //
> > > comment when using animation function.
> > > }
> > > }
>
> > > //uncomment it and comment above to see animation(animations
> > > not
> > > working yet)
> > > /*
> > > for(i=0; i<(gridSize*gridSize); i++) //loop
> > > initialized for
> > > animation of the coins to the new position.
> > > {
> > > //If I use
> > > this code in my implementation, all the coins are removed from the
> > > canvas when the reanimate function is called.
> > > if(currentCoinPositions[i] != 'nill')
> > > {
> > > coin = "coin_"+i;
> > > x = currentCoinPositions[i].x;
> > > y = currentCoinPositions[i].y;
> > > console.log(x+","+y)
> > > new
> > > Cmorph(CANVAS.layers.get("myLayer").get(coin),
> > > {
> > > duration : 1000,
> > > transition : 'back:out',
> > > }).morph({
> > > x : x,
> > > y : y
> > > });
> > > }
> > > } */
> > > }
>
> > > Now if you look at the finction I have commented out, I have noticed a
> > > very peculiar behavior here.
>
> > > I randomly clicked on the canvas after all the items vanished from it,
> > > dragged the pointer around the canvas and saw really funny positions
> > > for where the items are located on my console!
> > > I also used the animation function in the redraw thread and noticed
> > > that the position of x and y coordinates of my canvas items
> > > exponentially increase. Please advice.
>
> > > Log collection of position.
> > > calling animate down
> > > examples.interactive.js:352195,163 //returns the xy coordinates of the
> > > items in the canvas.
> > > examples.interactive.js:361195,163
> > > examples.interactive.js:352245,135
> > > examples.interactive.js:361245,135
> > > examples.interactive.js:352295,163
> > > examples.interactive.js:361295,163
> > > examples.interactive.js:35245,192
> > > examples.interactive.js:361450-405,13557-13365
> > > examples.interactive.js:35295,220
> > > examples.interactive.js:361950-855,16357-16137
> > > examples.interactive.js:352145,192
> > > examples.interactive.js:3611450-1305,13557-13365
> > > examples.interactive.js:352195,220
> > > examples.interactive.js:361195,220
> > > examples.interactive.js:352245,192
> > > examples.interactive.js:361245,192
> > > examples.interactive.js:352295,220
> > > examples.interactive.js:361295,220
> > > examples.interactive.js:35245,249
> > > examples.interactive.js:361450-405,19257-19008
> > > examples.interactive.js:35295,277
> > > examples.interactive.js:361950-855,22057-21780
> > > examples.interactive.js:352145,249
> > > examples.interactive.js:3611450-1305,19257-19008
> > > examples.interactive.js:352195,277
> > > examples.interactive.js:361195,277
> > > examples.interactive.js:352245,249
> > > examples.interactive.js:361245,249
> > > examples.interactive.js:352295,277
> > > examples.interactive.js:361295,277
> > > examples.interactive.js:35245,306
> > > examples.interactive.js:361450-405,24957-24651
> > > examples.interactive.js:35295,334
> > > examples.interactive.js:361950-855,27757-27423
> > > examples.interactive.js:352145,306
> > > examples.interactive.js:3611450-1305,24957-24651
> > > examples.interactive.js:352195,334
> > > examples.interactive.js:361195,334
> > > examples.interactive.js:352245,306
> > > examples.interactive.js:361245,306
> > > examples.interactive.js:352295,334
> > > examples.interactive.js:361295,334
> > > examples.interactive.js:35245,363
> > > examples.interactive.js:361450-405,30657-30294
> > > examples.interactive.js:35295,391
> > > examples.interactive.js:361950-855,33457-33066
> > > examples.interactive.js:352145,363
> > > examples.interactive.js:3611450-1305,30657-30294
> > > examples.interactive.js:352195,391
> > > examples.interactive.js:361195,391
> > > examples.interactive.js:352245,363
> > > examples.interactive.js:361245,363
> > > examples.interactive.js:352295,391
> > > examples.interactive.js:361295,391
> > > examples.interactive.js:35245,420
> > > examples.interactive.js:361450-405,36357-35937
> > > examples.interactive.js:35295,448
> > > examples.interactive.js:361950-855,39157-38709
> > > examples.interactive.js:352145,420
> > > examples.interactive.js:3611450-1305,36357-35937
> > > examples.interactive.js:352195,448
> > > examples.interactive.js:361195,448
> > > examples.interactive.js:352245,420
> > > examples.interactive.js:361245,420
> > > examples.interactive.js:352295,448
> > > examples.interactive.js:361295,448
> > > examples.interactive.js:317calling the reanimate function
> > > examples.interactive.js:344calling animate down
> > > examples.interactive.js:352195,163
> > > examples.interactive.js:361195,163
> > > examples.interactive.js:352245,135
> > > examples.interactive.js:361245,135
> > > examples.interactive.js:352295,163
> > > examples.interactive.js:361295,163
> > > examples.interactive.js:35245,192
> > > examples.interactive.js:361450-405NaN,13557-13365NaN
> > > examples.interactive.js:35295,220
> > > examples.interactive.js:361950-855NaN,16357-16137NaN
> > > examples.interactive.js:352145,192
> > > examples.interactive.js:3611450-1305NaN,13557-13365NaN
> > > examples.interactive.js:352195,220
> > > examples.interactive.js:361195,220
> > > examples.interactive.js:352245,192
> > > examples.interactive.js:361245,192
> > > examples.interactive.js:352295,220
> > > examples.interactive.js:361295,220
> > > examples.interactive.js:35245,249
> > > examples.interactive.js:361450-405NaN,19257-19008NaN
> > > examples.interactive.js:35295,277
> > > examples.interactive.js:361950-855NaN,22057-21780NaN
> > > examples.interactive.js:352145,249
> > > examples.interactive.js:3611450-1305NaN,19257-19008NaN
> > > examples.interactive.js:352195,277
> > > examples.interactive.js:361195,277
> > > examples.interactive.js:352245,249
> > > examples.interactive.js:361245,249
> > > examples.interactive.js:352295,277
> > > examples.interactive.js:361295,277
> > > examples.interactive.js:35245,306
> > > examples.interactive.js:361450-405NaN,24957-24651NaN
> > > examples.interactive.js:35295,334
> > > examples.interactive.js:361950-855NaN,27757-27423NaN
> > > examples.interactive.js:352145,306
> > > examples.interactive.js:3611450-1305NaN,24957-24651NaN
> > > examples.interactive.js:352195,334
> > > examples.interactive.js:361195,334
> > > examples.interactive.js:352245,306
