Because of browsers security, loading files like this might not work from a url starting with file://
What webstorm is probably is making a local web server so that instead of saying file://
you could say http://
. if any website was able to load images from file://
then any webpage you visit would have been able to search for any file on your computer and send it over the internet without your consent so browser often have these settings on. So you'd need a server. If you are working on your computer, you could make a local server just like webstorm and host your own files there. or host it on another service like github pages or codepen.
Now since all images are in the same directory, make sure that every time you call loadImage
you use the images name and extension instead of saying /User/user/whatever_other_directory_you_have_it_under/image.png
.
Once you did that you can make a local web server for the project. To make a local server, open Terminal (an application under utilities, you could spotlight search for it as well) and type cd
, drag your project folder and drop it over terminal, and hit enter. Then type python -m SimpleHTTPServer and wait till it says something like Serving HTTP on 0.0.0.0 port 8000 ...
. Then taking the 0.0.0.0 and the 8000 you see in the example (yours may or may not be the same) go to your browser and type http://0.0.0.0:8000 (replacing the digits with whatever you got, not this link doesn't work until you do that)
Images should load alright. If you need to stop the server you can go back to terminal and hit control+C
.
Note that when presenting your p5 sketch, no one else would be able to see the website on their computers if you make your local server. The local server is secluded to the device that is running it (although if their making their own local server and have your project files it should work just fine).
If you want the website hosted so that you could share a link with anybody in the world you could use codepen or github pages. If you go to codepen.io it should be self-explanatory although you'd have to upload your images to some image hosting site like tumblr or something and add the URL source of those images to codepen or you could put everything into github for even better results!
To use github pages you'd need to make a github account (preferably with your username being whatever you want your page to be named). Make a repository named insert_username_here.github.io
. add your files to the repository (make sure to try to keep all sub directories and folder exactly as they are from your project folder). After a minute or two go to http://insert_username_here.github.io
to admire your brand new hosted webpage!