How to load an image without function image();

Processing Coding Questions
1

Hello,
I have to get an europe-map image to the sketch-window by clicking the key l or L but without saving the picture and without using the function image();
I tried it like this but it’s not working. Maybe there is an issue with the link…? Could someone help me please?
Thanks so much in advance!

// Bildvariablen für die Karten
PImage europa;
PImage brexit;
// in welchem Programmstatus sind wir
byte status = 0;
// Positionsvariablen
int xPosMenueText = 50;
float xPosLaufschrift = 0;
int xPosBrexitKarte = 0;
int yPosBrexitKarte = 0;
int lineEnd = 0;
int lineStart = 0;

void setup() {
  surface.setTitle("Brexit");
  size(638, 493);
  background(190, 190, 190);
  surface.setLocation(319, 247);
  //Load image from a web server **HERE**
europa = loadImage("https://banner2.cleanpng.com/20180405/jhe/kisspng-europe-vector-map-royalty-free-europe-5ac6c0af154b29.0013899515229748950872.jpg");
}
void draw() {
  fill(0, 0, 255);
  textSize(24);
  text("(L)ade Europa", 50, 50);
  text("(E)xit", 50, 90);
  strokeWeight(8);
  line(80, 110, 638, 110);


  // Bei Status 0 wird das Anfangsmenü gezeigt (Europakarte laden / Ende)
  // . . .
  // Bei Status 1 wird Europa angezeigt + Menü (Englandkarte nachladen / Ende)
  // . . .
  // Bei Status 2 werden beide Karten angezeigt + Menü (Brexit / Ende)
  // . . .
  // Bei Status 3 kann England mit den Tasten was bewegt werden
  // . . .
  // Bei Status 4 wird keine Karte mehr angezeigt, dafür aber eine Laufschrift + Menü

  // . .
}

void keyPressed() {
  // Tasten auswerten

  // Programm verlassen
  if (keyPressed) {
    if (key == 'e' || key == 'E') 
      exit();
  }
  // Laden der Europakarte vorbereiten  **HERE**
if(keyPressed){
  if(key == 'l' || key == 'L')
loadImage("europa");
  // Laden der Englandkarte vorbereiten
  // . . .
  // Englandkarte wird mobil
  // . . .
  // Steuerung der Englandkarte über die Europakarte
  // . . .
} 
}
2

If the browser can access the page, and the Processing code cannot, maybe that is because the site sets a cookie (maybe during login). You may be able to handle this in code, you will have to explicitly add support for passing the cookie. But why don’t you publish the image on Pinterest?
I managed this here.

1 Like
3

It’s actually working if I use the image(); function like you did but i’m not allowed to use the image function. I don’t know which other function or way I could use to let a web image appear by clicking a key.

4

Do you mean not allowed to use this to display the image?

image(europa, 0, 0);

That is impossible I´m afraid.
The image link really doesn’t load in Processing. That’s why I posted the suggestion above.

5

You could load the pixel array. Like:

PImage img; 
void setup() { 
  size(676, 592); // Note that the size is the same as image  just to facilitate;to be able to use width and height
  img = loadImage("your_image.ext"); 
}                                  
void draw() { 
  loadPixels(); 
  img.loadPixels(); 
  for (int y = 0; y < height; y++ ) { 
    for (int x = 0; x < width; x++ ) { 
      int loc = x + y*width; 
      float r = red(img.pixels [loc]); 
      float g = green(img.pixels[loc]); 
      float b = blue(img.pixels[loc]);
      pixels[loc] = color(r, g, b);
    }
  }
  updatePixels();
}
6

Hello,

I hope that the community will give you the opportunity to find it on your own.
It is so much more rewarding that way!

:)

1 Like
7

@glv Did you manage the 403 error with the openConnection.addRequestProperty() function, or in another way?

8

I simply used a link that worked and found a suitable image to meet the requirements of the question.

You already provide a link to a solution to that by posting on Pinterest.

Once a link is found that works a solution to this can be found in the second two bullet points.

:)

1 Like
9

I was intrigued by the 403 error, and the solution I found doesn’t work on every browser. With that difficulty, I didn’t notice the homework tag, on which I normally do not react because I just can’t help myself.

10

Hello @noel

Can you elaborate on this?

:)

11

I tried this one.

12

Solutions posted here look weird to me. Why disallow using image() just to teach you how to use loadbytes?
Making you develop a custom filter would be more useful.
So I guess they want you use a svg image. There are SVG maps on the wikipedia, and there is a function to use SVG files in processing.