# Translate Processing sketch into P5 issue

**URL:** <https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344>\
**Category:** Coding Questions\
**Created:** [August 18, 2020, 10:20pm UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344 "2020-08-18T22:20:36Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)\
**Post date:** [August 18, 2020, 10:20pm UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/1 "2020-08-18T22:20:36Z")

</div>

HI, im trying to translate this processing sketch into P5, P5 is currently unable to give me an error that I can understand.  
below I posted the original processing sketch, and my wild guess on p5.

**P5:**

```auto
class CubeClass {

constructor (x, y, z, on, col1, col2, col3) {  

    this.x = xpos;
    this.y = ypos;
    this.z = zpos;
    this.col1 = colOne;
    this.col2 = colTwo;
    this.col3 = colTre;

}

update() {  

if(oN){
push();
translate(xpos,ypos,zpos);
beginShape(QUADS);
fill(colors[colOne]);
vertex(-d, -d, d);
vertex( d, -d, d);
vertex( d, d, d);
vertex(-d, d, d);
endShape();

// Back

beginShape(QUADS);
fill(colors[colTwo]);
vertex( d, -d, -d);
vertex(-d, -d, -d);
vertex(-d, d, -d);
vertex( d, d, -d);
endShape();

// Bottom

beginShape(QUADS);
fill(colors[colTre] );
vertex(-d, d, d);
vertex( d, d, d);
vertex( d, d, -d);
vertex(-d, d, -d);
endShape();

// Top

beginShape(QUADS);
fill(colors[colOne] );
vertex(-d, -d, -d);
vertex( d, -d, -d);
vertex( d, -d, d);
vertex(-d, -d, d);
endShape();

// Right

beginShape(QUADS);
fill(colors[colTwo]);
vertex( d, -d, d);
vertex( d, -d, -d);
vertex( d, d, -d);
vertex( d, d, d);
endShape();

// Left

beginShape(QUADS);
fill(colors[colTre]);
vertex(-d, -d, -d);
vertex(-d, -d, d);
vertex(-d, d, d);
vertex(-d, d, -d);
endShape();
pop();

}}}

var cube = new CubeClass(8)(8)(8);
var d = 12;
let c1 = color(255,255,0);
let c2 = color(0,255,255);
let c3 = color(255,0,255)
var rot1 = false;
var rot2 = false;
colors = [c1,c2,c3];
var iy = (0.6155185);
var ix = (-QUARTER_PI);
var iz = (PI/2);
function setup(){
createCanvas(400, 400, WEBGL);
genesi();
noStroke();
smooth(100);
//noSmooth();
}

function genesi(){
for (var x = 0; x < 8; x=x+1){
for (var y = 0; y < 8; y=y+1){
for (var z = 0; z < 8; z=z+1){
  
  //parseBoolean(var(random(0,1.4)))
cube[x][y][z] = new CubeClass(x*24,y*24,z*24, parseBoolean((random(0,1.4))), round(random(0,2) ) ,round(random(0,2)) ,round(random(0,2)) );
}}}
}

function draw(){
background(100);

if(rot1){
ix = ix + 0.01;
if(ix/PI >= 0.25){
rot1=false;
ix=QUARTER_PI;
}
}

if(rot2){
ix = ix - 0.01;
if(ix/PI <= -0.25){
rot2=false;
ix=-QUARTER_PI;
}
}

ortho(-width/2, width/2, -height/2, height/2); // Same as ortho()
translate(width/2, height/2);
rotateZ(iz);
rotateY(iy);
rotateX(ix);
translate(-3.5*24, -3.5*24, -3.5*24);

for (var x = 0; x < 8; x=x+1){  

for (var y = 0; y < 8; y=y+1){

for (var z = 0; z < 8; z=z+1){

 

cube[x][y][z].update();
 

}}}
}

function keyPressed(){
if (key == '1'){
rot1=true;
}

if (key == '2'){
rot2=true;
}

if (key == 'r'){
genesi();
}

}

```

**PROCESSING WORKING SOURCE**

```auto
CubeClass[][][] cube = new CubeClass[8][8][8];
float d = 12;
color c1 = color(255,255,0) ;
color c2 = color(0,255,255) ;
color c3 = color(255,0,255) ;
boolean rot1 = false;
boolean rot2 = false;
color[] colors = {c1, c2, c3};
float iy = (0.6155185);
float ix = (-QUARTER_PI);
float iz = (PI/2);
void setup(){
size(400, 400, P3D);
frameRate(60);
pixelDensity(displayDensity());
genesi();
noStroke();
smooth(100);
//noSmooth();
}

void genesi(){
for (int x = 0; x < 8; x=x+1){
for (int y = 0; y < 8; y=y+1){
for (int z = 0; z < 8; z=z+1){
  
  //parseBoolean(int(random(0,1.4)))
cube[x][y][z] = new CubeClass(x*24,y*24,z*24, parseBoolean(int(random(0,1.4))), int(random(0,3) ) ,int(random(0,3)) ,int(random(0,3)) );
}}}
}

void draw(){
background(100);

if(rot1){
ix = ix + 0.01;
if(ix/PI >= 0.25){
rot1=false;
ix=QUARTER_PI;
}
}

if(rot2){
ix = ix - 0.01;
if(ix/PI <= -0.25){
rot2=false;
ix=-QUARTER_PI;
}
}

ortho(-width/2, width/2, -height/2, height/2); // Same as ortho()
translate(width/2, height/2);
rotateZ(iz);
rotateY(iy);
rotateX(ix);
translate(-3.5*24, -3.5*24, -3.5*24);

for (int x = 0; x < 8; x=x+1){  

for (int y = 0; y < 8; y=y+1){

for (int z = 0; z < 8; z=z+1){

 

cube[x][y][z].update();
 

}}}

}

class CubeClass {
float ypos, xpos, zpos;
boolean oN;
int colOne;
int colTwo;
int colTre;

CubeClass (float x, float y, float z, boolean on, int col1, int col2, int col3) {  

ypos = y;
xpos = x;
zpos = z;
oN = on;
colOne = col1;
colTwo = col2;
colTre = col3;

}

void update() {  

if(oN){
pushMatrix();
translate(xpos,ypos,zpos);
beginShape(QUADS);
fill(colors[colOne]);
vertex(-d, -d, d);
vertex( d, -d, d);
vertex( d, d, d);
vertex(-d, d, d);
endShape();

// Back

beginShape(QUADS);
fill(colors[colTwo]);
vertex( d, -d, -d);
vertex(-d, -d, -d);
vertex(-d, d, -d);
vertex( d, d, -d);
endShape();

// Bottom

beginShape(QUADS);
fill(colors[colTre] );
vertex(-d, d, d);
vertex( d, d, d);
vertex( d, d, -d);
vertex(-d, d, -d);
endShape();

// Top

beginShape(QUADS);
fill(colors[colOne] );
vertex(-d, -d, -d);
vertex( d, -d, -d);
vertex( d, -d, d);
vertex(-d, -d, d);
endShape();

// Right

beginShape(QUADS);
fill(colors[colTwo]);
vertex( d, -d, d);
vertex( d, -d, -d);
vertex( d, d, -d);
vertex( d, d, d);
endShape();

// Left

beginShape(QUADS);
fill(colors[colTre]);
vertex(-d, -d, -d);
vertex(-d, -d, d);
vertex(-d, d, d);
vertex(-d, d, -d);
endShape();
popMatrix();

}}}

void keyPressed(){
if (key == '1'){
rot1=true;
}

if (key == '2'){
rot2=true;
}

if (key == 'r'){
genesi();
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 18, 2020, 11:53pm UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/2 "2020-08-18T23:53:06Z")

</div>

Hello,

Look at this error only:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fc3f71742e3434995c731dd887dabe5e35369077.png)  
The rest of the error message related to above is not correct; it does its best to try to help but sometimes it is just not right.  
In this case xpos (and all the others) are **not defined**.

Take a good look at the constructor in this example:  
[https://p5js.org/examples/objects-objects-2.html](https://p5js.org/examples/objects-objects-2.html)

And compare it to yours.  
It should be obvious what you did wrong.

On the p5.js site read:  
[https://p5js.org/learn/](https://p5js.org/learn/) \< See section on P5.js and Processing

There are a lot more issues with your code!

I suggest working through them one by one and looking at resources here:  
[https://p5js.org/](https://p5js.org/) Especially the Learn, References and Examples

Hints:

- P5 does not seem to like PI (or variations) outside of setup() or draw().
- [https://p5js.org/examples/color-color-variables.html](https://p5js.org/examples/color-color-variables.html) for your color varialbes.

`:)`

---

<div class="post-metadata">

**Author:** ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)\
**Post date:** [August 19, 2020, 12:04am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/3 "2020-08-19T00:04:27Z")

</div>

First of all thank you for your fast answer!  
I correct the class variable declaration, please wait till I understand all your feedback, in the middle time can’you tell me if this logic for class variable is now correct?  
By using P5 editor end Processing P5 editor, I do not get this error… how do you debug it\*?

Also I seen how declare color variables, the point is that I need them inside an array, to able to choose them randomly.

\*ok to debug Im using js browser consolle  
Thanks!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 19, 2020, 1:05am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/4 "2020-08-19T01:05:52Z")

</div>

> [@chanof](#):
>
> By using P5 editor end Processing P5 editor, I do not get this error… how do you debug it?

I usually use Processing P5 editor but also the P5 Editor for error messages; they behave differently.  
I prefer to print() to P5.js console.

Please DO NOT edit your original code that you posted to topic; you can restore it.  
People that visit will not see your progress and there will be no context for anyone visiting.  
Just post updated code as you progress… major updates and ask as required.  
Please correct this first.

`:)`

---

<div class="post-metadata">

**Author:** ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)\
**Post date:** [August 19, 2020, 1:13am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/5 "2020-08-19T01:13:36Z")

</div>

I corrected the variable’s declaration inside the class in this way:

```auto
class CubeClass {
constructor (x, y, z, on, col1, col2, col3) {  
    this.x = x;
    this.y = y;
    this.z = z;
    this.on = on;
    this.col1 = col1;
    this.col2 = col2;
    this.col3 = col3;
}

```

Since “this” seems avoid the variable alias

I corrected the PI variable outsides setup and draw with the value like that:

```auto
var ix = -(3.1415926535/4);
var iz = 3.1415926535/2;

```

Then the class array declaration seems to be so different, for 3 dimensional array to I have to declare it that way?

`let cube = [];`

into setup I feel it with all elements like that

```auto
for (let i = 0; i < 512; i++) {
    cube.push(new CubeClass());
  }

```

I really do not sure about, I do not already find a good example

My questions are: may ask for a try dimensional class array example, declaration, fill?  
And what’s wrong with my color variable management  
Thanks!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 19, 2020, 1:32am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/6 "2020-08-19T01:32:00Z")

</div>

For consideration:

```auto
let angle;
let c;

function setup()
  {
  angle = PI;
  c = color(100, 255, 0); 
 }

function draw()
  {
  print(angle);
  print(red(c), green(c), blue(c));
  }

```

I am learning as I go along as well…

`:)`

---

<div class="post-metadata">

**Author:** ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)\
**Post date:** [August 19, 2020, 1:37am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/7 "2020-08-19T01:37:44Z")

</div>

Like me, with your help too!  
With your correction the error about color’s variable into js consolle is fixed,  
I corrected it so:

```auto
let cube = [];
let colors = [];
let d;
let c1;
let c2;
let c3;
let rot1;
let rot2;
let iy;
let ix;
let iz;
function setup(){
d = 12;
rot1 = false;
rot2 = false;
c1 = color(255,255,0);
c2 = color(0,255,255);
c3 = color(255,0,255); 
colors = [c1,c2,c3];
iy = 0.6155185;
ix = -(PI/4);
iz = PI/2;

```

Now the consolle warnings about parseBoolean  
But I’m sure still there are errors on class management: filling, update method calling inside the draw…

**parseBoolean is replaced by:**

```auto
let rand;
  if (random(0,1.4) > 0.5){rand = true;}else{rand =false;}

```

so:

```auto
function genesi(){
for (var x = 0; x < 8; x=x+1){
for (var y = 0; y < 8; y=y+1){
for (var z = 0; z < 8; z=z+1){
let rand;
if (random(0,1.4) >= 0.5){rand = true;}else{rand =false;}

cube[x][y][z] = new CubeClass(x*24,y*24,z*24, rand, round(random(0,2) ) ,round(random(0,2)) ,round(random(0,2)) );
}}}
}

```

This should be one of the last issue: the cube class fill

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 19, 2020, 2:38am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/8 "2020-08-19T02:38:31Z")

</div>

I would consider a vector array.

I did not provide a plug and play example; you will have to study this and decide how to integrate it.

I used scale(10) because points are spaced 1 pixel but you can modify x, y, z directly when creating it in the array.

```auto
let vec = [];

function setup() 
  {
  createCanvas(400, 400, WEBGL);
  background(0);
  for (var x = 0; x < 8; x=x+1)
    {
    for (var y = 0; y < 8; y=y+1)
      {
      for (var z = 0; z < 8; z=z+1)
      {
      vec.push(createVector(x, y, z));
      }
    }
  } 

  scale(10, 10, 10);
  
  for (let i = 0; i < vec.length; i++) 
    { 
    stroke(255, 255, 0);
    point(vec[i].x, vec[i].y, vec[i].z); // plot point on canvas     
    } 
}

```

`:)`

---

<div class="post-metadata">

**Author:** ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)\
**Post date:** [August 19, 2020, 2:47am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/9 "2020-08-19T02:47:38Z")

</div>

thank you again, now I understand how much P5 is far from Processing 😃 This will require time to digest…

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 19, 2020, 2:59am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/10 "2020-08-19T02:59:55Z")

</div>

Once you get the hang of vectors they are easy to work with but there is a learning curve:  
[https://p5js.org/reference/#/p5/createVecto](https://p5js.org/reference/#/p5/createVecto)

`:)`

---

<div class="post-metadata">

**Author:** ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)\
**Post date:** [August 19, 2020, 3:23am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/11 "2020-08-19T03:23:29Z")

</div>

maybe I find a different way, please @glv may ask what you think about:  
By declaring an array

`let data = []`

I can feel it with all data to describes my cubes, the code above will generate 512 “data” records that describe each cube.  
It should work…

```auto
for (var x = 0; x < 8; x=x+1){
for (var y = 0; y < 8; y=y+1){
for (var z = 0; z < 8; z=z+1){
let rand;
if (random(0,1.4) >= 0.5){rand = true;}else{rand =false;}

data.push([x*24,y*24,z*24, rand, round(random(0,2)) ,round(random(0,2)) ,round(random(0,2))]);
print (data[0][3]); //here Cleary is filled correctly

  
}}}

