These are a few examples of p5.js editors, but there are a bunch of other options. If you encounter a situation where your code is doing something different from what you expected, check the JavaScript console for errors. Before you start coding, make sure you’re familiar with the JavaScript console! This will be your best friend when debugging your code.Ĭheck out the debugging tutorial and the developer tools tutorial to learn more. (Click the Run Pen button to see the embedded CodePen editor.) JavaScript ConsoleĪll of the above options involve running code in a web browser. See the Pen by Happy Coding ( on CodePen. Then click the Close button, and type this into the JavaScript section of the editor: Go to the p5.js CDN page to find the latest version of p5.js, and paste that URL into the Add External JavaScript section of the CodePen settings dialog. In the Add External JavaScript section, you want to add p5.js. That takes you to the CodePen editor.įrom there, go to the Settings button and click the JavaScript tab. Go to CodePen and then click the Create button, and then the New Pen button. CodePenĬodePen is another online editor that lets you to write HTML and JavaScript directly in your browser. The Processing editor is a good choice if you’ve already been using it to write Processing code, or if you need an easy way to launch a local server (some features don’t work with file:// URLs, so you need a server). These are all regular text files that will work with any of the editors in this tutorial. In that directory, I see an index.html file and a MySketch.js file, as well as a libraries directory that contains a p5.js file. I saved my sketch to my desktop and named it MySketch, which created a directory named MySketch on my desktop. You can save you sketch to see the files you’re working with. Try adding Hello World to the of your HTML, and click the run button again. You can edit the index.html tab to change what’s displayed around your sketch. Then click the play button, and the Processing editor should automatically open your web browser to a local server that Processing is running for you. Then click the mode dropdown again (it probably still says Java) and then click p5.js. When the download and install finishes, close the Contribution Manager dialog. In the Contribution Manager dialog that pops up, click p5.js Mode and then click the Install button in the lower-right corner. Go to the mode dropdown in the upper-right corner (by default it says Java), and then click Add Mode. You can also create p5.js sketches from the Processing editor. It also lets you work on your code without an internet connection, as long as you download a local copy of p5.js instead of using the CDNJS link. Using a text editor is great if you want full control over everything. Then in your index.html file, you’d load that file using. Note that you can also save your p5.js code to a separate file, for example sketch.js. You should see red circles instead of white. Try changing the fill(255) line to be fill(255, 0, 0) and then save the file and refresh the page. When you open your file in your browser, you should see something like this: File:///C:/Users/kevin/Desktop/index.html
0 Comments
Leave a Reply. |