# Website idea(s)

**URL:** <https://discourse.processing.org/t/website-idea-s/28695>\
**Category:** Project Guidance\
**Created:** [March 21, 2021, 12:13pm UTC](https://discourse.processing.org/t/website-idea-s/28695 "2021-03-21T12:13:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [March 21, 2021, 12:13pm UTC](https://discourse.processing.org/t/website-idea-s/28695/1 "2021-03-21T12:13:43Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 21, 2021, 1:02pm UTC](https://discourse.processing.org/t/website-idea-s/28695/2 "2021-03-21T13:02:48Z")

</div>

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](https://discourse.processing.org/t/a-timer-which-activates-by-pressing-a-button/25818/2):
>
> 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.

Have fun! 😉

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 21, 2021, 1:06pm UTC](https://discourse.processing.org/t/website-idea-s/28695/3 "2021-03-21T13:06:21Z")

</div>

you can also find examples on typography and images here  
[https://p5js.org/examples/](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](https://p5js.org/examples/dom-modifying-the-dom.html) 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.

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [March 21, 2021, 4:22pm UTC](https://discourse.processing.org/t/website-idea-s/28695/4 "2021-03-21T16:22:49Z")

</div>

> [@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 🙂

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [March 21, 2021, 4:32pm UTC](https://discourse.processing.org/t/website-idea-s/28695/5 "2021-03-21T16:32:15Z")

</div>

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 🙂