for (let i = 0; i < 512; i++) {
    cube.push(new CubeClass(data[i][0],data[i][1],data[i][2],data[i][3],data[i][4],data[i][5],data[i][6]));
  }

```

---

<div class="post-metadata">

**Author:** ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)\
**Post date:** [August 19, 2020, 3:48am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/12 "2020-08-19T03:48:19Z")

</div>

```auto
class CubeClass {
constructor (x, y, z, ono, col1, col2, col3) {  
    this.x = x;
    this.y = y;
    this.z = z;
    this.ono = ono;
    this.col1 = col1;
    this.col2 = col2;
    this.col3 = col3;
}

update() {  

if(this.ono){
push();
translate(this.x,this.y,this.z);
beginShape(QUADS);
fill(colors[this.col1]);
vertex(-d, -d, d);
vertex( d, -d, d);
vertex( d, d, d);
vertex(-d, d, d);
endShape();

// Back

beginShape(QUADS);
fill(colors[this.col2]);
vertex( d, -d, -d);
vertex(-d, -d, -d);
vertex(-d, d, -d);
vertex( d, d, -d);
endShape();

// Bottom

beginShape(QUADS);
fill(colors[this.col3] );
vertex(-d, d, d);
vertex( d, d, d);
vertex( d, d, -d);
vertex(-d, d, -d);
endShape();

// Top

beginShape(QUADS);
fill(colors[this.col1] );
vertex(-d, -d, -d);
vertex( d, -d, -d);
vertex( d, -d, d);
vertex(-d, -d, d);
endShape();

// Right

beginShape(QUADS);
fill(colors[this.col2]);
vertex( d, -d, d);
vertex( d, -d, -d);
vertex( d, d, -d);
vertex( d, d, d);
endShape();

// Left

beginShape(QUADS);
fill(colors[this.col3]);
vertex(-d, -d, -d);
vertex(-d, -d, d);
vertex(-d, d, d);
vertex(-d, d, -d);
endShape();
pop();

}}}

