// Cloned by John McCormack on 27 Sep 2023 from World "P5 translate versus absolute position " by Starter user
// Please leave this clone trail here.
// 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
}
}