a lil p5.js API code ?

PeteAJ

This might be a tough one.(?) I found/played with some google image display code on openprocessing.. Then I tried to bring it online with processing.js but didn't work (it sees the file but won't load images), so I wanted to port it to p5.js.

This is the original code:

String searchTerm = "code";
int numofResults = 24;                


String[] imgUrls = new String[0];
String[] links = new String[0];
JSONArray results;
JSONObject response;
PImage img;
int i =0;
int t =0;


void setup(){
  size(320,240);
  links = img_urls(numofResults/4);      
  int t = second();
}


void draw(){

 if ( second() < t ) t = 0 ;         
 if (second() > t ){
   t = second();                     
   i++; 
   if (i > 23) {
     i = 0;
   }
   img = loadImage(links[i],"jpg");
   if (img != null ) image(img, 0, 0, width, height); 
   println(i);
   println(links[i]);                 
   }

}


String[] img_urls(int fours)
{
  String[] url = new String[fours];
  String[] links = new String[4*fours];

  for(int t=0; t<fours; t++){

        url[t] = "https:" + "//ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+searchTerm+ "&start="+(t*4)+"&as_filetype=jpg"+"&imgsz=medium"+"imgtype=clipart";

        response = loadJSONObject(url[t]);
        response = response.getJSONObject("responseData");
        results = response.getJSONArray("results");

        for (int i = 0; i < results.size(); i++) {
           JSONObject result = results.getJSONObject(i);
           int high = result.getInt("height");
          int wide = result.getInt("width");
          String linkstring = result.getString("unescapedUrl");
          links[(i+(4*t))] = linkstring; 
        }

      }   

   return links;
}

And I made the basic var and function changes below:

String searchTerm = "code";
var numofResults = 24;                


String[] imgUrls = new String[0];
String[] links = new String[0];
JSONArray results;
JSONObject response;
PImage img;
var i =0;
var t =0;


function setup(){
  size(320,240);
  links = img_urls(numofResults/4);      
  var t = second();
}


function draw(){

 if ( second() < t ) t = 0 ;         
 if (second() > t ){
   t = second();                     
   i++; 
   if (i > 23) {
     i = 0;
   }
   img = loadImage(links[i],"jpg");
   if (img != null ) image(img, 0, 0, width, height); 
   println(i);
   println(links[i]);                 
   }

}


String[] img_urls(int fours)
{
  String[] url = new String[fours];
  String[] links = new String[4*fours];

  for(var t=0; t<fours; t++){

        url[t] = "https:" + "//ajax.googleapis.com/ajax/services/search/images?v=1.0&q="+searchTerm+ "&start="+(t*4)+"&as_filetype=jpg"+"&imgsz=medium"+"imgtype=clipart";

        response = loadJSONObject(url[t]);
        response = response.getJSONObject("responseData");
        results = response.getJSONArray("results");

        for (var i = 0; i < results.size(); i++) {
           JSONObject result = results.getJSONObject(i);
          var high = result.getInt("height");
          var wide = result.getInt("width");
          String linkstring = result.getString("unescapedUrl");
          links[(i+(4*t))] = linkstring; 
        }

      }   

   return links;
}

Tried to sort it out...but not sure how to handle the String info. Might be a little out of my depth in general with JSON. If anyone had even a point in the right direction that'd be great.

Thanks

blindfish

Remember that p5 runs javascript directly. Since json is essentially just a structure based on JS object notation <(the clue is in the name) there should be no need to declare those odd looking jsonobject types you need when using java syntax. I don't have time to look at the code properly now, but I'd expect you can simplify things somewhat based on the above point...

GoToLoop

... so I wanted to port it to p5.js.

• As @blindfish called the attention, in order to use p5.js framework, the code needs to be written in JavaScript, not Java!
• Reason why we can't use pjs framework is b/c JSONObject wasn't implemented to it yet.
• Actually, pjs is still based on Processing 1. So we can't use new Processing 2's stuff on it.
• And as also mentioned, JS variables can store anything. No type declarations! O:-)
• Mostly just var. There are also const and let. But the latter 1s aren't necessary.

blindfish

You could perhaps create a separate JS tab in pjs to do the JSON handling, no? But that adds complexity so I'd recommend moving it to p5; particularly as JSON is so easy to use in JS....

PeteAJ

Thanks. Helpful info.. going to go think abt js/java differences and learn more about JSON

blindfish

Object notation is very flexible and makes Java based objects feel like hard work:

var foo = {
  prop1 : "someProperty",
  prop2 : 34.123,
  method1 : function() {
      console.info(foo.prop1);
  },
  method2 : function(input) {
      foo.method1();
      console.info(foo.prop2 + input);   
  }
}

foo.method2(6);
console.info("- - - - - - -");
foo.method2("6"); //oops!

Of course this flexibility does mean it is also far easier to get bitten by hard to find bugs :D