We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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
Answers
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
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?
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
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: *-:)
https://GitHub.com/technoboy10/crossorigin.me (service currently offline :-S)
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:
Instead, those 3 files had to be uploaded & grabbed from the same domain as the Pjs sketch is hosted:
If you look at the p5.js version, you'll spot it takes directly from http://KhanAcademy.org URLs: =P~
And it was also able to resize() them all, although they're all tainted images after been acquired: >-)
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
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: :-bdhttps://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!
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
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! =]