var blob;

       /*
        // sample example
    var sampletoon = {
       "name":"Boris",
       "r":200,
       "g":160,
       "b":200,
       "head": 60,
       "torso": 33,
       "posX":50,
       "posY":90,
       "moveX":[5,-3,4,-6,-3,3,4,-2],
       "moveY":[2,4,4,6,-3,3,4,-2]
        }
        */


 var sx = 0;
 var sy = 0;


function preload() {
  blob = loadJSON("blob.json");
}

function setup() {
   createCanvas(400,400);
   background(0);
    rectMode(CENTER);

     // this shows the whole blob json data package
   console.log(blob);
   noStroke();

}



function draw() {
  background(0);

  updateToon(blob.toons[0]);  // Car 1
  updateToon(blob.toons[1]);  // Car 2
  updateToon(blob.toons[2]);  // Car 3

}



function updateToon(obj) {

      push();

      if ( int(random(1000)) > 995) {
       obj.nextX = int(random(obj.moveX.length));
       obj.nextY = int(random(obj.moveY.length));
      }

      obj.posX += obj.moveX[obj.nextX];
      obj.posY += obj.moveY[obj.nextY];


      // console.log(obj.posX);

       if (obj.posX > width) {
         obj.posX = 0;
       }

       if (obj.posX < 0) {
         obj.posX = width;
       }

       if (obj.posY > height) {
         obj.posY = 0;
       }

       if (obj.posY < 0) {
         obj.posY = height;
       }

       drawToon(obj);

      pop();


}



function drawToon( obj) {

    //  console.log(obj.posX[s]);

  push();
        translate(obj.posX , obj.posY);
        //wheels
        fill(obj.r2,obj.g2,obj.b2);
        ellipse(-27,45,obj.wheels,obj.wheels);
        ellipse(27,45,obj.wheels,obj.wheels);

        ellipse(-55,45,obj.wheels2,obj.wheels2);
        ellipse(55,45,obj.wheels2,obj.wheels2);
         // car body
        fill(obj.r,obj.g,obj.b);
        rect(0,20,obj.body,obj.body2);
        rect(0,-10,obj.body/1.5, obj.body2/2)
        // windows
        fill(0);
        rect(-15,-7,25,15);
        rect(15,-7,25,15);
        //torso
        fill(255);
        textSize(20);
        text(obj.name,-20,-30);

        fill(obj.r2, obj.g2, obj.b2);
        textSize(30);
        text(obj.logo,-45,30);

        fill(obj.r2, obj.g2, obj.b2);
        textSize(30);
        text(obj.logo2,-25,30);

    pop();

}