Online sharing of p5.js sketches that contain image files

marcusround

I'm having trouble finding somewhere that I can host a p5 sketch online which references images.

I tried using CodePen and uploading the images to imgur but this doesn't seem to work. The Chrome console says '403 forbidden' error from imgur.

Here is a barebones sketch which does not work.

http://codepen.io/marcusround/pen/ojQeyR/

Does anybody have a solution? Thanks!

GoToLoop

W/o preload(), it's gonna take some time until the <img> is finally displayable:
http://p5js.org/reference/#/p5/preload

Also use imageMode() w/ CENTER: http://p5js.org/reference/#/p5/imageMode

marcusround

Thank you, but originally my (larger) sketch did use the preload function, I just overlooked it for this simplified example.

I've updated the CodePen to use preload() and it still doesn't work. Does the image show up for you?

Marcus

GoToLoop

As mentioned, preload() for images isn't all that necessary.
It Just makes sure sketch starts only after it's fully loaded.

This time I've paid more attention inside F12 JS console.
I've got these error messages below:

1. Failed to load resource: the server responded with a status of 403 (Forbidden)
2. GET http://i.imgur.com/WIQvIr7.png 403 (Forbidden)

But once I've visited that http://i.imgur.com/WIQvIr7.png, the sketch simply started working! @-)

blindfish

But once I've visited that http://i.imgur.com/WIQvIr7.png, the sketch simply started working!

@GoToLoop: that makes sense: you then have a copy of the image in the browser cache so it doesn't bother making the request to imgur; so doesn't hit their block...

@marcusround: read the imgur documentation... From the 403 response you're getting they clearly block direct loading of images via GET requests; presumably to stop bots from scraping their content. From a quick search it's apparent that to dynamically load images using JS you have to use their API and pass a client API key with the request... i.e. it's far more complicated than hosting the image on a server you have control over.

blindfish

OK, from a quick scan of the API docs the access restriction is to allow them to limit the number of requests being made in any given time period by an 'app'... You'll have to read the docs in a bit more detail to figure it out; but I suspect that this means p5js's loadImage method isn't going to work; since you need to be passing an authorization header with the request...