Evolution.js:

var img;
var X;
var Y;
var noclipspeed = 20
var Z
var shp
var shpi
var speed
var freecam = false
var XR = 0
var YR = 0
var debug = true
function preload() {
town = loadImage('./assets/town.png');
BG = loadImage('./assets/BG.png');
X = random(-250,250)
Y = random(-250,250)
Z = 1
shop = loadImage('./assets/shop.png')
hax = loadImage('./assets/hax.png')
cursor(CROSS)
}


function setup() {
 createCanvas(1905,1065,WEBGL);
}


function draw() {
  rotateY(XR)
  rotateX(YR)
  cursor(CROSS)
  keyPressed()
  translate(0,0,10000)
  texture(hax)
  plane(10000,10000)
  translate(0,0,-10000)
  translate(0,0,-10000)
  texture(BG)
  plane(10000000,1000000)
  texture(town)
  translate(0,0,10000)
  translate(X-1000,Y-1000,Z)
  plane(950,567)
  translate(800,750)
  texture(shop)
  plane(100,100)
  if(freecam === false) {
  if (Z>577) {
  Z = 577
} else if (Z < -2600) {
  Z = -2600
} else if (Z === 0 ) {
 Z = 1
}
}
if (shpi === 1) {
Z = 577
X = -814.219833927416
Y = -751.7183831208923
}
if (noclipspeed < 10) {
noclipspeed = 10
}
}

function keyPressed() {
 if (keyIsDown(70)) {
   fullscreen(1)
} else if (keyIsDown(78)) {
   fullscreen(0)
} else if (keyIsDown(79)) {
    freecam = true
  } else if (keyIsDown(76)) {
    freecam = false
    XR = 0
    YR = 0
  } else if (keyIsDown(113)) {
saveCanvas("EvolutionTST","png")
}
 if (freecam === false) {
 XR = 0
 YR = 0
 if (keyIsDown(65)) {
    X+=10;
  } else if (keyIsDown(68)) {
    X-=10;
  } else if (keyIsDown(87)) {
    Y+=10;
  } else if (keyIsDown(83)) {
    Y-=10;
  } else if (keyIsDown(70)) {
   fullscreen(1)
  } else if (keyIsDown(78)) {
   fullscreen(0)
  }
} else {
 if (keyIsDown(65)) {
    X += noclipspeed
} else if (keyIsDown(68)) {
    X -= noclipspeed
} else if (keyIsDown(87)) {
    Z += noclipspeed
} else if (keyIsDown(83)) {
    Z -= noclipspeed
} else if (keyIsDown(32)) {
    Y += noclipspeed
} else if (keyIsDown(16)) {
    Y -= noclipspeed
} else if (keyIsDown(39)) {
    XR += 0.05
} else if (keyIsDown(37)) {
    XR -= 0.05
} else if (keyIsDown(38)) {
    YR -= 0.05
} else if (keyIsDown(40)) {
    YR += 0.05
} else if (keyIsDown(107)) {
    noclipspeed += 10
} else if (keyIsDown(109)) {
    noclipspeed -= 10
} 
}
}

function mouseWheel(event) {
   Z -= event.delta
}

I created a box out of planes. I'm trying to find a way to click on each plane (creating like a cube navigation).

How do i do it while using translate for location? Thanks

