Empty-example/loading sketches/node-server

p5.js Beginners
1

Hi everyone. I just started a book on p5.js and im trying to run the empty-example included with the complete p5.js dowload and can’t seem to get it to appear in the browser. It loads somewhat because the title appears in the tab bar. For some reason though, nothing appears on screen. I have a local server running and everything. I’ve also tried opening it by double clicking the html file. Might anyone have an idea as to what is going on?

Any help is appreciated!

2

Hello @brightbeam

That sounds about right; the empty example is just that. Empty. :blush: Open up sketch.js in a text editor, and you will see:

function setup() {
  // put setup code here
}

function draw() {
  // put drawing code here
}

For something to appear, you will have to actually write some code. Maybe there’s an example early on in the book you can type into sketch.js?

3

@Sven That’s what I originally thought and it happens to not be the case. I entered a given example in and no results still.

function setup() {
  // put setup code here
}

function draw() {
  // put drawing code here
  background(204);
  ellipse(50,50,80,80);
}

I get this error in console as well:
[2020-09-08T16:12:20.561Z] “GET /p5.js” Error (404): “Not found”
As if it can’t locate the p5.js file even though I’ve touched nothing except to unzip it when. I unzipped it to an empty folder on my desktop. Did i mess up something there you think? Thoughts?

Edit: im using a node server

4

What happens if you just open index.html in your browser, instead of running a node server? Are p5.js present one directory above index.htm like this?

empty-example
    index.html
    sketch.js
p5.js
README.txt
[...]
1 Like
5

I am suspecting the html file is corrupt or it is not ok. I compared with another file that I downloaded after writting in the online p5 editor, and a key difference lies in the fact that the empty example has the script tag that calls the sketch.js inside the head, whereas in the working file the script tag is inside the body.
Try placing the script tag in the body.
Also the css styles have a canvas selector with a display property set to block.

it could also be a problem with the local server program. IDK.