Website idea(s)

[OptOut]

Hi everybody,

I am thinking about a project (very early stages) - a website used to tell a ‘story’ (no interactivity).

So something like this:

1. Website/page loads

2. • x seconds text_1 appears
3. • x seconds image_1 appears
4. • x seconds text_1 + image_1 disappear
5. • x seconds blank
6. • x seconds text_2 appears
7. • x seconds image_2 appears
8. • x seconds text_2 + image_2 disappear

9. Loop to step 2

I have 2 questions:

1. Would anyone have any examples of similar projects?
2. Any general advice or suggestions in getting started?

Thanks!

[josephh]

Hi,

@OptOut

Any general advice or suggestions in getting started?

Some ideas :

• If you want to do something every x seconds, you are going to need a way to measure time pretty much like a counter. You can take a look at a previous answer I gave here :

A timer which activates by pressing a button

Hi, You were right, you need to use the millis() function. It’s true that it’s counting the number of milliseconds from the beginning of the execution but if we store that value when we press a button, it’s the same as taking the current time. Think of it as a watch. If you want to measure the duration of an event, you look at the time on your watch then wait until the end of the event. At that time, you look at your watch and compute the difference in time. Here is an example : // The durat…

• For the display part, if you want your code to be modular, for example be able to add, swap and remove steps from your story and have text/images to appear, you are going to need to store them inside a list or some iterable data structure.

  A pseudo code would be (using JS objects) :

  const steps = [
    {text: "In a galaxy far, far away..."},
    {image: "image_1.png"},
    {blank: true},
    {text: "Yoda is cool", image: "yoda.png"},
    // ...
  ];
  

Have fun!

[micuat]

you can also find examples on typography and images here
https://p5js.org/examples/

and I found a few examples by googling “p5.js story” so maybe that helps (although I cannot find the one I saw before - which was full screen and an elaborate narrative with p5.js)

but - if your question is more about making a “website” than just making a sketch, then I would recommend you to use DOM instead of canvas (and I would even go with standard JS without p5.js). The upside is that it gives you more freedom with typography and layout that can be adaptive to different window sizes and mobile. The downside is that it is more confusing than canvas because you need to work with CSS for layout and style and not just placing images and texts within a canvas.

[OptOut]

@josephh

using JS objects

Thanks Josephh - lots to work with here i’m a little unsure on lists + JS objects but I guess it’s a bout time I learnt

[OptOut]

Hey Micaut - thanks for your reply

Ideally, I’ll be keeping away from JS/CSS and I’m pretty sure that p5.js will be enough, will look at DOM though - thanks again