let data = [];
let cube = [];
let colors = [];
let d;
let c1;
let c2;
let c3;
let rot1;
let rot2;
let iy;
let ix;
let iz;
function setup(){
d = 12;
rot1 = false;
rot2 = false;
c1 = color(255,255,0);
c2 = color(0,255,255);
c3 = color(255,0,255); 
colors = [c1,c2,c3];
iy = 0.6155185;
ix = -(PI/4);
iz = PI/2;
createCanvas(400, 400, WEBGL);

genesi();
noStroke();
smooth(100);
}

function genesi(){

for (var x = 0; x < 8; x=x+1){
for (var y = 0; y < 8; y=y+1){
for (var z = 0; z < 8; z=z+1){
let rand;
if (random(0,1.4) >= 0.5){rand = true;}else{rand =false;}

data.push([x*24,y*24,z*24, rand, round(random(0,2)) ,round(random(0,2)) ,round(random(0,2))]);
print (data[0][3]);

  //parseBoolean(var(random(0,1.4)))
// cube.push = new CubeClass(x*24,y*24,z*24, rand, round(random(0,2)) ,round(random(0,2)) ,round(random(0,2)) );
  
}}}

for (let i = 0; i < 512; i++) {
    cube.push(new CubeClass(data[i][0],data[i][1],data[i][2],data[i][3],data[i][4],data[i][5],data[i][6]));
  }
}

