Getting started with P5.js using Brackets - having problems

damiduran

Hi, I'm getting started with P5.js using Brackets. I saw this video where Daniel explains how to do it.

As I was trying to follow along I wrote this code:

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

function draw() { background(0); ellipse(200, 200, 50, 50); }`

when I try the LivePreview it's just blank and in the Brackets window I get the following:

5 JSLint Problems × 2 Missing 'use strict' statement. createCanvas(400, 400); 2 'createCanvas' was used before it was defined. createCanvas(400, 400); 6 Missing 'use strict' statement. background(0); 6 'background' was used before it was defined. background(0); 7 'ellipse' was used before it was defined. ellipse(200, 200, 50, 50);

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

My advise, at least for p5.js, is to ignore JSLint's warn messages. Or even better, turn that off! :P

In order to run a p5.js ".js" sketch, we need an ".html" file, which in turn loads the "p5.js" <script> library before your "sketch.js": *-:)

"index.html":

<script src=https://CDN.JSDelivr.net/p5.js/latest/mainfile></script>
<script src=sketch.js></script>

But given you've already got your own "p5.js" file locally, inside subfolder "libraries/", your "index.html" can also be like this too: :D

"index.html":

<script src=libraries/p5.js></script>
<script src=sketch.js></script>

damiduran

Hi GoToLoop, thanks for posting. I'm using the empty example I downloaded from http://p5js.org/download/ which contains the index.html file with the code you are mentioning.

GoToLoop

Those 2 posted examples were my own "index.html" bare minimum templates.
If you prefer to use your own, at least make sure it's just as correct as mine. $-)

https://forum.Processing.org/two/discussions/tagged/index.html

shiffman

Your setup looks correct and I don't see any syntax errors in the code. Can you check the JavaScript console in the browser when you launch with live preview? Looks like the errors in Brackets are just there because it's not able to detect the p5.js library, but this shouldn't matter once it is running. I'll check and see if it looks the same in Brackets for me. Are you on Mac or PC?

damiduran

Hi Daniel... I just tried running the livepreview again and it worked fine (although I'm still getting the errors in Brackets but I'm ignoring them as per suggestion). I don't know what I did to fix it... I don't think I did anything really... it's a bit embarrasing, sorry!. Thank you and GoToLoop for your help! I'll keep watching the videos and learning!

edit: I'm on PC btw

blindfish

@damiduran - just for info jslint is an automated tool that reports possible coding errors. When these are reported that doesn't mean the code won't run (though sometimes it does). You normally have to do some additional configuration when working with external libraries to ensure it knows that certain keywords are defined externally...

enol

Hello ! I have exactly the same problem - LivePreview is just blank (im using pc)

Edit: I find out what problem was, it works after save, but not "live". After every changes i need to save project and only then after F5 it shows in 127.0.0.1 Maybe anyone know what my problem is ?

Edit2: Rewatching video and only now realise that Daniel says "hit save". Will leave this comment mb it will help somebody >:D<

shiffman

Glad you got it working @enol!

Zandgall

shiffman I wrote a .js file with a function called Insect(); where it draws a circle and moves it depending on random picks, I called it in index.html, and I wrote var bugs[]; bugs[0] = new Insect(); in var setup = function(); in sketch.js, then later in sketch.js I wrote the code that made bugs[0].draw(); I saved it and I ran the code, and the output was the canvas I wrote earlier in the code, and then a number 0 (the bug report says 'Insect' was used before it was defined, so I moved the line in index that called Insect before the line that called sketch and it still didn't work) any suggestions?

kfrajer

@Zandgall It is better if you start your own post and let this post RIP as it is not related to your question. Please provide your code and don't forget to format your code when you create your post. To do so, select your code in your post, hit ctrl+o and ensure there is an empty line above and below your code. After you create your own post, other forum goers will be happy to assist you with your question. If the code you provide is not a stand alone demo, please provide as much detail as possible about what the code does.

Kf