Sketch conversion Processing to p5.js

p5.js Beginners
1

Hi everyone,

My apologies if my message may no respect some of the rules of the community, this is my first one. I’ll try to do my best !

I’m trying to convert the following processing sketch to p5.js, I think I managed it, however, the animation won’t work. The thing is there is not error message in the sketch, so I don’t understand what is wrong…

here is the sketch :

var Nmax ; 
var noiseMax;

var M ; 

var H ; 
var HH ;

var X = []; 
var Y = []; 
var Z  = [];

var V  = [];
var dV  = [];

var L ; 
var R  ;
var Lmin ; 
var N ; 
var NN ; 

var KX ; 
var KY ; 
var KZ ; 
var KV ; 
var KdV ; 
var K ;


//dégradé de couleur
var c ;
var s ;


function setup(){
  
 createCanvas(600,600) ;
  background(0,0,0) ;

  noSmooth() ;
stroke(0,200,200) ;
strokeWeight(1);


	
Nmax = 1200 ; 
noiseMax = 0.6;

M = 50 ; 

H = 0.99 ; 
HH = 0.01 ;

X = new Array(Nmax+1) ; 
Y = new Array(Nmax+1)  ; 
Z = new Array(Nmax+1)  ;

V = new Array(Nmax+1)  ; 
dV = new Array(Nmax+1)  ;
  console.log(X)
	
	
	for ( N = 0 ; N <= Nmax ; N++ ){
    X[N] = random(-30,30);
    Y[N] =  random(-30,30); 
    Z[N] = random(-30,30);
		
		noise(X[N] ,Y[N] ,Z[N] );
  }
  
} // setup()

function draw(){
 
  background(0,0,0,15) ;
  translate(width/2,height/2);

	Nmax = 1200 ; 
noiseMax = 0.6;

M = 50 ; 

H = 0.99 ; 
HH = 0.01 ;

X = new Array(Nmax+1)  ; 
Y = new Array(Nmax+1)  ; 
Z = new Array(Nmax+1)  ;

V = new Array(Nmax+1)  ; 
dV = new Array(Nmax+1) ; 
	
R = 2*sqrt( (  4*PI*(200*200)/Nmax)   /  (2*sqrt(3)  ) ) ;
	
c = cos(frameCount * 0.05)*8;
s = sin(frameCount * 0.05)*8;
	
	strokeWeight(map(noise(0.1), 0, 1, 0.5,2));
  for ( N = 0 ; N <= Nmax ; N++ ){
     for ( NN = N+1 ; NN <= Nmax ; NN++ ){
        L = sqrt(  ((X[N]-X[NN])*(X[N]-X[NN]))   +  ((Y[N]-Y[NN])*(Y[N]-Y[NN]))  ) ;
        L = sqrt(((Z[N]-Z[NN])*(Z[N]-Z[NN]))+(L*L)) ;
        if ( L < R ){
          X[N] = X[N] - ((X[NN]-X[N])*((R-L)/(2*L))) ;
          Y[N] = Y[N] - ((Y[NN]-Y[N])*((R-L)/(2*L))) ;
          Z[N] = Z[N] - ((Z[NN]-Z[N])*((R-L)/(2*L))) ;
          X[NN] = X[NN] + ((X[NN]-X[N])*((R-L)/(2*L))) ;
          Y[NN] = Y[NN] + ((Y[NN]-Y[N])*((R-L)/(2*L))) ;
          Z[NN] = Z[NN] + ((Z[NN]-Z[N])*((R-L)/(2*L))) ;
          dV[N] = dV[N] + ((V[NN]-V[N])/M) ;
          dV[NN] = dV[NN] - ((V[NN]-V[N])/M) ;
         
					
					stroke(0,200,200) ;     
          
                    line(X[N]*1.2*(200+V[N])/200,Y[N]*1.2*(200+V[N])/200,X[NN]*1.2*(200+V[NN])/200,Y[NN]*1.2*(200+V[NN])/200) ; 
        }
        if ( Z[N] > Z[NN] ){
          KX = X[N] ; KY = Y[N] ; KZ = Z[N] ; KV = V[N] ; KdV = dV[N] ; 
          X[N] = X[NN] ; Y[N] = Y[NN] ; Z[N] = Z[NN] ; V[N] = V[NN] ; dV[N] = dV[NN] ;  
          X[NN] = KX ; Y[NN] = KY ; Z[NN] = KZ ; V[NN] = KV ; dV[NN] = KdV ; 
        }
     }
     L = sqrt((X[N]*X[N])+(Y[N]*Y[N])) ;
     L = sqrt((Z[N]*Z[N])+(L*L)) ;
     X[N] = X[N] + (X[N]*(200-L)/(2*L)) ;
     Y[N] = Y[N] + (Y[N]*(200-L)/(2*L)) ;
     Z[N] = Z[N] + (Z[N]*(200-L)/(2*L)) ;
     KZ = Z[N] ; KX = X[N] ;
     Z[N] = (KZ*cos(float(300-mouseX)/10000))-(KX*sin(float(300-mouseX)/10000)) ;
     X[N] = (KZ*sin(float(300-mouseX)/10000))+(KX*cos(float(300-mouseX)/10000)) ;
     KZ = Z[N] ; KY = Y[N] ;
     Z[N] = (KZ*cos(float(300-mouseY)/10000))-(KY*sin(float(300-mouseY)/10000)) ;
     Y[N] = (KZ*sin(float(300-mouseY)/10000))+(KY*cos(float(300-mouseY)/10000)) ;
     dV[N] = dV[N] - (V[N]*HH) ; 
     V[N] = V[N] + dV[N] ; dV[N] = dV[N] * H ;
  }
    
} // draw() 