function draw(){
background(100);

if(rot1){
ix = ix + 0.01;
if(ix/PI >= 0.25){
rot1=false;
ix=QUARTER_PI;
}
}

if(rot2){
ix = ix - 0.01;
if(ix/PI <= -0.25){
rot2=false;
ix=-QUARTER_PI;
}
}

ortho(-width/2, width/2, -height/2, height/2); // Same as ortho()
translate(width/2, height/2);
rotateZ(iz);
rotateY(iy);
rotateX(ix);
translate(-3.5*24, -3.5*24, -3.5*24);

for (var z = 0; z < 512; z=z+1){
cube[z].update();
}
}

function keyPressed(){
if (key == '1'){
rot1=true;
}

if (key == '2'){
rot2=true;
}

if (key == 'r'){
genesi();
}}

```

> Error: sorry, quads not yet implemented in webgl mode.

I appreciate “sorry” …

It seems to be a recent issue : [GITHUB ISSUE](https://github.com/processing/p5.js/issues/4401)

---

<div class="post-metadata">

**Author:** ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)\
**Post date:** [August 19, 2020, 4:07am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/13 "2020-08-19T04:07:33Z")

</div>

Ok, without any attribute inside beginShape() it work, but is again not centered  
I did some trying nd error to center it, but I still do not understand the logic since translate do not works like processing.  
I need it clean centered to be sure that is rotate on his axis

```auto
class CubeClass {
constructor (x, y, z, ono, col1, col2, col3) {  
    this.x = x;
    this.y = y;
    this.z = z;
    this.ono = ono;
    this.col1 = col1;
    this.col2 = col2;
    this.col3 = col3;
}

update() {  

if(this.ono){
push();
translate(this.x,this.y,this.z);
beginShape();
fill(colors[this.col1]);
vertex(-d, -d, d);
vertex( d, -d, d);
vertex( d, d, d);
vertex(-d, d, d);
endShape();

// Back

beginShape();
fill(colors[this.col2]);
vertex( d, -d, -d);
vertex(-d, -d, -d);
vertex(-d, d, -d);
vertex( d, d, -d);
endShape();

// Bottom

beginShape();
fill(colors[this.col3] );
vertex(-d, d, d);
vertex( d, d, d);
vertex( d, d, -d);
vertex(-d, d, -d);
endShape();

// Top

beginShape();
fill(colors[this.col1] );
vertex(-d, -d, -d);
vertex( d, -d, -d);
vertex( d, -d, d);
vertex(-d, -d, d);
endShape();

// Right

beginShape();
fill(colors[this.col2]);
vertex( d, -d, d);
vertex( d, -d, -d);
vertex( d, d, -d);
vertex( d, d, d);
endShape();

// Left

beginShape();
fill(colors[this.col3]);
vertex(-d, -d, -d);
vertex(-d, -d, d);
vertex(-d, d, d);
vertex(-d, d, -d);
endShape();
pop();

}}}

