Thanks, great spot! I will have a look at it... But Even then I don't understand some of the activities I notice from the canvas.
For example, clicking on the canvas after the elements on it have dissappeared, still returns new positions for the elements. But then if I get the output I am not really concerned with hoe its internals work. Also if you have something better which suits my purpose, I would be very much open to the suggestions! Regards Shouvik On Oct 4, 5:24 pm, rasmusfl0e <[email protected]> wrote: > 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 > > ... > > read more »
