Sketch is displayed twice inside my index.html page

p5.js Beginners
1

Hi, I’m trying to run my sketches in a pretty simple webpage, just to show students how to put P5.js and index.html together and run it. What happens is that the canvas and its elements and behavior are created twice on the webpage, side by side. I have no clue of what is happening…

Please help :wink:

2

can you show the index.html
here as posted code </> editor menu button

? do you run any server or just play

  • index.html
  • sketch.js
  • p5.js

in a directory
and with double click on index.html
a browser open it?

p5js_local
p5js_local1440×937 79.9 KB

1 Like
3

Thanks for such a quick response.
Let me try to tell you how I am running it:

I am running on a chromebook, using quantum as editor and web server for chromebook to display it - both from web store for Chrome. So I just refresh the page to see results of saved changes.
Because I am using a chromebook, we do not have a local library, but we are calling it via CDNJ. I will post the index.html here as well as my sketch code.

I truly appreciate you taking your time to help me. So many thanks!!

4

45%20PM
45%20PM1727×638 105 KB

1 Like
5

56%20PM
56%20PM1648×482 36.5 KB

6

16%20PM
16%20PM1589×1174 58.5 KB

7

yes , if you call the sketch.js 2 times
in index.html you see it 2 times!

also we now use newer version of p5.js

/*! p5.js v0.10.2 October 14, 2019 */

ok you could use
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js
insofar @GoToLoop tip is better you would get the very new version automatically.
https://Unpkg.com/p5

and a small comment on your code:
the background thing should be in draw
in setup it makes only sense

  • for painting sketches or
  • together with the noLoop(); command
  • if no draw loop at all
2 Likes
8

Hi… is the sketch being called twice? Sorry… I dont spot it… can you show me where so that I can remove it?

Thanks so much for your help. :wink:

9

My advice is to begin w/ a minimum runnable “index.html” template file like this 1: :bulb:

<script defer src=https://Unpkg.com/p5></script>
<script defer src=sketch.js></script>

Once verified it’s working, you can add more stuff to it little by little. :sunglasses:

Here’s some online sketch using this very same minimum template: :smile_cat:

10

how i can show you , you posted a picture and not a code,
read your index.html
and see 2 lines
one with

script.js

sketch.js

and they possibly are same, was my guess.

11 
<html>
  <head>
      <title>JS P5.JS Coding</title>
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
    
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
12

I have removed the script.js mention and it is still displaying two canvas…

13

but you still call the old and the new p5.min.js

    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>

delete the second ( old ) line

and make sure to have a browser restart

not related, but also mixing it
with old versions for DOM and SOUND would also not work
delete that lines too

   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>

and move the background line
? no idea but worst case you resize the canvas and see 2 circles because actually
you draw 60 of them every second… but usually on the same place!!

1 Like
14

However, https://Unpkg.com/p5 would grab the full version, which is useful only when we’re in the debugging phase. :bug:

For deploying, https://cdn.JsDelivr.net/npm/p5 is a much better fit, b/c it grabs the minified version: :cowboy_hat_face:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<!--<script defer src=https://Unpkg.com/p5/lib/addons/p5.sound.min.js></script>-->
<script defer src=sketch.js></script>
1 Like
15

Thank you so much!
I will follow your recommendations and will let you know how it went.

Thanks a bunch!!

16

I have just removed the lines you asked me to, and it worked!!

Thank you so much again!

17

:wink:
Thanks again, you made a huge difference for me & my students!

2 Likes