Using Images From URLs

[s31]

Hi,

if you would ever be so inclined, could someone please show me the correct way to load images using a url as the path. It accepts urls and returns this error so i do not know what i am doing wrong.

TypeError: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: Overload resolution failed.

thankyou!

[mnse]

Hi @s31,

would you please share your code which producing this error, so we could test and see what is ongoing ?

Cheers
— mnse

[s31]

let pic;

function setup() {
  createCanvas(500, 500, WEBGL);
  pic = loadImage('https://imgur.com/gallery/9am48');
}

function draw() {
  background(205, 102, 94);
  texture(pic); 
  sphere(40);
}

returns

[josephh]

Hi @s31,

This is an issue with the CORS policy.

You can read more about it on those previous threads:

Fetch API cannot load file

Ah, CORS, so we meet again. When trying to access resources (especially in any browser other than Firefox) in a developer-y way, you will often also be doing things that look remarkably like what bad actors do who spoof websites, steal identities, pass viruses, run bot-nets etc – one aspect of which is sometimes called “cross-site scripting,” although suspicious crossings can also be local to a client. CORS (Cross-Origin Resource Sharing) is one of the security measures that prevents you from …

API POST error - not sure what's causing it

Hi, If I run the code in the p5 web editor, I get this error : TypeError {stack: ""} This is somehow cryptic and I don’t really know what is the formatting behind this. However the httpPost function is using the fetch function behind the scenes and I tried running that in a new tab (in Firefox): fetch('http://colormind.io/api/', {method: 'POST', body: postData}) .then(data => data.json()) .then(json => console.log(json)) .catch(err => console.log(err)); And effectively there…

EDIT:

as @mnse said, it’s the url that is not the right one, it’s explained in this SO thread how you can get a direct link to an Imgur image:

How to get direct link of images on Imgur?

[mnse]

Hi @s31,

actually you are also not loading an image by that url you are using.

try this…

let pic;

function setup() {
  createCanvas(500, 500, WEBGL);
  pic = loadImage('https://i.imgur.com/9am48.png'); // real url of the image ...
}

function draw() {
  background(205, 102, 94);
  texture(pic); 
  rect(-width/2,-height/2,width,height);
}

Cheers
— mnse