`let moveX; let moveY; let varx; let vary; let varinc;

function setup() { createCanvas(windowWidth, windowHeight, WEBGL);

}

function moveCube(){ moveX= map(mouseX, 0,width, 0,360); moveY= map(mouseY,0,height,0,360); rot(); thebox();

}

function rot(){ rotateX(-moveY * 0.01); rotateY(-moveX * 0.01); rotateZ(frameCount*0.007); }

function cubeNoise(){ varx = map(noise(varinc),0,1,-150,150); vary = map(noise(varinc),0,1,-150,150);

varinc+=0.003;

}

function draw() { background(250); orbitControl();

//cubeNoise(); push(); //translate(varx,vary); moveCube(); pop(); }

function thebox(){ fill(250,0,0);//red plane(250);

push();
translate(-125,0,-125);
rotateY(radians(90));
fill(0,250,0);//green
plane(250);
pop();

push();
translate(125,0,-125);
rotateY(radians(90));
fill(0,0,250);//blue
plane(250);
pop();

push();
translate(0,-125,-125);
rotateX(radians(90));
fill(200,50,200);//pink
plane(250);
pop();

push();
translate(0,-125,-125);
rotateX(radians(90));
fill(200,50,200);//pink
plane(250);
pop();

push(); translate(0,125,-125); rotateX(radians(90)); fill(150,150,150);//gray plane(250); pop();

push(); translate(0,0,-250);

fill(0);//gray
plane(250);
pop();

}

function screens{ var trx; var try; translate(-width/2, -height/2); for (var i = 0; i<9; i++){ push(); translate(

`

ten years ago i wrote an applet using P5 1.5.1 it runned perfectly and now it runs perfectly with Safari && osx but (since march 2017) does not run anymore with firefox >52 which does not allowany NPAPI plug in : java

So i decided to re- write it using processing.js it runs, yes; but awfully slow...

Therefore i decided to try with P5JS (first time i use it)

For my project i have to use 3D so: WEBGL

in this project i manage 1000 texts (GPU, offscreen); these texts are sentences, rather long, loaded from an external file (i put the file at the end of this post)

i have used for that the "solution" given by P5JS: createGraphics, create plane, use your graphics as texture...

result???

-- it is more quick (fps) than P5JS

but:

--a) i cannot see anyway to get the textAscent text Descent from my text and have to (vertical) center it approximatively

-- b) textWidth(myText) seems to work if i dont use loadFont()

--c) textWidth(my text) returns false values if i change the textSize(); returns exact values when using textSize(12)

--d) i have a class with my textObjects but if i want to "render" from my class i get strange results; so i have put the "rendering" in draw and it works. Why that ?

--e) setting the alpha value for background in the graphics works in a weird way: works at the beginning then not. Can texture accept alpha value?

