I spent some more time this week trying to debug the Donut. I began to think that the glitching problem was specific to my computer since it ran so smoothly on the classroom machine. So I thought I could just download the sketch.js file and edit that in Sublime Text and launch it locally on my computer, viewing it in Chrome. But I kept getting “Script Error. ( : line 0)”. After some googling, I found that the error was happening because I was trying to run the sketch both with HTTP elements and local elements off my hard drive.
For instance, I was trying to launch a song stored in the sketch’s assets folder online while running the index.html file from my local hard drive. Chrome will allow you to mix protocols “http://” and “file://” in that way which, as we discussed in class briefly, is a protection layer so that an external website cannot look onto your hard drive without you knowing it.
The solution I found is to Run A Local Server on your desktop so that Chrome can view the local files via the “http://” protocol instead of “file://”. So I downloaded the p5js sketch using File > Download. The package came as a ZIP file with all the javascript files like “sketch.js” along with the “index.html” file, libraries, and my “assets” folder, which had the background song file. Once unzipped, this folder would be where I hosted my files from.
To launch a local server using http://, I followed the instructions on the link above:
Download and install Python.
Use the Terminal to navigate to the folder I wanted to serve my files from. (To quickly find the path of the folder, I hit CMD + I to get info which will show the path on of the files. Then in Terminal, type “cd” and paste in the path. Hit return and you will currently be “in” the folder you want to make changes to.)
Type the following command into Terminal: “python -m SimpleHTTPServer” which will open a server instance in that folder under the path “http://localhost:8000” with 8000 being the port name.
When I did the step above, an old website came up that I had been working on years ago. It was clear that somewhere in the past I had managed to do this same thing, although I clearly had not retained the information. So I had to open the local host from another port. This was done by simply adding a port number at the end of the command: “python -m SimpleHTTPServer 7800”. These port numbers were recommended from the web.Next, I simply typed in “http://localhost:8000/” into Chrome and my canvas popped up with my Donut and it wasn’t glitching!!!!
I was able to edit my sketch.js file using Sublime Text and the Save after each edit and refresh the locally hosted webpage in Chrome to see the updates. The only problem now was that there was no Console like in the p5!
When I was done editing the Donut, I simply uploaded the sketch.js text back into p5 and launched the file and… but was still glitching!! So this led me to believe that the issue is will p5 and my computer somehow and not that the sketch was too processing heavy. I was able to get the sketch to run without the “Script Error ( : line 0)” when I launched a incognito window, so perhaps it was a login issue.
I would use this technique later when working on my PCOMP mid-term because the sketch we built there also exhibited this glitching behavior. But this time, I made the console stream down to right side of the screen.
Local hosting with p5 sketch and Chrome console.
I wouldn’t recommend this technique for editing files unless you know what you’re doing because when I tried to add p5.Sound functionality from the Sound Library, I got all kinds of issues with how to link in that library. Unless you build the guts of the sketch using the p5 editor and add all the libraries and external files there and download in one package, you can get into a lot of extra mess trying to manage all that locally. But it was an educational journey!