Problem with "translating" from processing to p5.js

torekndsen

Hello guys, I need some help to get started with the p5.js libriary

The following code will display the clock, and color the text, using the current clock(ss/mm/hh) as a hex value. I first wrote the code in processing where it works. Now I want to execute it as p5 however, after changing the syntax to fit the p5 language, it dosen't work. I can't figure out why, tho I suspect the "var" instead of "string" to be an possible issue?

Can you guys explain why it dosen't work?

p5.js code:

var s,m,h; 
function setup() {
  createCanvas(800,600);

}

function draw() {
 s = second();
 m = minute();
 h = hour(); 

background(30);
var s_ = nf(s,2);
var m_ = nf(m,2);
var h_ = nf(h,2);

var hex_ =  "FF" + s_+ m_+ h_;
var c = unhex(hex_);

fill(c);
textSize(30);
text("#",width/2-70,height/2); 
text(s_,width/2-40,height/2); 
text(m_,width/2,height/2); 
text(h_,width/2+40,height/2); 
}

Same programme, just written in processing and WORKS:

int s, m, h; 

void setup(){
  size(800,600);   
}

void draw(){
 s = second(); 
 m = minute();
 h = hour(); 

background(200);
String s_ = nf(s,2);
String m_ = nf(m,2);
String h_ = nf(h,2);

String hex_ =  "FF" + s_+ m_+ h_;
int c = unhex(hex_);


fill(c);
textSize(30);
text("#",width/2-70,height/2); 
text(s_,width/2-40,height/2); 
text(m_,width/2,height/2); 
text(h_,width/2+40,height/2); 
}

GoToLoop

http://p5ide.HerokuApp.com/editor#?sketch=57b6ca4507ebfa0300553e0e
https://GitHub.com/processing/p5.js/wiki/Processing-transition

torekndsen

Thx for the links, however the Processing-translation section dosen't seem to cover my problem?

When I print hex_ to the console in the p5 sketch, it appears as a string, which it should. But when I parse the string into the unhex(); it doesn't seem to covert the same way as processing do. I have read the referencers for unhex() and it seems to be the same as in processing, so I can't really locate the problem..

https://p5js.org/reference/#/p5/unhex

GoToLoop

Running side-by-side Java Mode & p5.js sketches, I've got the same result here! :-@
Have you actually run the p5.js sketch from HerokuApp's link I posted above? /:)

torekndsen

Yeah I tried the HerokuApp link you posted, and with the same result as when I run it in the P5 IDE. The color still dont change?

GoToLoop

So there's some misunderstanding here! I thought the Java Mode sketch was the model behavior you wanted to convert to p5.js? :-/ Now it turns out it's also incorrect?! 8-}

koogs

If text written using the fill colour or the stroke colour?

koogs

Or both?

koogs

You also might want to map 24 / 60 / 60 each to the range 0 - 255 to get the full range of colours. The ones you are using are all quite dark.

There'll also be a discontinuity in your colours because it'll go from 0x09 (9 in base 10) to 0x10 (16 on base 10). You are using decimal numbers as hex numbers.

Generally I'd drop unhex completely and do something different.

torekndsen

So there's some misunderstanding here! I thought the Java Mode sketch was the model behavior you wanted to convert to p5.js? Now it turns out it's also incorrect?!

I posted two sketches. One made in processing/java mode, and the other one translated into P5. The processing sketch works as it should, using the time stamp as the hex color value to color the text.

The P5 sketch does not color anything. Its like the time value isn't converted to a color value. - And thats my problem. The time isn't changing color of the text.

GoToLoop

// forum.Processing.org/two/discussion/17903/
// problem-with-translating-from-processing-to-p5-js#Item_10

// p5ide.HerokuApp.com/editor#?sketch=57b9b0b3e1da7a03006db21b

// GoToLoop (2016-Aug-21)

void setup() {
  size(400, 300);
  frameRate(1);
  textSize(50);
  textAlign(CENTER, CENTER);
}

void draw() {
  int s = second(), m = minute(), h = hour(),
      r = (int) map(s, 0, 59, 0x80, 0xff),
      g = (int) map(m, 0, 59, 0x80, 0xff),
      b = (int) map(h, 0, 23, 0x80, 0xff),
      cx = width>>1, cy = height>>1;

  String time = "# " + nf(s, 2) + " " + nf(m, 2) + " " + nf(h, 2);

  background(30);
  fill(r, g, b);
  text(time, cx, cy);
}

GoToLoop

http://p5ide.HerokuApp.com/editor#?sketch=57b9b0b3e1da7a03006db21b

<script async src=http://p5js.org/js/p5.min.js></script>

// forum.Processing.org/two/discussion/17903/
// problem-with-translating-from-processing-to-p5-js#Item_11

// p5ide.HerokuApp.com/editor#?sketch=57b9b0b3e1da7a03006db21b

// GoToLoop (2016-Aug-21)

"use strict";

function setup() {
  createCanvas(400, 300);
  noStroke().frameRate(1);
  textSize(50).textAlign(CENTER, CENTER).textStyle(BOLD);
}

function draw() {
  const s = second(), m = minute(), h = hour(),
        r = ~~map(s, 0, 59, 0x80, 0xff),
        g = ~~map(m, 0, 59, 0x80, 0xff),
        b = ~~map(h, 0, 23, 0x80, 0xff),
        cx = width>>1, cy = height>>1,
        time = '# ' + nf(s, 2) + ' ' + nf(m, 2) + ' ' + nf(h, 2);

  background(30).fill(r, g, b).text(time, cx, cy);
}