function mousePressed(){
  
	
	
	
	Nmax = 1200 ; 
noiseMax = 0.6;

M = 50 ; 

H = 0.99 ; 
HH = 0.01 ;

X = new Array(Nmax+1)  ; 
Y = new Array(Nmax+1)  ; 
Z= new Array(Nmax+1)  ;

V = new Array(Nmax+1)  ; 
dV = new Array(Nmax+1) ; 
	
R = 2*sqrt(   (  4*PI*(200*200)/Nmax)   /  (2*sqrt(3)  )   ) ;
	
	
  Lmin = 60 ; NN = 0 ;
  for ( N = 0 ; N <= Nmax ; N++ ){
		
		
		
		
		
     
     if ( Z[N] > 0 && L < Lmin ){ NN = N ; Lmin = L ; }
  }
if ( K == 0 ){ dV[NN] = map(noise(NN), 0, 1, -100,0);  K = 1 ; }
           else{ dV[NN] = map(noise(NN), 0, 1, 0,100);  K = 1 ; } 
    
    
    
     
} // mousePressed()

The original one can be found here WavesOnSphere_1.0 - OpenProcessing

Thank you for your time and your help !

Best regards

1 Like
2

I don’t have time to look into this but apparently you V[] array isn’t defined

console.log gives you NaN

when define V some lines are drawn.

please check how to define V[] array

// noprotect

var Nmax;
var noiseMax;

var M;

var H;
var HH;

var X = [];
var Y = [];
var Z = [];

var V = [];
var dV = [];

var L;
var R;
var Lmin;
var N;
var NN;

var KX;
var KY;
var KZ;
var KV;
var KdV;
var K;

//dégradé de couleur
var c;
var s;

function setup() {
  createCanvas(600, 600);
  background(0, 0, 0);

  noSmooth();
  stroke(0, 200, 200);
  strokeWeight(1);

  Nmax = 12;
  noiseMax = 0.6;

  M = 50;

  H = 0.99;
  HH = 0.01;

  X = new Array(Nmax + 1);
  Y = new Array(Nmax + 1);
  Z = new Array(Nmax + 1);

  V = new Array(Nmax + 1);
  dV = new Array(Nmax + 1);
 // console.log(X);

  for (N = 0; N <= Nmax; N++) {
    X[N] = random(-30, 30);
    Y[N] = random(-30, 30);
    Z[N] = random(-30, 30);

    noise(X[N], Y[N], Z[N]);
  }
} // setup()

