XML problem and IndexSizeError problems when converting sketch to processing.js
in
Processing with Other Languages
•
11 months ago
I have a sketch that retrieves an image from flickr through the api. It retrieves an xml document sorts through and gets the neccesary piece, puts them together to form the url for the image. I then take the image and run it through multiple "glitching" functions that I modified from a sketch I found.
Two problems occur when I try running it in the browser. One is that I get an error saying the the XMLelement a is undefined. The actual error being printed is "a is undefined". The second problem is that when I process this sketch using an image located in the directory(not retrieved through flickr's api) I get an error that says:
IndexSizeError: Index or size is negative or greater than the allowed amount
Two problems occur when I try running it in the browser. One is that I get an error saying the the XMLelement a is undefined. The actual error being printed is "a is undefined". The second problem is that when I process this sketch using an image located in the directory(not retrieved through flickr's api) I get an error that says:
IndexSizeError: Index or size is negative or greater than the allowed amount
return curContext.getImageData(x, y, w, h)
Im assuming the glitch functions are attempting to step outside of the image/background, but Im confused why this is only occuring inside the browser, but when ran in processing its fine. Obviously processing and javascript are very different, but the thing is Im not sure how to edit the sketch to make it work.
Here is some abridged code, if requested I can post the full length of code.
XML Code snippet:
PImage img;
void setup() {
img = loadImage(getFlickrImageUrlFromTag("american+apparel", "APIKEY"));
image(img, 0, 0);
size(img.width, img.height);
myGlitch = new GlitchObject();
frameRate(20);
}
String getFlickrImageUrlFromTag(String _tag, String _apiKey) {
int pageNumber = int(random(2000));
// build url
String rest = "http://api.flickr.com/services/rest/?method=flickr.photos.search";
rest += "&api_key=" + _apiKey;
rest += "&tags=" + _tag;
rest += "&per_page="+1;
rest += "&page="+ pageNumber;
rest += "&tag_mode=all&safe_search=3&sort=interestingness-desc";
// get payload
XMLElement xml = new XMLElement(this, rest);
println(xml);
// parse XML results
XMLElement a = xml.getChild(0).getChild(0);
println(a);
String fm = a.getStringAttribute("farm");
String sv = a.getStringAttribute("server");
String id = a.getStringAttribute("id");
String sc = a.getStringAttribute("secret");
// build http string
String url = "http://farm"+fm+".static.flickr.com/"+ sv + "/" + id + "_" + sc + "_b.jpg";
return url;
};
a few of the "glitch" functions that Im using that work in processing, but step beyond arraylength(imagesize) in p.js
void getSetGlitch1() {
for (int i=0; i<2; i++) {
int x = r(width);
int y = r(height);
randomSeed(int(0.03*frameCount*i/10+r(36)));
for (int j=0;j<random(10); j++) {
set(x+r(width/100),y+int(pow(j,2)),get(x,y,r(width),r(height/5)));
}
}
}
void getSetGlitch2() {
for (int i=0; i<10; i++) {
int x = r(width);
int y = r(height);
randomSeed(int(0.05*frameCount+r(15)));
for (int j=0;j<50; j++) {
set(x+j*20+r(width)-width/2,y+j*10,get(x,y,r(width/10),r(5)));
}
}
}
void getSetGlitch3() {
for (int i=0; i<10; i++) {
int x = r(width);
int y = r(height);
set(x+r(50)-1,y+r(3)-1,get(x,y,r(99),r(30)));
}
}
void getSetGlitch4() {
for (int i=0; i<width; i++) {
int x = r(width);
int y = r(height);
set(x+r(5)-2,y+r(5)-2,get(x,y,r(99),r(5)));
}
}
Here is some abridged code, if requested I can post the full length of code.
XML Code snippet:
PImage img;
void setup() {
img = loadImage(getFlickrImageUrlFromTag("american+apparel", "APIKEY"));
image(img, 0, 0);
size(img.width, img.height);
myGlitch = new GlitchObject();
frameRate(20);
}
String getFlickrImageUrlFromTag(String _tag, String _apiKey) {
int pageNumber = int(random(2000));
// build url
String rest = "http://api.flickr.com/services/rest/?method=flickr.photos.search";
rest += "&api_key=" + _apiKey;
rest += "&tags=" + _tag;
rest += "&per_page="+1;
rest += "&page="+ pageNumber;
rest += "&tag_mode=all&safe_search=3&sort=interestingness-desc";
// get payload
XMLElement xml = new XMLElement(this, rest);
println(xml);
// parse XML results
XMLElement a = xml.getChild(0).getChild(0);
println(a);
String fm = a.getStringAttribute("farm");
String sv = a.getStringAttribute("server");
String id = a.getStringAttribute("id");
String sc = a.getStringAttribute("secret");
// build http string
String url = "http://farm"+fm+".static.flickr.com/"+ sv + "/" + id + "_" + sc + "_b.jpg";
return url;
};
a few of the "glitch" functions that Im using that work in processing, but step beyond arraylength(imagesize) in p.js
void getSetGlitch1() {
for (int i=0; i<2; i++) {
int x = r(width);
int y = r(height);
randomSeed(int(0.03*frameCount*i/10+r(36)));
for (int j=0;j<random(10); j++) {
set(x+r(width/100),y+int(pow(j,2)),get(x,y,r(width),r(height/5)));
}
}
}
void getSetGlitch2() {
for (int i=0; i<10; i++) {
int x = r(width);
int y = r(height);
randomSeed(int(0.05*frameCount+r(15)));
for (int j=0;j<50; j++) {
set(x+j*20+r(width)-width/2,y+j*10,get(x,y,r(width/10),r(5)));
}
}
}
void getSetGlitch3() {
for (int i=0; i<10; i++) {
int x = r(width);
int y = r(height);
set(x+r(50)-1,y+r(3)-1,get(x,y,r(99),r(30)));
}
}
void getSetGlitch4() {
for (int i=0; i<width; i++) {
int x = r(width);
int y = r(height);
set(x+r(5)-2,y+r(5)-2,get(x,y,r(99),r(5)));
}
}
1