# Time line without Flash
**URL:** https://discourse.processing.org/t/time-line-without-flash/12037
**Category:** Project Guidance
**Created:** [June 13, 2019, 10:17am UTC](https://discourse.processing.org/t/time-line-without-flash/12037 "2019-06-13T10:17:38Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Thiru](https://discourse.processing.org/u/Thiru)
#### Post date: [June 13, 2019, 10:17am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/1 "2019-06-13T10:17:38Z")
Hi,
I have basic knowledge of programming. After doing a bit of research, it looks like the timeline shown in this link can be done in HTML, Canvas, JS,… (without adobe flash).
> **[Arab spring: an interactive timeline of Middle East protests](https://www.theguardian.com/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline)**
>
> In December 2010, a man in Tunisia burned himself to death in protest at his treatment by police. What followed was an extraordinary year as pro-democracy rebellions erupted across the Middle East. Our interactive timeline traces key events
I would very much appreciate if you would give me some help.
Regards
Thiru
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [June 13, 2019, 11:15am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/2 "2019-06-13T11:15:33Z")
Good day Thiru,
My experience with p5 is limited, so aside from giving you advice on how to approach the project and get things rolling I can’t be of much help unfortunately. Once you’re a bit further with your project however and have code to share, I’m certain there are more than enough smartypants out here who are willing to answer your questions.
Whenever you’re trying to tackle something that’s still a bit too complicated for you (seeing you mentioned you have a basic understanding of programming), bring it to your level by breaking it up in smaller, simplified parts. For instance:
- Write a ‘basic’ program (I suggest using the [p5 Web Editor](https://editor.p5js.org/) for this) which contains a few of the elements you want to use, such as a 2D timeline, text, images and buttons. It doesn’t have to be pretty at this point, just try to get it functional.
- Having trouble with certain elements? Go through the [p5 reference](https://p5js.org/reference/) and [p5 learn](https://p5js.org/learn/) pages and see if you can gather relevant information for your problem.
- Set up and HTML file and try to display your basic program in there.
Little by little your experience and understanding grows, and from there you extend. So once your basic program is functional and it works properly in a web browser, try adding functionalities to gradually improve it, such as hover effects, animations, and a 3D timeline.
Hope this was the type of guidance you were looking for. Good luck!
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 13, 2019, 12:38pm UTC](https://discourse.processing.org/t/time-line-without-flash/12037/3 "2019-06-13T12:38:21Z")
> [@Tiemen](#):
>
> smartypants
😉
Chrisir
…
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [June 13, 2019, 12:42pm UTC](https://discourse.processing.org/t/time-line-without-flash/12037/4 "2019-06-13T12:42:02Z")
Whoopsie-daisy, smartypants gives a negative ring to it. Unintended 😂
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 13, 2019, 12:50pm UTC](https://discourse.processing.org/t/time-line-without-flash/12037/5 "2019-06-13T12:50:20Z")
No apologies necessary!!!
---
### Author:  [@Thiru](https://discourse.processing.org/u/Thiru)
#### Post date: [June 13, 2019, 1:12pm UTC](https://discourse.processing.org/t/time-line-without-flash/12037/6 "2019-06-13T13:12:55Z")
Thank you Tiemen. I am thinking along the same lines. Now I am looking at some examples. Much appreciated. I feel I can do most of it. The problem I would have is with the slider - how to link the slider to move things in the middle of the picture.
---
### Author:  [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [June 14, 2019, 8:29am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/7 "2019-06-14T08:29:45Z")
Id recommend
[ ](https://www.youtube.com/watch?v=p4Iz0XJY-Qk)
for an understanding of working in 3d if 3d is the option you’d like to choose, however you can might be able to achieve the same effect using a bunch of arcs and the scale function.
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [June 14, 2019, 9:03am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/8 "2019-06-14T09:03:38Z")
You’re very welcome, glad to hear it got you in the right direction.
For me it often helps to sketch a simplified version of what I want to obtain. In the image below you see a possible design of how it could work:
- The _window_ is what the viewer sees;
- _Content_ contains all the images and text of the articles/news (as you can see a part of it is outside of the window)
- Inside the window is an interactive _timeline_, where the user can horizontally drag the _selection_. When that happens, the _content_ moves along with it as you can see in the second sketch
This design isn’t exactly what you eventually want to make, but it’s a great first step to understand how the underlying system could work. If you’d be able to connect the x-coordinates of _timeline_ to _content_, you have a great foundation to proceed from.
---
### Author:  [@Thiru](https://discourse.processing.org/u/Thiru)
#### Post date: [June 14, 2019, 11:18am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/9 "2019-06-14T11:18:09Z")
Thank you paulgoux. Much appreciated.
---
### Author:  [@Thiru](https://discourse.processing.org/u/Thiru)
#### Post date: [June 14, 2019, 11:29am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/10 "2019-06-14T11:29:30Z")
Thank you Tiemen. Much appreciated. I am going to do a 2d version first. Any suggestion for this - I am trying to figure out how to do the mouse rollover effect(hope I am using the right technical term ). Please look at the two images. When I move the mouse over the green hand just over Egypt the area on the top left is replaced with an image and a text description. Same thing happens when the mouse is over other hands etc. I am allowed only one image. So I will post the second one with my next message
---
### Author:  [@Thiru](https://discourse.processing.org/u/Thiru)
#### Post date: [June 14, 2019, 11:30am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/11 "2019-06-14T11:30:11Z")
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [June 14, 2019, 11:55am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/12 "2019-06-14T11:55:17Z")
Is the [rollover example](https://processing.org/examples/rollover.html) what you’re looking for? What you aim for seems like an extended version of this example
---
### Author:  [@Thiru](https://discourse.processing.org/u/Thiru)
#### Post date: [June 14, 2019, 4:35pm UTC](https://discourse.processing.org/t/time-line-without-flash/12037/13 "2019-06-14T16:35:25Z")
Thank you Tiemen. I think this would help me [https://www.w3schools.com/howto/tryit.asp?filename=tryhow\_css\_modal\_img](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img)
---
### Author:  [@Thiru](https://discourse.processing.org/u/Thiru)
#### Post date: [June 17, 2019, 10:44am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/14 "2019-06-17T10:44:20Z")
Hi
I am new to JavaScript and these forums. So pleas excuse me if I say anything wrong. I am going to see if this can be posted in w3schools. As I am already in this forum I thought I will post it here.
I would like to ask something about this [https://www.w3schools.com/howto/howto\_js\_portfolio\_filter.asp](https://www.w3schools.com/howto/howto_js_portfolio_filter.asp)
This (pls see below) is repeated many times with few changes. Instead would it be possible to write a function and call that function with relevant arguments?
Thank you
#### Lights
Lorem ipsum dolor..
---
### Author:  [@Thiru](https://discourse.processing.org/u/Thiru)
#### Post date: [June 17, 2019, 10:45am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/15 "2019-06-17T10:45:27Z")
Sorry I posted some a small js and it did not appear with my message.
---
### Author:  [@Thiru](https://discourse.processing.org/u/Thiru)
#### Post date: [June 17, 2019, 10:46am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/16 "2019-06-17T10:46:49Z")
If I wish to post js code to this forum how do I do it?? thanks
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 17, 2019, 11:54am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/17 "2019-06-17T11:54:22Z")
You can copy paste here and then select the code section with the mouse
Then hit ctrl shift c or the small ``
---
### Author:  [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [June 18, 2019, 12:21am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/18 "2019-06-18T00:21:16Z")
Could try something like this. Bear in mind this is just a very rough sketch, but it could easily be improved with a bit of time. You could probably use the map function to make the transition smoother
[https://www.khanacademy.org/computer-programming/timeline/6300521515024384](https://www.khanacademy.org/computer-programming/timeline/6300521515024384)
Also you’ll probably be able to achieve better curves using bezier or vertex, or better yet photoshop for the graphics.
Good luck on your project.
---
### Author:  [@Thiru](https://discourse.processing.org/u/Thiru)
#### Post date: [June 18, 2019, 2:10pm UTC](https://discourse.processing.org/t/time-line-without-flash/12037/19 "2019-06-18T14:10:51Z")
Thank you paulogux. Much appreciated.
---
### Author:  [@everythingability](https://discourse.processing.org/u/everythingability)
#### Post date: [June 20, 2019, 7:43am UTC](https://discourse.processing.org/t/time-line-without-flash/12037/20 "2019-06-20T07:43:45Z")
If you’re doing rollovers, and even clicks, and using p5js, I think this library makes it LOADS easier.
> **[Lartu/p5.clickable](https://github.com/Lartu/p5.clickable)**
>
> Event driven, easy-to-use button library for P5.js. - Lartu/p5.clickable
and look at the map() function, because you will be able to “convert” your years into X positions, like this,
[https://editor.p5js.org/remarkability/sketches/GXM44K\_hl](https://editor.p5js.org/remarkability/sketches/GXM44K_hl)
[Next page](https://discourse.processing.org/t/time-line-without-flash/12037.md?page=2)