function draw() {
  background(0, 0, 0, 15);
  translate(width / 2, height / 2);

 // Nmax = 1200;
  noiseMax = 0.6;

  M = 50;

  H = 0.99;
  HH = 0.01;

  // X = new Array(Nmax + 1);
  // Y = new Array(Nmax + 1);
  //  Z = new Array(Nmax + 1);

  V = new Array(Nmax + 1);
  dV = new Array(Nmax + 1);

  R = 2 * sqrt((4 * PI * (200 * 200)) / Nmax / (2 * sqrt(3)));

  c = cos(frameCount * 0.05) * 8;
  s = sin(frameCount * 0.05) * 8;

  //rokeWeight(map(noise(0.1), 0, 1, 0.5, 2));
  for (N = 0; N <= Nmax - 1; N++) {
    for (NN = N + 1; NN <= Nmax; NN++) {
      L = sqrt(
        (X[N] - X[NN]) * (X[N] - X[NN]) + (Y[N] - Y[NN]) * (Y[N] - Y[NN])
      );
      L = sqrt((Z[N] - Z[NN]) * (Z[N] - Z[NN]) + L * L);
      if (L < R) {
        X[N] = X[N] - (X[NN] - X[N]) * ((R - L) / (2 * L));
        Y[N] = Y[N] - (Y[NN] - Y[N]) * ((R - L) / (2 * L));
        Z[N] = Z[N] - (Z[NN] - Z[N]) * ((R - L) / (2 * L));
        X[NN] = X[NN] + (X[NN] - X[N]) * ((R - L) / (2 * L));
        Y[NN] = Y[NN] + (Y[NN] - Y[N]) * ((R - L) / (2 * L));
        Z[NN] = Z[NN] + (Z[NN] - Z[N]) * ((R - L) / (2 * L));
        dV[N] = dV[N] + (V[NN] - V[N]) / M;
        dV[NN] = dV[NN] - (V[NN] - V[N]) / M;

        stroke(0, 200, 200);
        line(111, 222, 200, 200);
        console.log((X[N] * 1.2 * (200 + V[N])) / 200);
        console.log( X[N] );
V[N]=7; //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
V[NN]=7; 
        line(
          (X[N] * 1.2 * (200 + V[N])) / 2,
          (Y[N] * 1.2 * (200 + V[N])) / 2,
          (X[NN] * 1.2 * (200 + V[NN])) / 2,
          (Y[NN] * 1.2 * (200 + V[NN])) / 2
        );
      }
      if (Z[N] > Z[NN]) {
        KX = X[N];
        KY = Y[N];
        KZ = Z[N];
        KV = V[N];
        KdV = dV[N];
        X[N] = X[NN];
        Y[N] = Y[NN];
        Z[N] = Z[NN];
        V[N] = V[NN];
        dV[N] = dV[NN];
        X[NN] = KX;
        Y[NN] = KY;
        Z[NN] = KZ;
        V[NN] = KV;
        dV[NN] = KdV;
      }
    }
    L = sqrt(X[N] * X[N] + Y[N] * Y[N]);
    L = sqrt(Z[N] * Z[N] + L * L);
    X[N] = X[N] + (X[N] * (200 - L)) / (2 * L);
    Y[N] = Y[N] + (Y[N] * (200 - L)) / (2 * L);
    Z[N] = Z[N] + (Z[N] * (200 - L)) / (2 * L);
    KZ = Z[N];
    KX = X[N];
    Z[N] =
      KZ * cos(float(300 - mouseX) / 10000) -
      KX * sin(float(300 - mouseX) / 10000);
    X[N] =
      KZ * sin(float(300 - mouseX) / 10000) +
      KX * cos(float(300 - mouseX) / 10000);
    KZ = Z[N];
    KY = Y[N];
    Z[N] =
      KZ * cos(float(300 - mouseY) / 10000) -
      KY * sin(float(300 - mouseY) / 10000);
    Y[N] =
      KZ * sin(float(300 - mouseY) / 10000) +
      KY * cos(float(300 - mouseY) / 10000);
    dV[N] = dV[N] - V[N] * HH;
    V[N] = V[N] + dV[N];
    dV[N] = dV[N] * H;
  }
} // draw()

function mousePressed() {
  Nmax = 12;
  noiseMax = 0.6;

  M = 50;

  H = 0.99;
  HH = 0.01;

  X = new Array(Nmax + 1);
  Y = new Array(Nmax + 1);
  Z = new Array(Nmax + 1);

  V = new Array(Nmax + 1);
  dV = new Array(Nmax + 1);

  R = 2 * sqrt((4 * PI * (200 * 200)) / Nmax / (2 * sqrt(3)));

  Lmin = 60;
  NN = 0;
  for (N = 0; N <= Nmax; N++) {
    if (Z[N] > 0 && L < Lmin) {
      NN = N;
      Lmin = L;
    }
  }
  if (K == 0) {
    dV[NN] = map(noise(NN), 0, 1, -100, 0);
    K = 1;
  } else {
    dV[NN] = map(noise(NN), 0, 1, 0, 100);
    K = 1;
  }
} // mousePressed()
1 Like
3

Thank you for you answer.
I knew there was something wrong about arrays. I first thought I declared wrong the variables array, but now,I can see, indeed, the V[] is not defined.
However I don’t understand why the Processing code would work and not the p5.js version.

I am trying to figure it out how this code works, but I have to admit it is quite complex

4

You have to check V in the original code and how V is filled there (you converted that wrongly I guess)

One reason could be that processing might fill the array automatically with 0’s / zeros and p5 does not (remark: when processing indeed would work with zeros for the entire V[] array, the code wouldn’t work either)

5

Not “might fill” but “fills”.

Java variables & arrays have default values for their datatypes:

In short Java numerical types default to 0, booleans to false and everything else to null.

On the other hand, JavaScript defaults to undefined for almost everything.

However, some JS containers such as typed-arrays is filled w/ 0:

1 Like