Are there limitations to images loaded from the web?

ch3

I am writing a program in processing 2.2.1 (javaScript mode) that uses data from images. I have most of the functionality I need with images loaded from the data directory. But once I started introducing images from URLs, I've started getting weird behaviors and over the past couple of days I can't pin point the problem.

The first issue appeared when I tried to access the pixels array of a web image. I just couldn't get values. Then a local image would also start to mis-behave by not been accessible. At times the problem seemed to be inconsistent. I put together a test sketch, where I load and display a local and a web image. But when I try to resize them with a keystroke, the program doesn't do anything.

Am I missing something? Should the /* @pjs preload="georgios.jpg"; */ be right above : Img1 = loadImage("georgios.jpg");

How do you preload a web image from a URL that comes from a user textarea field?

And here is my test sketch:

PImage Img1;
PImage Img2;

void setup ()
{
  size( 500, 600, JAVA2D );
  colorMode(RGB,1);
  background(0.18);

// @pjs preload must be used to preload the image 
/* @pjs preload="georgios.jpg"; */
  Img1 = loadImage("georgios.jpg");
/* @pjs preload="http://stylesatlife.com/wp-content/uploads/2015/09/Layered-Hairstyles-for-Round-Faces-4.jpg"; */
  Img2 = loadImage("http://stylesatlife.com/wp-content/uploads/2015/09/Layered-Hairstyles-for-Round-Faces-4.jpg");

  //Img1.resize(200,200);

}


void draw()
{
  background(0.18);


  if( Img1 != null )
    image(Img1, 20, 20);
  else
    text( "Img1 Busted", 20, 20 );

  if( Img2 != null )
    image(Img2, 300, 300);
  else
    text( "Img1 Busted", 320, 320 );


  text( frameRate, 10, 10 );

}


void keyPressed()
{
 if(key=='a')
 {
  Img1.resize(200,200);
 }
 if(key=='z')
 {
  Img1.resize(50,50);
 }

 if(key=='s')
 {
  Img2.resize(200,200);
 } 
 if(key=='x')
 {
  Img2.resize(50,50);
 } 

}

if I remove the comment from Img1.resize(200,200);, the program doesn't run at all, which is weird.

thank you

GoToLoop

Any images loaded outside sketch's domain becomes tainted in Pjs! :-O
And any PGraphics, including the main canvas, which happens to display such tainted images become tainted as well! :-h

ch3

aka... code AIDS 8-X

Interesting... so basically it's not possible at the moment to let the user dynamically input an image to be processed?

GoToLoop

• Pjs can load the image. It just becomes tainted if it's outside its domain as I've mentioned.
• We can't even resize() a tainted image in Pjs. Although p5.js can.
• If we somehow could get hold of the internal HTMLImageElement we'd be able to resize() it.
• Another way is to directly create our own HTMLImageElement.

ch3

I see... the html is a little grey area for me and it's the part that has taken me the longest on this project. =\ I may try with p5.js but it may be too hard for me to port my sketch to that, as I've been working on it for a long time now. Otherwise no online images.

thank you for the info though, I appreciate

GoToLoop

I may try with p5.js but it may be too hard for me to port my sketch to that,

If you need to load resources from arbitrary URLs, that's the sensible choice, unless you know how to hack Pjs. Nonetheless, I've still got some important advises for you: *-:)

• Even w/ p5.js, those images are gonna be tainted the same way as Pjs if loaded by external URLs.
• But there are some very important points and workarounds not normally possible w/ Pjs.
• If the foreign URL got CORS authorization enabled, the image doesn't become tainted in p5.js.
• Regardless, contrary to Pjs, in p5.js we can still resize() tainted images. :>
• However, if we need to do more pixel related stuff like pixels[], the image must be non-tainted.
• But there's 1 more trick in order to avoid tainted images: Use some CORS proxy service in order to grab the problematic resource:
  https://GitHub.com/technoboy10/crossorigin.me (service currently offline :-S)
• Using such a service, we can grab non-tainted images outta URLs w/o CORS enabled! \m/

GoToLoop

To illustrate all of I've said above, I've got this jumping-beaver-catch-sticks prototype game: :bz
https://forum.Processing.org/two/discussion/8997/hoppy-beaver

It's got 2 versions: The original made as Java-JS cross-mode, and the other converted to p5.js.
The Pjs version can be played online here: http://studio.ProcessingTogether.com/sp/pad/export/ro.9bTfM49wCIJza

This game uses 3 image resources: "Hopper-Happy.png", "Hopper-Jumping.png" & "GrassBlock.png".
It also needs to resize() all of them. Due to that, Pjs can't get them straight outta their original URL:

1. https://www.KASandBox.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Happy.png
2. https://www.KASandBox.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Jumping.png
3. https://www.KASandBox.org/third_party/javascript-khansrc/live-editor/build/images/cute/GrassBlock.png

Instead, those 3 files had to be uploaded & grabbed from the same domain as the Pjs sketch is hosted:

1. http://studio.ProcessingTogether.com/static/uploaded_resources/p.6273/Hopper-Happy.png
2. http://studio.ProcessingTogether.com/static/uploaded_resources/p.6273/Hopper-Jumping.png
3. http://studio.ProcessingTogether.com/static/uploaded_resources/p.6273/GrassBlock.png

If you look at the p5.js version, you'll spot it takes directly from http://KhanAcademy.org URLs: =P~

const KHAN = 'https:/' + '/www.KASandbox.org/third_party/'
  + 'javascript-khansrc/live-editor/build/images/';

const REMOTE = true;
const PATH = REMOTE && KHAN || '';

function preload() {
  Beaver.falling = loadImage(PATH + 'creatures/Hopper-Happy.png');
  Beaver.jumping = loadImage(PATH + 'creatures/Hopper-Jumping.png');
  Grass.lawn = loadImage(PATH + 'cute/GrassBlock.png');
}

And it was also able to resize() them all, although they're all tainted images after been acquired: >-)

Beaver.falling.resize(Beaver.SIZE, Beaver.SIZE);
Beaver.jumping.resize(Beaver.SIZE, Beaver.SIZE);
Grass.lawn.resize(Grass.SIZE, Grass.SIZE);

P.S.: The p5.js version can be run by simply copy and paste it in host sites such as this 1: O:-)
http://p5ide.HerokuApp.com/editor

GoToLoop

Last advises about JS itself: You can learn about its syntax, keywords, operators and builtin objects here: https://developer.Mozilla.org/en-US/docs/Web/JavaScript

In particular, since you already know Java, it's a huge shortcut to jump straight at ES6 (ES2015) features. Especially its latest class keyword: :-bd
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

I'll soon hope to start converting "Hoppy Beaver" from ES5 to ES6 JS. Then host it online. :ar!

GoToLoop

Finished converting "Hoppy Beaver" from ES5 to ES6 JS under p5.js w/ keyword class: \m/
https://forum.Processing.org/two/discussion/8997/hoppy-beaver#Item_2

It can be played online below too: O:-)
http://p5js.SketchPad.cc/sp/pad/view/ro.GrwKUsycNrY/latest

ch3

Hey sorry, I was away on holidays. Thank you so much for the in-depth explanation. I need to play around with all these to fully understand it, but I get the overall idea.

For the time being I am continuing the development of my project without these extra images. I am close at finishing it and at the end I may a last look at it.

The idea was to have the user input his own image to the sketch. I thought using a web image would be simpler than figuring out how to upload one through the sketch, which I don't even know if it's possible.

Nice game by the way! =]