// examining P5 "translate" (cumulative, relative position) versus absolute position

// "translate" is a bit odd:
// https://p5js.org/reference/#/p5/translate
// says: "Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. 
// For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0)."

// This World examines a way of doing absolute position rather than cumulative position


// change these boolean to toggle:

const dotranslate = true;      // toggle between using translate or goto
const dorotate = false;          // toggle rotate or not



const anglechange   = 0.01;     // how much the rotate angle changes each step 
var angle = 0;                  // rotate angle starts at 0  


 var img;

function preload() 
{
   img = loadImage ( '/uploads/starter/earth.1.jpg' );
}


function setup()         
{
  createCanvas ( ABWorld.fullwidth(), ABWorld.fullheight(),  WEBGL );
}




// keep track of current position 

var cx = 0;
var cy = 0;
var cz = 0;


function goto (x,y,z)       // go to absolute position 
{
    // current position/origin = cx,cy,cz
    
    // go back to (0,0,0)
    translate (-cx,-cy,-cz);
    
    // go to new location:
    translate (x,y,z);
    
    // store new location:
    cx = x;
    cy = y;
    cz = z; 
}


function draw()         
{
    background("lightgreen");    // background color 
    texture(img);        	

    if ( dorotate )
    {
        rotateX(angle);             // set each dimension rotation angle to "angle"
        rotateY(angle);
        rotateZ(angle);
        angle = angle + anglechange ;       // change angle each step to get rotate movement
    }
    
     if ( dotranslate )
     {
         translate(0,0,0);        
         box(50); 
         translate(50,50,50);       
         box(50); 
         translate(100,100,100);       
         box(50);  
         // because this is cumulative, the 3rd box is at (150,150,150) 
     }
     else 
     {
        // go to absolute position in (x,y,z) 3D space
        // to show 3 cubes of width 50 just touching each other
         goto(0,0,0);        
         box(50); 
         goto(50,50,50);       
         box(50); 
         goto(100,100,100);       
         box(50);  
         // because this is absolute, the 3rd box is at (100,100,100) 
    }
}