Dear Community,
wheras the p5 online editor runs the code of the sketch.js perfectly, I cant run it in my browser after downloading it.(Saying: loading…) Where is the problem?
You see the containing files in the pic, that came with the downloaded zip from the p5 online editor…
THX!!
also read
I figured out, that if I comment out anything having to do with the image, the code works in the browser (Firefox):
Here´s what happens in a smaller test example: I used a coding example from the MAKE: Getting started with p5.js book. They mention some things having to do with servers, but don´t go into detail and commence with the coding example below…
var img;
function preload() {
img = loadImage("lunar.jpg");
}
function setup() {
createCanvas(480,120);
}
function draw() {
image(img, 0, 0);
}
The .jpg-file is copied into the project folder and is located besides the sketch.js file.
Here´s the consoles error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/Dandimite/Desktop/p5/Lunar_pic/lunar.jpg. (Reason: CORS request not http).
TypeError: NetworkError when attempting to fetch resource.
THX for help!!
BX
again, you say that processing code works,
loading the image NOT,
that is exactly what we talk about
How to use images on windows 10 ,
for loading ANY files via processing ( not HTML )
you need that server / filesystem functionality
add you seem to use the CHROME browser
and get that CORS…
so besides some basic functions you can not develop p5.js code without any server
if you not want to use the
online editor at https://editor.p5js.org/ or
the Processing 3.5.3 / p5.js Mode
need the server way.
okay, will have to check. THX!!! so much for your patience.
Just to understand the complete picture of web development:
What is the clue then to provide a folder for a website with images. My guess so far was to collect all files within the project folder and upload on a website server. If the images are stored on a local server, the images cannot be found from the website server later on, I guess…
How to make that step from building code locally and provide it later for a public website with all media files?
THX
now you talk about YOUR public web site?
running p5.js with your pictures?
well yes, you will have to copy your sketch.js and all pictures there.
and that most likely will be by the web space provider given FTP link
but if you do something like that you MUST have still your local backup…
and for run that local backup also as local server need that tools.
and if you use chrome browser, can use that server extension.
install it
/ start it / link it to the path your index.html file is
find the SITE not via the PATH ( see still empty picture LEFT )
must call the IP / PORT from the now running local server ( picture RIGHT )
OKAY. Did it!!
Picture is shown. Code is recognized, also when I change some things and refresh the browser is reacting correct.
Cool!!!
I installed chrome of course. Firefox also!! works and is opened automatically when I click the server adress link you see here:
I would keep all my media files in the project folder, I did not get it right, when having in mind that the pics should be located elsewhere where we talked about a server. I misunderstood that, I guess.
At the moment I would go with Visual Studio Code and Chrome/Firefox. Just because I know VSC a bit. If there is a better combination for working with p5 please let me know…
I would prefer to stay in a local folder, rather than using the online p5 editor to start working right away with the intended implementation of media files (Pics and audio).
Hope that direction is okay so far with your great advice!!
Best regards
BX
yes , that is a ( hyper ) link,
and the DEFAULT browser will open
as you develop a web site
by manually coding HTML and JS
it is the minimum to check it by that 2 browsers.
( add possibly how it looks / operation works / on a tablet / mobile… )
sorry, for me there is a difference between
depending on your concept
sometimes i think the combination is not so well explained at p5.js
so i play
to learn about position a canvas in a more traditional web site layout.
__
now that would also show how to use a ( static ) image from the HTML side
( instead of inside the canvas )
