p5.js in Visual Studio Code: sketch.js not "executed"
Question
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?
1 answers
solution1
1 ACCPTED 2022-06-11 15:02:18
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.
After you have all these files (currently) in a single folder. Just open the index.html file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.