loading image from flickr query into draw( )

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);

}

Answers

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

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

  • loadImage() gives me this error though:

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

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

  • edited May 2016
    • @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);
  • @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...

Sign In or Register to comment.