caleb531 / jcanvas

A jQuery plugin that makes the HTML5 canvas easy to work with.
https://projects.calebevans.me/jcanvas/
MIT License
626 stars 192 forks source link

How to handle Time Triggered events !! #128

Closed satya1907 closed 11 years ago

satya1907 commented 11 years ago

First of all, I would like to Thank You a lot for your immediate and accurate response.. Really thanks a lot.. :)

Now, I want to make a small demo.

The situation is like, inside a Class room...

1) There are 10 students let be 1,2,3... 10. 2) They are coming to a Room(let classroom) at different Times let like . One: Comes In @ 9:30 AM. Two: Comes @ 9:45 AM. Three: Comes @ 9:47 AM. Four: Comes @ 9:20 AM. Five: Comes @ 2:30 PM. Six: Comes @ 2:10 PM.

like this..

3) I want to make 10 Circles with Images of the Student inside it and want to enlarge its size depending on the Time they Entered into the Room. The Size/Radius of the Circle will enlarge and display their Entry Time within it and will stay for suppose 10 seconds and then get smaller like before.

4) Now, the Challenge is I want to Show all the data within 1 minute (imagine its a movie of 1 minute) and when one Circle is getting enlarged or at the Maximum size, there may be another person who came just after the former person. So, the 2nd Circle also have to start the Animation of being large and showing the Detail.

5) In more convenient word, we have to devide 9 AM to 3 PM as 60 second movie. That is Each Hour == 10 Seconds. So if there are more than one person coming inside the Room within a Hour, then the 2 events should work Properly.

Suppose someone enters into the room @ 9:00 AM and another person enters at 9:12 AM. So, the 1st event will start @ 0th Second of the Movie where as the 2nd event will start @ 2nd second of the Movie. So, when the 2nd event starts the 1st event/circle might have been enlarged and Showing the Data inside it. At the same time the 2nd Circle will start Grow and then it will show its data too.

Can You please help me to Handle this.. Thanks a lot in advance...

Thanks

caleb531 commented 11 years ago

Wow. This seems pretty elaborate.

I would suggest using jCanvas animation methods to do this, that is, the animateLayer() and animateLayerGroup() methods. They both allow you to complete a given animation within a certain timeframe.

I would suggest you represent all of your times in terms of seconds. In doing so, you can do all the math you need to do, but still be able to convert the seconds to an actual formatted time later on. You might consider using a library such as Datejs for this.