Website idea(s)

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

    • x seconds text_1 appears
    • x seconds image_1 appears
    • x seconds text_1 + image_1 disappear
    • x seconds blank
    • x seconds text_2 appears
    • x seconds image_2 appears
    • x seconds text_2 + image_2 disappear
  2. 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?



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 :
  • 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! :wink:

1 Like

you can also find examples on typography and images here

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.


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 :slight_smile:

1 Like

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 :slight_smile: