loading image from flickr query into draw( )

herringblue

Why doesn't the image from the flickr query get displayed in draw( )?

var api = "https://" + "api.flickr.com/services/rest/?method=flickr.photos.search";
var apiKey = "&api_key=a0dd883dc062aadeaec4addb5211da7f";

var tag = "planet"

var query = "&per_page=500&tags=" + tag + "&is_commons=true&format=json&nojsoncallback=1";

var i = 14;

var imgurl;
var img;

function preload() {
 var url = api + apiKey + query;

 loadJSON(url, gotData);


}

function setup() {
 createCanvas(300, 300);
 pixelDensity(1);


}

function gotData(data, imgurl) {

 var farmid = data.photos.photo[i].farm;
 var serverid = data.photos.photo[i].server;
 var id = data.photos.photo[i].id;
 var secret = data.photos.photo[i].secret;

 imgurl = "farm" + farmid + ".staticflickr.com/" + serverid + "/" + id + "_" + secret + ".jpg";

}

function draw() {
img = createImage(imgurl);
image(img,0,0);

}

GoToLoop

It's loadImage(), not createImage()! [-X
http://p5js.org/reference/#/p5/loadImage

Also, favor loading all resources before draw() ever starts! :-\"

herringblue

loadImage() gives me this error though:

20316: Uncaught TypeError: Cannot read property 'indexOf' of undefined

blindfish

And where are you calling loadImage? In preload() as per the docs?

GoToLoop

• @blindfish, he needs to loadJSON() before loadImage().
• loadJSON() can stay in preload().
• But loadImage() needs to move to setup(), passing a callback too.
• Therefore in draw(), he's gonna need to check for img before image():
  img && image(img, 0, 0);

blindfish

@GoToLoop: I take your point - I only scanned the code quickly :\">

@herringblue: the point is that you can't use a reference to the image until it is fully loaded; which is what preload is intended to take care of; but of course (and I'd missed this) you're waiting for the image URL before you can load it...

You can of course follow GoToLoop's advice - which is sound - but you could also try calling loadImage direct from your gotData callback function: that might allow you to chain the ajax requests inside of preload and avoid the need for the additional condition. Pure supposition on my part though: untested and I haven't looked at the internals of preload...