JSON2

Hva

Her skal vi ta vare på data som json, altså både lese og skrive til fil.

Begreper som du finner i dokumentasjonen til Processing Reference

loadJSONObject(), loadJSONArray(), saveJSONObject(), getJSONArray(), getJSONObject()
getInt(), getString()
Class

Relevante Skisser

jsonEks/jsonHusk

I dette eksempele ska vi se hvordan vi kan bruke JSON til å hente en beskrivelse av en tegning, endre tegningen interaktivt og lagre den nye versjonen som JSON. Vi skal kople et JSON-objekt til et objekt slik vi vanligvis beskriver objekter i Processing, en klasse.

Fila og resultatet

{"posisjoner": [
  {
    "r": 10,
    "x": 138,
    "y": 42,
    "farge": "0,0,250"
  },
  {
    "r": 10,
    "x": 139,
    "y": 104,
    "farge": "255,0,250"
  },
  {
    "r": 10,
    "x": 95,
    "y": 73,
    "farge": "0,255,250"
  },
  {
    "r": 10,
    "x": 185,
    "y": 69,
    "farge": "0,255,250"
  }
]}

Sketchen er slik:

/*
flytt og husk
leser og skriver json
*/
JSONObject layout;
JSONArray posisjoner;
ArrayList<Kule> kuler;
// den som flyttes
Kule aktiv;
String instruksjon="dra kulene med musa\n"+
       "trykk en tast for å spare posisjonene til fil";
 
void setup(){
    size(300,200);
    background(255);
    aktiv=null;
    
    // plukk opp json beskrivelsen og opprett kulelista
    layout = loadJSONObject("layout.json");
    posisjoner = layout.getJSONArray("posisjoner");
    kuler=new ArrayList<Kule>();
    // la kulene få et json-objekt hver
    for(int ix=0; ix < posisjoner.size(); ix++){
      kuler.add(new Kule(posisjoner.getJSONObject(ix)));
  }
}
void draw(){
  background(255);
  // instruksjoner
  fill(0);
  textAlign(CENTER,CENTER);
  text(instruksjon,width/2,height-20);
  // tegn kulene
  for(int ix=0; ix < kuler.size(); ix++)
    kuler.get(ix).tegn();
}
void saveLayout(){
  JSONArray posisjoner= new JSONArray();
  JSONObject pos=new JSONObject();
  for(int ix=0;ix < kuler.size();ix++)
    posisjoner.setJSONObject(ix,kuler.get(ix).getAsJson());
  pos.setJSONArray("posisjoner",posisjoner);
  saveJSONObject(pos,"data/layout.json");
}
void mousePressed(){
  for(int ix=0; ix < kuler.size(); ix++)
    if (kuler.get(ix).truffet()){
      print(ix);
      aktiv=kuler.get(ix);
      // bakerst så den tegne sist
      kuler.remove(ix);
      kuler.add(aktiv);
    }
}
void mouseDragged(){
  if(aktiv!=null)
    aktiv.flytt();
}
void mouseReleased(){
  aktiv=null;
}
// save
void keyPressed(){
  saveLayout();
}

og Kule-klassen konstrueres med et objekt fra JSON-fila. Dette JSON-objektet vedlikeholdes kontinuerlig når vi flytter et Kule-objekt med musa. Når vi trykker ned en tast blir den oppdaterte beskrivelsen lagt ut på fil. Neste gang vi åpner den er det den nye versjonen som gjelder.

/*
Klasse som beskriver en kule(sirkel)
En kule er laget fra et json-objekt
*/
class Kule{
  int xPos,yPos,radius;
  color farge;
  JSONObject obj;
  Kule(JSONObject obj){
    this.obj=obj;
    // plukk verdier fra jsonobjektet
    this.xPos=obj.getInt("x");
    this.yPos=obj.getInt("y");
    this.radius=obj.getInt("r");
    // decod de tre fargekomponentene
    String[] rgb=obj.getString("farge").split(",");
    farge=color(parseInt(rgb[0]),
               parseInt(rgb[1]),
               parseInt(rgb[2]));
  }
  
  void tegn(){
    fill(farge);
    ellipse(xPos,yPos,2*radius,2*radius);
  }
  
  JSONObject getAsJson(){
    return obj;
  }
  
  boolean truffet(){
    return dist(mouseX,mouseY,xPos,yPos) < radius;
  }
  
  void flytt(){
    // hold oss innefor sketchen
    xPos=max(radius,min(mouseX,width-radius));
    yPos=max(radius,min(mouseY,height-radius));
    obj.setInt("x",xPos);
    obj.setInt("y",yPos);
  }
}