let data = [];
let cube = [];
let colors = [];
let d;
let c1;
let c2;
let c3;
let rot1;
let rot2;
let iy;
let ix;
let iz;
function setup(){
d = 12;
rot1 = false;
rot2 = false;
c1 = color(255,255,0);
c2 = color(0,255,255);
c3 = color(255,0,255); 
colors = [c1,c2,c3];
iy = 0.6155185;
ix = -(PI/4);
iz = PI/2;
createCanvas(400, 400, WEBGL);
genesi();
noStroke();
smooth(100);
}

function genesi(){
data = [];
cube = [];
for (var x = 0; x < 8; x=x+1){
for (var y = 0; y < 8; y=y+1){
for (var z = 0; z < 8; z=z+1){
let rand;
if (random(0,1.4) >= 0.5){rand = true;}else{rand =false;}

data.push([x*24,y*24,z*24, rand, round(random(0,2)) ,round(random(0,2)) ,round(random(0,2))]);
print (data[0][3]);

  //parseBoolean(var(random(0,1.4)))
// cube.push = new CubeClass(x*24,y*24,z*24, rand, round(random(0,2)) ,round(random(0,2)) ,round(random(0,2)) );
  
}}}

for (let i = 0; i < 512; i++) {
    cube.push(new CubeClass(data[i][0],data[i][1],data[i][2],data[i][3],data[i][4],data[i][5],data[i][6]));
  }
}

