# Sketch conversion Processing to p5.js

**URL:** <https://discourse.processing.org/t/sketch-conversion-processing-to-p5-js/35037>\
**Category:** Beginners\
**Created:** [February 8, 2022, 9:54am UTC](https://discourse.processing.org/t/sketch-conversion-processing-to-p5-js/35037 "2022-02-08T09:54:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![CoPiQuMi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/copiqumi/32/5163_2.png) [@CoPiQuMi](https://discourse.processing.org/u/CoPiQuMi)\
**Post date:** [February 8, 2022, 9:54am UTC](https://discourse.processing.org/t/sketch-conversion-processing-to-p5-js/35037/1 "2022-02-08T09:54:25Z")

</div>

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 :

```auto
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](https://openprocessing.org/sketch/402629)

Thank you for your time and your help !

Best regards

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 8, 2022, 11:17am UTC](https://discourse.processing.org/t/sketch-conversion-processing-to-p5-js/35037/2 "2022-02-08T11:17:45Z")

</div>

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

```auto
// 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()
  

```

---

<div class="post-metadata">

**Author:** ![CoPiQuMi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/copiqumi/32/5163_2.png) [@CoPiQuMi](https://discourse.processing.org/u/CoPiQuMi)\
**Post date:** [February 8, 2022, 12:13pm UTC](https://discourse.processing.org/t/sketch-conversion-processing-to-p5-js/35037/3 "2022-02-08T12:13:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 8, 2022, 1:32pm UTC](https://discourse.processing.org/t/sketch-conversion-processing-to-p5-js/35037/4 "2022-02-08T13:32:21Z")

</div>

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)

---

<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:** [February 8, 2022, 4:58pm UTC](https://discourse.processing.org/t/sketch-conversion-processing-to-p5-js/35037/5 "2022-02-08T16:58:23Z")

</div>

> [@Chrisir](#):
>
> … Processing might fill the array automatically with 0’s / zeros and p5 does not.

Not “might fill” but “fills”.

Java variables & arrays have default values for their datatypes:

> **[Primitive Data Types (The Java™ Tutorials \>        
            Learning...](https://docs.oracle.com/javase/tutorial/java/nutsandbolts/datatypes.html)**
>
> This beginner Java tutorial describes fundamentals of programming in the Java programming language

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`:

> **[JavaScript typed arrays - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Typed_arrays)**
>
> JavaScript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers.