Translate Processing sketch into P5 issue

chanof · August 18, 2020, 10:20pm

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:

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

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();
}

glv · August 18, 2020, 11:53pm

Hello,

Look at this error only:

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

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

On the p5.js site read:
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/ 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 for your color varialbes.

:)

chanof · August 19, 2020, 12:04am

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!

glv · August 19, 2020, 1:05am

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.

:)

chanof · August 19, 2020, 1:13am

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

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:

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

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!

glv · August 19, 2020, 1:32am

For consideration:

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…

:)

chanof · August 19, 2020, 1:37am

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

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:

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

so:

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

glv · August 19, 2020, 2:38am

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.

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     
    } 
}

:)

chanof · August 19, 2020, 2:47am

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

glv · August 19, 2020, 2:59am

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

:)

chanof · August 19, 2020, 3:23am

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…

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]));
  }

chanof · August 19, 2020, 3:48am

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

chanof · August 19, 2020, 4:07am

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

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();
}}

GoToLoop · August 19, 2020, 4:59am

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/

chanof · August 19, 2020, 5:04am

@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

glv · August 19, 2020, 3:40pm

I gave an example to try:
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

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 After that 3D.

And the other resources at the Processing site.

:)

Topic		Replies	Views
Convert processing Sketch to p5.js Coding Questions	1	455	June 15, 2021
Translating sketch from P5 to Java Coding Questions	2	423	May 9, 2019
Troubleshooting converting from .pde to p5 sketch Coding Questions	2	443	April 25, 2021
Processing to p5.js sketch Coding Questions	1	402	November 15, 2020
Sketch conversion Processing to p5.js Beginners	4	584	February 8, 2022

Translate Processing sketch into P5 issue

Related topics