Processing Image Load Error - processing

Question

I've added a background image to my processing file which works fine when I run it in Processing locally, however, I'm receiving this error in console when I host the file:
Uncaught Error using image in background(): PImage not loaded.
I can't find anywhere why this may be happening. Please see my code below:
Particle p = new Particle();
final int LIGHT_FORCE_RATIO = 70; final int LIGHT_DISTANCE= 70 * 50; final int BORDER = 100; float baseRed, baseGreen, baseBlue; float baseRedAdd, baseGreenAdd, baseBlueAdd; final float RED_ADD =
3.2; final float GREEN_ADD = 1.7; final float BLUE_ADD = 4.3; float boxX, boxY; float widthSize = width;
int rectWidth = 915; int rectHeight = 197;
PImage img;
void setup() { img = loadImage("https://s3.amazonaws.com/zcom-media/sites/a0iE000000QK9yZIAT/media/mediamanager/bannerbg.jpg");
background(img); size(1840, 400); // surface.setResizable(true); noCursor(); //img = loadImage("flowtoy.jpg"); baseRed = 0; baseRedAdd = RED_ADD;
baseGreen = 0; baseGreenAdd = GREEN_ADD;
baseBlue = 0; baseBlueAdd = BLUE_ADD;
boxX = width/2; boxY = height/2;
img.loadPixels(); for (int i = 0; i < img.pixels.length; i++) { img.pixels[i] = color(0, 90, 102); } img.updatePixels(); }
void draw() { //image(img, 400, 100, img.width/2, img.height/2); if (mouseX>boxX-rectWidth && mouseX<boxX+rectWidth &&
mouseY>boxY-rectHeight && mouseY<boxY+rectHeight) {
//saveFrame("output/LightDrawing_####.png");
baseRed += baseRedAdd;
baseGreen += baseGreenAdd;
baseBlue += baseBlueAdd;
colorOutCheck();
p.move(mouseX, mouseY);
int tRed = (int)baseRed;
int tGreen = (int)baseGreen;
int tBlue = (int)baseBlue;
tRed *= tRed;
tGreen *= tGreen;
tBlue *= tBlue;
loadPixels();
int left = max(0, p.x - BORDER);
int right = min(width, p.x + BORDER);
int top = max(0, p.y - BORDER);
int bottom = min(height, p.y + BORDER);
for (int y = top; y < bottom; y++) {
for (int x = left; x < right; x++) {
int pixelIndex = x + y * width;
int r = pixels[pixelIndex] >>16 & 0xFF;
int g = pixels[pixelIndex] >> 8 & 0xFF;
int b = pixels[pixelIndex] & 0xFF;
int dx = x - p.x;
int dy = y - p.y;
int distance = (dx *dx ) + (dy* dy);
if (distance < LIGHT_DISTANCE) {
int fixFistance = distance * LIGHT_FORCE_RATIO;
if (fixFistance == 0) {
fixFistance = 1;
}
r = r + tRed / fixFistance;
g = g + tGreen / fixFistance;
b = b + tBlue / fixFistance;
}
pixels[x + y * width] = color(r, g, b);
}
}
updatePixels(); } else {
setup(); }
//updatePixels(); }
void colorOutCheck() { if (baseRed < 10) {
baseRed = 10;
baseRedAdd *= -1; } else if (baseRed > 255) {
baseRed = 255;
baseRedAdd *= -1; }
if (baseGreen < 10) {
baseGreen = 10;
baseGreenAdd *= -1; } else if (baseGreen > 255) {
baseGreen = 255;
baseGreenAdd *= -1; }
if (baseBlue < 10) {
baseBlue = 10;
baseBlueAdd *= -1; } else if (baseBlue > 255) {
baseBlue = 255;
baseBlueAdd *= -1; } }
void mousePressed() { setup(); }
class Particle { int x, y; float vx, vy; //float slowLevel;
Particle() {
x = (int)3;
y = (int)2; // slowLevel = random(100) + 1; }
void move(float targetX, float targetY) {
vx = (targetX - x) ;
vy = (targetY - y) ;
x = (int)(x + vx);
y = (int)(y + vy); } }
Can anybody explain why this may be happening? It's much appreciated, thank you.

Answer 1

I assume by 'hosting the file' you mean running the sketch at www.openprocessing.org.
There are two problem with your code:
Using background() inside setup. This will not work, you will get the error you mentioned. You can try moving that to draw().
Using an image which is hosted in another server. You should host your own images.
A workaround to problem 2 is to store the image as a base64 encoded string.
String uriBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgA";
img = loadImage(uriBase64);
Full example here: https://www.openprocessing.org/sketch/511424