How to pull an image from a website

Processing Beginners
1

I want to use an image from a website as the basis for an interactive artwork. For example, this page

“https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png”

is a google logo.

This script just gives a ‘loading’ label

let img;

function preload() {
 url='https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'; 
 img = loadImage(url);
}
function setup() {
  createCanvas(640, 480);
}
function draw() {
  // put drawing code here
 background(200);
   image(img, 0, 0);
}

If I have a url to a specific image, how can I copy it to a variable so I can use it with p5.js?

I have successfuly set up a local server btw using sublimetext and browser sync. If I copy the image to my sketch folder I can use it with ‘loadImage(‘logo.png’)’ just fine. I am trying to skip that step so that the user can navigate to the website of their choice, grab an image and draw on it.

2

I believe the server hosting whatever image you are trying to get has to be configured to allow requests from another domain and they typically don’t.

If you look at your browser console when you try to run that it might give you an error with a link like the following explaining it a bit…

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

3

try this

PImage webImg;

void setup() {
  size(800, 600);
  String url = "https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
  webImg = loadImage(url, "png");
}

void draw() {
  background(0);
  image(webImg, 0, 0);
}

EDIT: sorry, missed the p5.js mention

4

no but this code works in the sketch

function add_google_logo() {
        var src = "https://www.google.de//images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
        show_image("https://www.google.de//images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", 276,110, "Google Logo");
    }


function show_image(src, width, height, alt) {
        var img = document.createElement('img');
        img.src = src;
        img.width = width;
        img.height = height;
        img.alt = alt;
        document.body.appendChild(img);
    }

and this is the html

<!DOCTYPE html>
<html>
<script src="p5/p5.js"></script>
<script src="p5/addons/p5.dom.js"></script>
<script src="sketch10.js"></script>

<body>

<!--var test='https://www.google.de//images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'-->
<button type="button" onclick="add_google_logo()">Try it-uses add_google_logo function</button>

<button type="button" onclick="show_image('https://www.google.de//images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', 276,110, 'Google Logo')">uses show_image function</button>
</body>
</html>

This demonstrates two different ways to get the image. First by referencing the url only in the function. Second, by passing the url as a variable in the function. Dont ask me tho if it passes by value or passes by reference-I dont know enough about p5.js to answer that.