How to start, creating a timeline with objects

[Ingo]

Hi !

 

Being a Java-developer, I am not strong when it comes to frontend.

I would like to give it a shot.

 

I would like to find a tool, I would like HTML5 to be that tool, to be able to create a canvas

where I plot simple rectangles and circles in different size and colors. 

See this from above, a rectangle ( the canvas ) with a number of circles plotted on - no connection between the circles.

 

I would like every object on the canvas to have a timeline ( as in implementing an interface which has stages, from birth to death, and that it grows -   so the circle would start at a radius at like 5x up to its maximum at 100x and then finally vanishing to 0x , going from colour green when it is young, to blue at its max height and to red before dying and leaving space ).

When a circle is painted on the canvas, it stays there - like a tree - and grows and dies on that spot.

I would like to place all circles in an xml-file or csv-file or a hash  like below:

1. name: circle-1
2. radiusWhenBorn: 5
3. radiusWhenMiddle:100
4. radiusWhenDead:0
5. colorYouth green
6. colorMiddle:blue
7. colorOld:red
8. birthdate : 2014-05-10
9. deathdate:2014-06-10

Something like that, just throwing it out.

Something close to 'game of life' in some sense.

 

Would that be possible ?

So If a start the timeline by creating 10 independent circles, all with their different life-timeline, growing and dying according to an algorithm. the start and end-time can be date with time but I could run it 'fast' so that I would not have to wait for a year.

 

I guess I could do this in Java-Swing, but I would like the learning experience here as well.

 

 

Hope that someone can advice me here and ge me started.

 

 

regards, Ingo

[PAEz]

I know this is old but it really bugs me that no one gave you any advice at all.  So even though Im really not the one to answer this, heres my 2c worth....

 

For drawing HTML has the lovely canvas which can do what you want.  But, if you want more control and options you should look at something like paper.js or fabric.js.  Either of these libraries will make it easier to draw and update, plus give you alot more options for the future, like interactivity (allow the user to put the mouse over a circle and get stats or woteva).

 

I would like to place all circles in an xml-file or csv-file or a hash

 

Your in JS land now, you should be looking at JSON.  Both the methods you mention are going to have to be converted to an object/array at some time anyways, so may as well start with that.

So itll look something like...

[{  "name": "circle-1",  "radiusWhenBorn": 5,  "radiusWhenMiddle": 100,  "radiusWhenDead": 0,  "colorYouth": "green",  "colorMiddle": "blue",  "colorOld": "red",  "birthdate": "2014-05-10",  "deathdate": "2014-06-10",}, {  "name": "circle-2",  "radiusWhenBorn": 3,  "radiusWhenMiddle": 200,  "radiusWhenDead": 0,  "colorYouth": "green",  "colorMiddle": "blue",  "colorOld": "red",  "birthdate": "2014-04-10",  "deathdate": "2014-06-10",}, {  "name": "circle-3",  "radiusWhenBorn": 50,  "radiusWhenMiddle": 100,  "radiusWhenDead": 0,  "colorYouth": "green",  "colorMiddle": "blue",  "colorOld": "red",  "birthdate": "2014-05-10",  "deathdate": "2014-06-10",}]

Then in your code you can do....

var circles = JSON.parse("theabove");

...and circles will be a nice array of circle objects.  Then later you can stringify (google JSON and then read the MDN link) circles and save it somewhere (look up localStorage for simple stuff and then look at db's).

Although for colours you might want to use an array of rgb or hsl values as your going to need them later to interlope between.  But if you want to use words theres heaps of colour libraries out there and paper or fabric are most likely to have them.

 

Timing and animation

These days you should be looking at requestAnimationFrame for when to update the animation.

Date.parse() can convert your dates to milliseconds...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

...well Im not completely sure about your format, but that page will tell ya.

Date.now() will get the current milliseconds.

You'll then have something like a start date for the virtual time and a real start date for now.  Then on each requestFrame you record the amount of time since the last frame and convert it to your virtual time system.  Itd be easy if you just say something like in virtual time 1 real time unit (milllisecond) equals (I dont know) 1000 milliseconds of virtual time (one second) and adjust accordingly.

Then you just figure out where you are in your virtual time, which circles are still alive and what point they are in their life and then lerp the values accordingly.

 

Ohwell, sorry for the late reply, but just incase, hope that helps you get an idea of what to look for.