Ancient Brain

Worlds Minds Users Uploads JS code Search

Intro

Introduction Features

---

Definitions Principles The AI model

---

Teaching Register a class

Learn

Getting started P5 tutorial Three.js tutorial

---

Coding course Coding course II Coding for kids WebGL course AI exercises

Browse

Starter Worlds

---

Editor's Choice Showcase Worlds Multi-user Worlds Random Worlds

---

Advanced search

Docs

Docs API docs

Register

Register Forgot password

   Login

// Ancient Brain World to examine P5 "translate"
// 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


// 2D rect has position as argument:
// https://p5js.org/reference/#/p5/rect
// 3D box does not:
// https://p5js.org/reference/#/p5/box



// change these booleans back and forth to see:

const dotranslate = true;      // toggle between using translate or using "go to absolute position"
const dorotate = false;          // toggle rotate or not (can help see what is going on)



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)       // my own function to 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 )           // use "translate" position
     {
         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) not (100,100,100)
     }
     else                         // use "go to" absolute position 
     {
         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) 
        // get 3 cubes of width 50 just touching each other
    }
}