Code being displayed in Browser instead of sketch

p5.js Beginners
1

Hi there!

I have a very newbie question. I recently installed the P5.js library within Sublime and installed as well the Browser Sync add-on.

I’ve created a subfolder called Sketches which contains the index.html file and the very first sketches I’ve created so far. Everything was working fine until I changed the title in the index.html file from “example” to “Ball” (my sketch is a bouncing ball).

Now the sketches don’t show up in my browser anymore, instead, I have the code that is displayed as plain text in the browser page.

I tried to switch back the title of the index.hml file to “example”, delete the file and replace it, tried to launch the example sketches, but nothing works! I still get the code being displayed in the browser instead of the sketch.

How can I fix this issue?

Thanks a lot in advance!

2

Usually I don’t install anything. I just grab everything online inside “index.html” file:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

The HTML file above remotely downloads “p5.js” library and then locally loads a “sketch.js” file.

1 Like
3

Thanks! That works!
Still, I don’t get why changing the title in the “index.html” file then switching it back broke everything?

4

Unfortunately, I’m still running in the same issue. I worked once, but now I’m still getting my text code appearing in the browser and not the sketch :frowning:

5

Got no idea either! You should post your whole project folder on GitHub so we can take a look:

2 Likes
6

Thanks! Will do that!

1 Like
7

Hi @Alesk1969,

Can you show the content of your index.html file? Also how did you installed p5.js, by downloading the library as .js/.min.js files or using a Sublime special extension?

8

Hi Josephh,

Here is the content of the index.html file. I downloaded the library then added it to Sublime. It worked for a while, then stopped working when I change the title.

I actually tried again GoToLoop suggestion and it works that way (sorry GoToLoop for not answering earlier).

Thanks !

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #1b1b1b;
    }
  </style>
  <script src="../p5.min.js"></script>
  <!-- <script src="../addons/p5.sound.js"></script> -->
  <script src="sketch.js"></script>
</head>

<body>
  <main>
  </main>
</body>

</html>