p5.js in Visual Studio Code: sketch.js not "executed"-CodePudding

Please be patient if this question resembles several similar ones, but I do not seem to adapt the answers to my problem, for example Accessing Files with p5.js in Visual Studio Code.

The following sketch.js example works in https://editor.p5js.org/:

function setup() {
  createCanvas(700, 700);
  noFill();
  console.log("Hello World!");
}

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

I would like to use Visual Studio Code to go ahead with p5.js.

The following index.html is given by the tutors of the example code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../libraries/p5/p5.min.js" type="text/javascript"></script>
    <script src="../../libraries/generative-design-library/generative-design-library.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>

    <link href="../../styles/main.css" rel="stylesheet" type="text/css">

    <!-- help tooltip start -->
    <script src="../../libraries/jquery/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../libraries/tooltipster/tooltipster.bundle.js"></script>
    <link rel="stylesheet" type="text/css" href="../../libraries/tooltipster/tooltipster.bundle.css" />
    <link rel="stylesheet" type="text/css" href="../../libraries/tooltipster/tooltipster-sideTip-noir.min.css" />
    <script src="../../libraries/help-tooltip.js" type="text/javascript"></script>
    <!-- help tooltip end -->
  </head>
  <body>
    <span id="help" data-tooltip-content="#help-content">?</span>
  </body>
</html>

The relative paths are fine with respect to the folder structure (downloaded from https://github.com/generative-design/Code-Package-p5.js/releases/tag/v1.3.2):

Code-Package-p5.js-1.3.2
   libraries
   01_P
      P_1_0_01
         index.html
         sketch.js

I tried both extensions p5 Server and p5.vscode which result in the same behaviour: Only the question mark is shown, not, however, the canvas created in sketch.js. It seems that sketch.js is simply not found. What is the reason for this? What needs to be done in order to use p5.js in VS Code?

CodePudding user response：

Do you have sketch.js in the same folder as your html file?

- main
  - libraries
    - p5 and stuff

  - page0
    - maybe assets
    - code
      - index.html
      - sketch.js ???

You could also replace

  <script src="sketch.js" type="text/javascript"></script>

with:

  <script>
  function setup() {
    createCanvas(700, 700);
    noFill();
    console.log("Hello World!");
  }

  function draw() {
    ellipse(mouseX, mouseY, 40, 80);
  }
  </script>

And also you might be able to put the sketch.js in <body>, I don't think that really helps, but it might, dunno.

To get p5.js working on your local computer:

You should have 1,(2,3) files:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

You can also store the p5.js library on your own computer, It's just a JavaScript file, but I copied this from editor.p5js.org.

sketch.js:

function setup(){
   // use p5.js stuff here
}
// use everything else here it's all a starting point!

style.css:

body {
    background-color: #111;
}

button {
    width: 100vw;
    height: 2px;
}

This is completely optional, just like .js file, you can use <style> </style> instead.

To get p5.js working on your local computer:

index.html:

sketch.js:

style.css:

After you have all these files (currently) in a single folder. Just open the index.html file.

After you have all these files (currently) in a single folder. Just open the `index.html` file.