Trouble setting up p5 in Visual Studio Code

p5.js Beginners
1

So I am new to HTML and Javscript, and I 'm trying to setup p5.js in VSC. I’ve installed the p5 snippets extension and my index.html file looks like this:

<html>
<head>
    <title>p5 Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script language="javascript" type="text/javascript" src="/p5/p5.js"></script>
    <script language="javascript" type="text/javascript" src="/p5/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="/p5/p5.sound.js"></script>
    <script src="sketch.js"></script>
</head>
<body>
</body>
</html>

I’ve created a basic sketch.js file that looks like this:

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

function draw () {
}

The problem is that it says that createCanvas is not defined, which means that the library doesn’t load. However, the 3 p5 file paths are correct (Ctrl + click opens the correct file). I’m not sure why this is happening… Any help would be appreciated!

2

Maybe remove the initial / from the paths? :thinking:
“/p5/p5.js” -> “p5/p5.js”

You can also test-run my minimum “index.html” template I use for my own sketches: :innocent:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<!--<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>-->
<!--<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.sound.min.js></script>-->
<script defer src=sketch.js></script>
3

I found the problem. For some reason it conflicted with the JavaScript Standard Style extension… Disabling it fixed the problem.

4

Hey there,

I seem to be having a similar problem but with SublimeText 3. I am using Browser sync to test the code in the browser, the main.js script is appearing in the insepctor and I can open the code however its not displaying in my index.html test window.

I have an Index.html setup as follows:

<html>
<head>
	<meta charset="UTF-8">
	<script language="javascript" type="text/javascript src="libraries/p5.js"></script>
	<script language="javascript" type="text/javascript src="libraries/p5.min"></script>
	<script language="javascript" type="text/javascript src="main.js"></script>

</head>
<body>

</body>
</html>

and then the main.js is as follows, which works fine on the online p5.js editor.

function setup() {
createCanvas(480, 120);
strokeWeight(2);
}
function draw() {
background(204);
for (var i = 20; i < 400; i += 20) {
line(i, 0, i + i/2, 80);
line(i + i/2, 80, i*1.2, 120);
}
}

Why am I unable to get the index.html to load the main.js file when it seems to be connected fine?

Any help would be massively appreciated, all the best!
Josh

5
1 Like
6

Thanks so much!
Seems to work now so maybe i’ll ditch Sublime Text and Opera, would you say firefox and notepad++ is an optimal workflow for developing graphical applications or could you give some advice on workflow too?

Thanks so much,
Josh

7

Notepad++ and other similar frugal text editors are more geared towards small projects like Processing sketches and quick file edits.

IDEs like Sublime, Atom, Brackets, Eclipse, etc., are more appropriate for bigger projects.

Firefox and its derivatives browsers can run “.js” code directly under the file:// scheme.

Chromium-based browsers can do it too, though w/ some limitations, if we run it w/ a modified shortcut w/ an “–allow-file-access-from-files” argument: Chrome-allow-file-access-from-file.com/

1 Like
8

Would you do web design with p5 for an entire web page?Is it possible?
What is the role of p5 in web design if being merely a part only?
THX