Time line without Flash

p5.js Project Guidance
1

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).

I would very much appreciate if you would give me some help.

Regards

Thiru

1 Like
2

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 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 and p5 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!

2 Likes
3

:wink:

Chrisir

…

4

Whoopsie-daisy, smartypants gives a negative ring to it. Unintended :joy:

1 Like
5

No apologies necessary!!!

1 Like
6

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.

7

Id recommend

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.

8

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:

timeline%20sliders
timeline sliders.png1080×1080 16 KB

  • 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.

9

Thank you paulgoux. Much appreciated.

10

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

MO0
MO0.JPG1193×827 88.2 KB

11

MO1
MO1.png1192×828 151 KB

12

Is the rollover example what you’re looking for? What you aim for seems like an extended version of this example

13

Thank you Tiemen. I think this would help me https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img

14

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

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..

15

Sorry I posted some a small js and it did not appear with my message.

16

If I wish to post js code to this forum how do I do it?? thanks

17

You can copy paste here and then select the code section with the mouse

Then hit ctrl shift c or the small </>

18

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

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.

19

Thank you paulogux. Much appreciated.

20

If you’re doing rollovers, and even clicks, and using p5js, I think this library makes it LOADS easier.

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