below the code (of course you have to add some text for loadStrings()); mine is at the end of this post

                var font;
                var pg;
                var tableauTexte;
                var textesCharges;
                var tailleRass;
                var angle = 0;
                var nbre = 1;


                function preload(){
                  font = loadFont("Arial Unicode.ttf");
                  tableauTexte = new Array();
                  tableauTexte = loadStrings("rassuronsnous.txt");// that is the name for the file you can find at the end of the post

                }

                function setup() {

                   textesCharges = new Array();
                   textSize(24);
                 tailleRass = textWidth("RASSURONS_NOUS");

                 for(var i = 0; i<800; i++){// CREATING TEXToBJECTS && putting them in an array

                   var tx = random(tableauTexte);
                   var tw= null;
                   var ppgtext= null;
                   var to = null;
                   //textFont(font);does not work ; returns NaN for textWidth()
                   textSize(12);
                    tW = textWidth(tx);// returns a value but it is not exact (too big) if textSize is set to 14
                   ppgtext = createGraphics(tW,25);
                   ppgtext.background(0);
                   ppgtext.fill(255);
                   ppgtext.text(tx,0,(ppgtext.height/2)+2);
                   to = new TextObjects(random(-500,500), random(-350,350),random(-10,10), tx, random(-10,10),tW, ppgtext);
                   textesCharges.push(to);

                 }
                 createCanvas(1024,768,WEBGL);
                 background(0);
                 pg = createGraphics(tailleRass,30);

                 };


                function draw() {

                  background(0);

                 for(var i = 0; i<textesCharges.length; i++){
                   var t = textesCharges[i];
                  t.update();
                   //t.render();//does not work or in a weird way

                 }


                 for(var j= 0; j< nbre; j++){

                 push();

                 var X = textesCharges[j].renvoieX();
                 var Y = textesCharges[j].renvoieY();
                 var Z = textesCharges[j].renvoieZ();

                    translate(X,Y,Z);
                    var theta = textesCharges[j].renvoieAngle();
                    rotateZ(theta);
                    var textur = textesCharges[j].renvoie();
                    var tW = textesCharges[j].renvoieTW();
                    texture(textur);
                    plane(tW,30,1);

                    pop();

                 }


                  pg.background(0,0,0,10);// PARAM 4 WORKS IN A STRANGE WAY; useless
                  pg.noStroke();
                  pg.fill(255,0,0);
                  pg.textSize(24);
                  pg.text("RASSURONS_NOUS", 0,(pg.height/2)+6);// NO WAY TO CODE EXACTLY THE HEIGHT POS (textAscent() textDescent())

                    push();

                  translate(0,0,20);
                  texture(pg);
                  noFill();
                  plane(tailleRass,30,1);
                  pop();

                  if(nbre< textesCharges.length){
                    nbre++;
                  }
                  };

                  //////////////////////////////////////////////////TEXT OBJECTS CLASS


                function TextObjects(xx, yy, zz, ttxt, Aangle,tw,graphics){



                  this.posX = xx;
                  this.posY = yy;
                  this.posZ = zz;

                  this.position = createVector([this.posX],[this.posY],[this.posZ]);
                  this.txt = ttxt;
                  this.angle = Aangle;
                  this.textW = tw;
                  this.pgtext = graphics;


                }


                TextObjects.prototype.update = function () {//updating the angle rotation Z

                    this.angle = this.angle+0.0005;

                }

                TextObjects.prototype.renvoie = function () { //getter for graphics

                    return this.pgtext;
                    //console.log("je cree update" + this.angle);

                }

                TextObjects.prototype.renvoieTW = function () {//getter for textWidth()

                    return this.textW;


                }

                TextObjects.prototype.renvoieAngle = function () { //getter for angle
                  this.angle = this.angle+0.005;
                    return this.angle;


                }

                TextObjects.prototype.renvoieX = function () { //getter for xpos

                    return this.position.x;
                    //console.log("je cree update" + this.angle);

                }

                TextObjects.prototype.renvoieY = function () { //getter for ypos

                    return this.position.y;

                }

                TextObjects.prototype.renvoieZ = function () { //getter for zPos (those 3 can be made 1 with PVector)

                    return this.position.z;

                }

                TextObjects.prototype.render = function () {//does not work

                    push();



                    translate(this.position.x, this.position.y, this.position.z);
                    rotateZ(this.angle);

                     this.pgtext.textSize(12);
                  this.pgtext.background(0,0,0);
                  this.pgtext.noStroke();
                  this.pgtext.fill(255,255,255);
                  this.pgtext.text(this.txt, this.pgtext.width/20, (this.pgtext.height/2)+2);

                  texture(this.pgtext);
                  plane(this.tW,30,1);




                    pop();
                }

the text file:

une panne mondiale de l’électricité un ouragan monstrueux qui ravage les ¾ de la planète une cyber attaque généralisée contre les grandes places boursières le naufrage d’un supertanker sur les côtes de la Manche l’arrivée d’une soucoupe volante en provenance d’Orion l’explosion simultanée d’une douzaine de volcans en islande la paralysie de tout le transport aérien un tremblement de terre de force 12 sur l’échelle de Richter dont l’épicentre se situerait en basse normandie l’explosion d’une centrale nucléaire de modèle français EPR la fonte des glaces dans l’antartique la pénurie des ressources en pétrole et en gaz l’élection d’un nouvel Hitler à la tête des USA la brusque élévation du niveau des mers et des océans et la disparition du continent Australien l’écrasement sur New York d’une comète ou d’un astéroide de plusieurs millions de tonnes le Krash du système bancaire international l’apparition d’une forme mutante de la peste bubonique faisant 3 milliards de victimes la reconstruction du mur de Berlin et la restauration du système communiste dans l’Europe de l’Est l’élection de Ségolène royal à la présidence française la liquidation du nouveau numero 1 d’Al Qaida par un essaim de libellules drones la réhabilitation de Bernard Tapie le grand retour de DSK le givrage des sondes pitots l’invention d’un programme qui calcule tout il y a des choses qui n’arrivent jamais