The only I see is the message: "Loading..." :-(

p5.js Beginners
1

I wrote my sketch in the online editor and runs very well. I download it and double clicked index.html, but there is only the “Loading…” message. What am I doing wrong?

image

2

Hi,

Welcome to the community! :wink:

Can you post the entire code on the forum? You can use the </> button in the message editor.

1 Like
3

sketch:

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

function draw() {
  ellipse(mouseX, mouseY, 80, 80);
}

index.html:

<!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;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/p5@[p5_version]/lib/p5.js"></script>
  <script src="../addons/p5.sound.min.js"></script>
  <script src="sketch.js"></script>
</head>
<body>
  <main>
  </main>
</body>
</html>
4

Your internet connection is on? Or maybe it’s slow. Because your code looks fine.

5

Hello,

Your link:

<script src="https://cdn.jsdelivr.net/npm/p5@[p5_version]/lib/p5.js"></script>

Gave me this in Chrome browser:
Couldn't find the requested release version [p5_version].

This is a valid link:

<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.min.js"></script>

The valid link worked in the P5.js editor with your code and index.html.

Reference:
https://www.jsdelivr.com/package/npm/p5

This is used by P5.js editor:
https://cdnjs.com/libraries/p5.js

** Update **

I also tried downloading a program (p5,js defaults on this day) because the index.html that you provided and the default “index.html” in the P5.js editor are NOT the same and what is downloaded from the p5.js editor uses downloaded local files.

Results with different browsers were mixed:

  • It worked with Google Chrome browser if I removed the p5.sound.min.js line otherwise I got a “Loading…” error.

  • It worked with Firefox.

Further investigation…

I am starting to use P5.js so this was work the exploration.

An older program in the P5.js editor from Dec 25, 2019 6:59 PM used:

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

And the downloaded local versions are:

/*! p5.js v0.10.2 October 14, 2019 */
/*! p5.sound.min.js v0.3.11 2019-03-14 */

Egads!

This is good to know!

:)

1 Like
6

The downloaded program\web page worked locally in Google Chrome browser with:

See discussion here which lead me to this:
Cannot load image locally Thanks @GoToLoop

:)