›

from processing to p5.js (conversion issue)

faonfaon
edited January 2016 in p5.js

Hello, I'm trying to convert this code from processing on p5.js :

// *** Physical Map Generator (phmg_a2x1) by Atoro 
// *** Maps should look realistic with distinguishable geographic features, 
// *** such as mountains, valleys, lakes, seas, bays, peninsulas, etc.
// *** Whenever the keyboard button is pressed, the new map is generating.
color[] cp = {
  color(0, 126, 192), 
  color(24, 154, 208), 
  color(58, 168, 214), 
  color(94, 186, 220), 
  color(128, 199, 228), 
  color(163, 216, 235), 
  color(197, 229, 243), 
  color(232, 244, 250), 
  color(135, 209, 63), 
  color(203, 227, 107), 
  color(255, 227, 153), 
  color(255, 205, 127), 
  color(234, 136, 70), 
  color(209, 104, 47), 
  color(187, 76, 15), 
  color(148, 56, 0)
}; 
void setup() {
  size(1024, 768);
}
void draw() {
  noiseSeed(int(random(10000000))); 
  loadPixels(); 
  float d0 = random(100, 200);   
  float d1 = random(25, 75); 
  for (int j = 0; j < height; j++) {
    for (int i = 0; i < width; i++) {
      float n0 = noise(i/d0, j/d0, 0); 
      float n1 = noise(i/d1, j/d1, 10); 
      float n = 1 - (n0*0.75 + n1*0.25); 
      int k = int(n*cp.length); 
      pixels[j*width + i] = cp[k];
    }
  } 
  updatePixels();
  noLoop();
  // save("maps/Map_a2x1_ID" + int(random(10000000)) + ".png");
}
void keyPressed() {
  loop();
}

I wrote this :

var col = [],a,b,c,n0,n1,d0,d1,n,k ;


function preload() {
  background = loadImage("test.jpg");
}
function setup() {
  createCanvas(windowWidth, windowHeight);
  image(background, 0, 0,windowWidth,windowHeight);
  colorMode(RGB);
   alf = 128;
col [color(255,255,255,alf), color(197,193,185,alf),color(151,158,163,alf),color(87,103,116,alf),color(233,227,208,alf),color(200,170,111,alf),color(143,127,70,alf),color(86,95,37,200),color(47,66,16,200),color(8,8,56,200),color(255,255,255,0)];

  a=0;
  b=0;
}


function draw() {
   
 noiseSeed(int(random(10000000))); 
  loadPixels(); 
  d0 = random(100, 200);   
 d1 = random(25, 75); 
  for ( a = 0; b < height; b++) {
    for ( a = 0; a < width; b++) {
      n0 = noise(a/d0, b/d0, 0); 
      n1 = noise(a/d1, b/d1, 10); 
      n = 1 - (n0*0.75 + n1*0.25); 
      k = n*col.length; 
      pixels[b*width + a] = col[k];
    }
  } 
  updatePixels();
  noLoop();
  
}

The console shows nothing wrong but when I run the program, the window is frozen on the "loading" page and I have to force my computer to end the p5.js application.

Could you explain me why ?

I'm not a great programmer but I need to use this small part of code from processing in a bigger program that is in p5.js.

Thank you for your help

Tagged:

