# Loading screen with preload

**URL:** <https://discourse.processing.org/t/loading-screen-with-preload/38917>\
**Category:** Coding Questions\
**Created:** [September 21, 2022, 2:53pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917 "2022-09-21T14:53:33Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [September 21, 2022, 2:53pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/1 "2022-09-21T14:53:33Z")

</div>

Hi all, I’m using the function `preload` in my p5 project, because of that I have a couple of seconds of a white page at the beginning, so I want to create a loading screen.  
I tried to do the following here:

> **[p5.js overview · processing/p5.js Wiki](https://github.com/processing/p5.js/wiki/p5.js-overview#loading-screen)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

and instead of the `this could be some sweet graphics loading lots of bits` I put a p5 sketch like that:

```auto
<div id="p5_loading" class="loadingclass"><script src="loading.js"></script></div>

```

now I this problem:  
My code in `loading.js` is like that:

```auto
size = 0;
function setup(){
    createCanvas(window.innerWidth, window.innerHeight);
    background(38);
}

function draw(){
    background(38);
    fill(187);
    circle(width/2,height/2,sin(size)*50);
    size+=0.05;
}

```

the project gets stuck with this page (all you can see is the circle gets big and small in the background) and it doesn’t move to the main project after the reload.

what to do? Is possible at all to do something like that?  
and if animations are possible, can I load image to the loading screen? that’s mean I need to use preload to there as well? (smells like recursion 😅)

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:** [September 21, 2022, 3:39pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/2 "2022-09-21T15:39:27Z")

</div>

Hi @Omri,

Well you are spicing stuff a bit! 😉

So you want to display a loading screen that is basically a p5 sketch itself.

Basically since `loadImage` can be asynchronous and accepts a callback, you can call it in `setup()` and in `draw()` display your loader if not loaded:

```javascript
let bigImage;
let loaded = false;

function setup() {
  createCanvas(400, 400);
  
  bigImage = loadImage(
    "https://images.pexels.com/photos/358457/pexels-photo-358457.jpeg",
    () => loaded = true
  );
}

function draw() {
  if (!loaded) {
    background(0);
    // Your spinner here
  } else {
    background(220);
  }
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 21, 2022, 3:39pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/3 "2022-09-21T15:39:39Z")

</div>

> [@Omri](#):
>
> And instead of the `this could be some sweet graphics loading lots of bits` I put a p5 sketch like that:

I believe they’ve meant styling the element w/ CSS stuff, not another p5js sketch.

Besides only 1 global mode sketch can be active within a single web frame.

For extra global mode sketches you’ll have to place them inside separate `<iframe>`:  
[https://developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe](https://developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe)

> [@Omri](#):
>
> , can I load image to the loading screen?

I believe you can include an `<img>` element as the `<div>` content:

> **[: The Image Embed element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)**
>
> The HTML element embeds an image into the document.

---

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [September 21, 2022, 4:26pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/4 "2022-09-21T16:26:54Z")

</div>

@josephh thanks again for the help 🙂  
your solution is working for me for the sound file (with loadSound).  
but I have in my sketch also shaders and video.  
for the video I’m using createVideo, so this is counting as loading something? does it have a callback to use your option with?  
for the shade as I can see here:

> **[reference | p5.js](https://p5js.org/reference/#/p5/loadShader)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

it does have a callback, but something weird is happening when I try your method: the set is started running in a loop. do you have any idea why is that? I’m doing the same as I did with the loadSound

@GoToLoop  
So if I can use only CSS that’s means I cannot do animation at the loading screen?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 21, 2022, 4:38pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/5 "2022-09-21T16:38:13Z")

</div>

> [@Omri](#):
>
> So if I can use only CSS that’s means I cannot do animation at the loading screen?

p5js got a default loading `<div>` element which we can replace w/ our own.

I dunno the full extent of what an HTML element can do, but I believe they can be styled w/ some CSS animation:

> **[Using CSS animations - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)**
>
> CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the...

---

<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:** [September 21, 2022, 5:13pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/6 "2022-09-21T17:13:09Z")

</div>

> [@Omri](#):
>
> for the video I’m using createVideo, so this is counting as loading something? does it have a callback to use your option with?

Yes it has a callback:

> **[reference | p5.js](https://p5js.org/reference/#/p5/createVideo)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

```auto
createVideo(src, [callback])

```

Here is a code that loads an image and a video asynchronously using promises and `Promise.all` to wait for multiple asynchronous tasks to finish:

```javascript
let bigImage;
let video;

let loaded = false;
let loadingError = false;
let timeValue = 0;

function promiseLoadImage(url) {
  return new Promise((resolve, reject) =>
    loadImage(url, resolve, reject)
  )
}

function promiseCreateVideo(url) {
  return new Promise((resolve, reject) => {
    const video = createVideo(url, () => resolve(video));
  })
}

function easeOutCubic(x) {
  return 1 - Math.pow(1 - x, 3);
}

function setup() {
  createCanvas(400, 400);

  Promise.all([
    promiseLoadImage(
      "https://images.pexels.com/photos/358457/pexels-photo-358457.jpeg"
    ),
    promiseCreateVideo("https://upload.wikimedia.org/wikipedia/commons/transcoded/6/60/Wikipedia_logo_puzzle_globe_spins_horizontally_and_vertically%2C_revealing_the_contents_of_all_of_its_puzzle_pieces_%284K_resolution%29_%28VP9%29.webm/Wikipedia_logo_puzzle_globe_spins_horizontally_and_vertically%2C_revealing_the_contents_of_all_of_its_puzzle_pieces_%284K_resolution%29_%28VP9%29.webm.120p.vp9.webm")
  ]).then((results) => {
    [img, vid] = results;

    bigImage = img;
    video = vid;
    video.play();
    video.loop();

    loaded = true
  }).catch(e => loadingError = true)
}

function loader() {
  push();
  translate(width / 2, height / 2);
  noFill();
  strokeWeight(10);
  stroke(50, 200, 0);
  const endOffset = (period) => easeOutCubic((sin(timeValue + period) + 1) / 2)
  arc(0, 0, 100, 100, timeValue + endOffset(0) * HALF_PI, timeValue + PI + endOffset(HALF_PI) * HALF_PI);
  pop();
}

function draw() {
  background(200);

  if (loadingError) {
    stroke(255, 0, 0);
    strokeWeight(5);
    line(width - 50, 50, 50, height - 50);
    line(50, 50, width - 50, height - 50);
    noLoop();
    return;
  }

  if (!loaded) {
    loader();
  } else {
    image(bigImage, 0, 0);
  }

  timeValue += 0.1;
}

```

---

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [September 21, 2022, 5:42pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/7 "2022-09-21T17:42:54Z")

</div>

@josephh you’re the best!  
do you have any idea about the loadShader problem?

---

<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:** [September 22, 2022, 7:16am UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/8 "2022-09-22T07:16:41Z")

</div>

Again this in the [reference](https://p5js.org/reference/#/p5/loadShader):

**Syntax:**

```auto
loadShader(vertFilename, fragFilename, [callback], [errorCallback])

```

Have fun! 😉

---

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [September 22, 2022, 12:13pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/9 "2022-09-22T12:13:34Z")

</div>

@josephh  
that’s what I tried, but look at something strange, If I run this code:

```auto
let theShader;
function preload() {
  theShader = loadShader('shader.vert', 'shader.frag');
}

function setup() {
  pixelDensity(1);
  createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke();
  console.log("DONE SET UP")
}

function draw() {
  theShader.setUniform('u_resolution', [width, height]);
  shader(theShader);
  rect(0, 0, width, height);
}

```

everything looks good:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/0/001ed9bd5c1825a96058cf2b2356f23665296105.png)

But, when I try to use the callback:

```auto
let theShader;
let loaded = false;

function setup() {
  pixelDensity(1);
  createCanvas(windowWidth, windowHeight, WEBGL);
  theShader = loadShader('shader.vert', 'shader.frag',
    () => loaded = true
  );
  noStroke();
  console.log("DONE SET UP")
}

function draw() {
  if (!loaded) {
    background(200);
    fill(20)
    circle(width/2, height/2, 200);
  } else {
    theShader.setUniform('u_resolution', [width, height]);
    shader(theShader);
    rect(0, 0, width, height);
  }
}

```

I get that:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/b/4b897b49fff1179855086fbbd50774531af3c342.png)  
It looks like it running the setup() function a lot of times

have you ever seen something like that? am I using the callback wrong?  
I used now the simplest shader so I don’t think the problem is with the shader.vert or the shader.frag

---

<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:** [September 22, 2022, 1:04pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/10 "2022-09-22T13:04:14Z")

</div>

Yes it’s strange, maybe it’a a bug…

You should either load it in the `setup()` or `preload()` but not in both because it makes no sense.

---

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [September 22, 2022, 1:14pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/11 "2022-09-22T13:14:41Z")

</div>

Oh, that was a mistake when I copied it here, I didn’t use `preload()` the second time. 🤣

Do you know what can I do about that bug?

---

<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:** [September 22, 2022, 3:13pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/12 "2022-09-22T15:13:49Z")

</div>

This works fine for me:

```javascript
let theShader;
let loaded = false;

function setup() {
  pixelDensity(1);
  createCanvas(windowWidth, windowHeight, WEBGL);
  theShader = loadShader('shader.vert', 'shader.frag',
    () => {
      loaded = true
      console.log("SHADER LOADED")
    }
  );
  noStroke();
  console.log("DONE SET UP")
}

function draw() {
  if (!loaded) {
    background(200);
    fill(20)
    circle(width / 2, height / 2, 200);
  } else {
    theShader.setUniform('u_resolution', [width, height]);
    shader(theShader);
    rect(0, 0, width, height);
  }
}

```

with those shaders: [p5.js shaders](https://itp-xstory.github.io/p5js-shaders/#/./docs/how-to-write-a-shader?id=shadervert)

---

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [September 22, 2022, 3:18pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/13 "2022-09-22T15:18:51Z")

</div>

Thanks, I just tried your code and it is the same:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/2/a28324d4746e82528c6005cf840c0b50628e41f1.png)

here is the code in the p5 web editor:

> **[p5.js Web Editor](https://editor.p5js.org/omribergman05/sketches/pdcznRJys)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

in your computer it’s working fine?

---

<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:** [September 22, 2022, 3:21pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/14 "2022-09-22T15:21:51Z")

</div>

Ok this is really strange, thanks for sharing the editor link. Did you try locally on your own computer rather than on the online editor?

---

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [September 22, 2022, 3:35pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/15 "2022-09-22T15:35:03Z")

</div>

yep, the same problem.  
Do you maybe know where is the code of loadShader() at the p5js code?  
maybe I’ll look up if I can notice what causing the bug there

---

<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:** [September 22, 2022, 3:38pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/16 "2022-09-22T15:38:15Z")

</div>

You forgot to link the GitHub issue there 😉

> <https://github.com/processing/p5.js/issues/5810>
>
> \### Most appropriate sub-area of p5.js?
> 
> \- \[\] Accessibility
> \- \[\] Color
> \- \[\] C…ore/Environment/Rendering
> \- \[\] Data
> \- \[\] DOM
> \- \[\] Events
> \- \[\] Image
> \- \[\] IO
> \- \[\] Math
> \- \[\] Typography
> \- \[\] Utilities
> \- \[X\] WebGL
> \- \[\] Build Process
> \- \[\] Unit Testing
> \- \[\] Internalization
> \- \[\] Friendly Errors
> \- \[\] Other (specify if possible)
> 
> \### p5.js version
> 
> v1.4.1
> 
> \### Web browser and version
> 
> 105.0.5195.127
> 
> \### Operating System
> 
> Windows
> 
> \### Steps to reproduce this
> 
> \### Steps:
> 1. load the shader on the setup and use a callback to know when it's done
> 2. console log a message on the setup()
> 3. run the sketch and see its not stop running the setup()
> 
> \### Snippet:
> 
> \`\`\`js
> 
> let theShader;
> let loaded = false;
> 
> function setup() {
> pixelDensity(1);
> createCanvas(windowWidth, windowHeight, WEBGL);
> theShader = loadShader('shader.vert', 'shader.frag',
> () =\> loaded = true
> );
> noStroke();
> console.log("DONE SET UP")
> }
> 
> function draw() {
> if (!loaded) {
> background(20);
> fill(200)
> circle(width/2, height/2, 200);
> } else {
> theShader.setUniform('u\_resolution', \[width, height\]);
> shader(theShader);
> rect(0, 0, width, height);
> }
> }
> 
> \`\`\`

---

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [September 22, 2022, 3:44pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917/17 "2022-09-22T15:44:19Z")

</div>

haha ya, I wanted to know if it’s really a bug on p5 or it’s just me 🥲  
looks like it’s a bug ☹  
if you have any idea how to fix it pls let me know.  
thanks for all the help!