function draw(){
background(100);

if(rot1){
ix = ix + 0.01;
if(ix/PI >= 0.25){
rot1=false;
ix=QUARTER_PI;
}
}

if(rot2){
ix = ix - 0.01;
if(ix/PI <= -0.25){
rot2=false;
ix=-QUARTER_PI;
}
}

ortho(-width/2, width/2, -height/2, height/2); // Same as ortho()
translate(-width/64, -height/64, height/3);
rotateZ(iz);
rotateY(iy);
rotateX(ix);
translate(-3.5*24, -3.5*24, -3.5*24);

for (var z = 0; z < 512; z=z+1){
cube[z].update();
}
}

function keyPressed(){
if (key == '1'){
rot1=true;
}

if (key == '2'){
rot2=true;
}

if (key == '3'){
genesi();
}}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 19, 2020, 4:59am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/14 "2020-08-19T04:59:00Z")

</div>

> [@chanof](#):
>
> , now I understand how much P5 is far from Processing 😃

If you wish, on the link below, you can find sketches having both Java Mode & p5.js versions: 😉  
[https://www.reddit.com/r/processing/comments/7dqqvh/openprocessing\_converting\_code\_written\_in\_java\_to/dq0ecac/](https://www.reddit.com/r/processing/comments/7dqqvh/openprocessing_converting_code_written_in_java_to/dq0ecac/)

---

<div class="post-metadata">

**Author:** ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)\
**Post date:** [August 19, 2020, 5:04am UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/15 "2020-08-19T05:04:37Z")

</div>

@GoToLoop thanks for useful suggestion! Luckily this topic is almost closed, I found with the help of @glv how to convert a Processing 3d array into P5 / JS, I need to understand better how to get the right position, without trying nd error since this prospective I need is truly math, so it should don’t need trying and error to place it the right place, but till now it’s hard to understand the logic for me

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 19, 2020, 3:40pm UTC](https://discourse.processing.org/t/translate-processing-sketch-into-p5-issue/23344/16 "2020-08-19T15:40:56Z")

</div>

> [@chanof](#):
>
> I need to understand better how to get the right position

I gave an example to try:  
[https://discourse.processing.org/t/get-the-vertical-axis-of-objects-array/23319/3](https://discourse.processing.org/t/get-the-vertical-axis-of-objects-array/23319/3)

Here is another one (move the mouse to center it):

> **Code**
>
> ```auto
> float theta = 0;
> 
> void setup() 
> {
> size(300, 300);
> }
> 
> void draw() 
> {
> background(0);
> translate(width/2, height/2);
>   
> noFill();
> circle(0, 0, 100);
> 
> theta += TAU/360;
>   
> int num = int(map(mouseX, 0, width, -200, 100)); //This comes in very handy!
> textSize(24);
> text(num, 70, 0);
> 
> rotate(theta);
> translate(num, 0); //This will translate it to center
>   
> stroke(255, 255, 0);
> strokeWeight(2);
> line(0, 0, 100, 0);  
> }
> 
> ```

Take a look at the tutorials:  
[2D Transformations / Processing.org](https://processing.org/tutorials/transform2d/) After that 3D.

And the other resources at the [Processing](https://processing.org/) site.

`:)`

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2b423bc3d1b04ea89726621c9f798d50e1214b98.png)