Answers

  • GoToLoopGoToLoop
    edited January 2016

    Dunno why you didn't use PDE's "JavaScript Mode" in order to transpile your "Java Mode" to JS. :-/

    Anyways, in order to debug code inside a browser, hit F12 and check for any errors in the console tab.
    There are many inconsistencies between your "Java Mode" & "p5.js" sketches:

    1. Java got 1 global variable. JS got lotsa 'em.
    2. Java's setup() is 1 statement. JS's setup() is ginormous!
    3. In Java you specify 1024 x 768 for resolution. For JS it is windowWidth x windowHeight instead.
    4. No image() nor loadImage() in Java. Why are you complicating your conversion to JS?
    5. Also no colorMode() in Java. Why are you using it in p5.js?
    6. You've got keyPressed() in Java. But not the same in JS!
    7. You've also failed to realize that pixels[] is much more complicated in p5.js:
      http://p5js.org/reference/#/p5/pixels[]

    In conclusion your conversion attempt isn't sufficiently faithful.
    Making the whole ordeal even more difficult than it should be! ~O)

  • GoToLoopGoToLoop

    Ah! This wiki article shows many tricks to convert "Java Mode" to "p5.js":
    https://GitHub.com/processing/p5.js/wiki/Processing-transition

  • faonfaon

    Thank you for your answer.

    I know that my second code isn't a straight translation of the java version (I need a background image, the colors are not the same and I use colormode to use RGB not Hex, I deleted the keypressed function that I don't need, etc.

    But I still don't know what's wrong. I don't know if it's my color array, the variables of my noise or the pixels method that are not correct.

    Anyway, if I use the javascript mode from processing 2 to export the program, could I use easily the new code in the p5.js app ?

    It's quite hard for me to switch between the different syntaxes of processing/p5.js...

  • GoToLoopGoToLoop
    edited January 2016

    (I need a background image, the colors are not the same...

    Your 1st priority is converting your original Processing's Java sketch to p5.js' JS.
    You can always add the other things later once you've got the basic conversion working.
    Again I repeat: Why are you trying so hard to make it harder than it should be? :-<

    ... and I use colorMode() to use RGB not Hex, ...

    I fail to see what colorMode() has anything to do w/ hexadecimal literal values. :-\"
    Are you sure you understand what colorMode() is for? Both for "Java Mode" & p5.js:

    1. https://Processing.org/reference/colorMode_.html
    2. http://p5js.org/reference/#/p5/colorMode

    But I still don't know what's wrong.

    As I've mentioned in my 1st reply, our main approach for debugging is F12. :-B

    ... if I use the JavaScript mode from Processing 2 to export the program, could I use easily the new code in the p5.js app?

    "JS Mode" relies on Processing.JS (PJS) library. It's not the same as p5.js. But both are JS libraries. :-bd

    1. http://ProcessingJS.org/reference/
    2. http://p5js.org/reference/
  • faonfaon

    Ok but even if I reduce my code to the minimum, it doesn't work and nothing happens when I press F12 in the p5.js app and in my web browser. It's not the first time that I have that kind of translation issues between the 2 languages and I think it's really a problem for non confirmed programmers... :(

  • GoToLoopGoToLoop
    edited January 2016

    ... it doesn't work and nothing happens when I press F12...

    F12 open up browser's debug. Are you sure you haven't spotted any error messages in its Console tab?

    BtW, here's a very nice web IDE for p5.js: http://p5ide.HerokuApp.com/editor

    And don't forget to post your most current attempt so we can accompany what is going on. :ar!

  • faonfaon

    Yes there is nothing in the console tab, it's the reason why I am asking on the forum. In fact, in my first attempt to create a map from selected colors, I made this in p5.js :

    var background;
var world;
var a ; //x pixel
var b ; //y pixel
var c; //taille pixel
var col = [] ;
;
function preload() {
  background = loadImage("test.jpg");
  world = loadImage("world.png") ;
}
function setup() {
  createCanvas(windowWidth, windowHeight);
  image(background, 0, 0,windowWidth,windowHeight);

  //couleurs
 
  
  a=0;
  b=0;
  c=3;
}


function draw() {
  
  
  // couleurs
  
   alf = random(0,255);
      
  //blanc
  
  for(i=0; i<=10; i++){
  col[i] = color(255,255,255,alf);}
 // gris
 
  for(i=11; i<=20; i++){
  col[i] = color(197,193,185,alf);}
  
 //bleu gris
 
  for(i=21; i<=30; i++){
  col[i] = color(151,158,163,alf);}

//bleu clair

for(i=31; i<=40; i++){
  col[i] = color(87,103,116,alf);}

//beige

for(i=41; i<=50; i++){
  col[i] = color(233,227,208,alf);}

// sable

for(i=51; i<=80; i++){
  col[i] = color(200,170,111,alf);}
  
// brun

for(i=81; i<=110; i++){
  col[i] = color(143,127,70,alf);}
 
//vert clair

for(i=111; i<=160; i++){
  col[i] = color(86,95,37,200);}
  
// vert foncé

for(i=161; i<=210; i++){
  col[i] = color(47,66,16,200);}
 

//ocean
 for(i=210; i<=450; i++){
  col[i] = color(8,8,56,200);}

//transparent

 for(i=451; i<=800; i++){
  col[i] = color(255,255,255,0);}
   
   
   
   
   for(a=0; a<= windowWidth-c; a+=c){
     
      shuffle(col,true);
       
  fill(col[100]);
  noStroke();
  noise(col) ;
  rect (a,b,c,c);

}
  
    if (a>=windowWidth-c) {
    b+=c;
    a=0;
  }
  if(b>=windowHeight-c){

    noLoop();
    save('newworld.jpg') ;
    a=0; b=0;
    //loop();
  }
  
}

    It works this way with the shuffle() but the result is too random and slow because of the multiple variables I have made in order to randomly draw more some color than another (like the proportions of lands and waters on a planisphere)... So I was looking for another solution with the noise() method but I have only found the first code I have posted here, written for processing. I don't know if I can mix the shuffle with the noise and all the easy exemples that I found about the noise method don't work with arrays of colors and alpha layers. Maybe there is an easier way to generate maps from colors with the p5.js language than adaptating this code but i'm not sure to clearly understand how exactly works the noise() function.

  • GoToLoopGoToLoop

    Perhaps a game prototype using noise() may give you some ideas? *-:)
    http://studio.ProcessingTogether.com/sp/pad/export/ro.9Ql2E8JBC54LJ

  • faonfaon

    I will study this but it seems a little bit more complicated than the java code I have found first.

  • GoToLoopGoToLoop
    edited January 2016

    Indeed it's much bigger & complex. But notice it's already running in the browser as transpiled Java to JS.
    Repeating my advice: if you wanna learn JS + p5.js, try to convert your original Java Mode sketch to p5.js as faithful as possible. Do not add your stuff until you got it running! :-@

Sign In or Register to comment.