From Javascript P5 to Processing 3.x

p5.js Coding Questions
1

good morning
How to translate the following line of code to Preocessing:

// array containing the x positions of the line graph, scaled to fit the canvas
  posx = Float32Array.from({ length: time }, (_, i) => map(i, 0, time, 0, W));

I try to reproduce the sketch

2
  • JS Float32Array corresponds to Java float[].
  • { length: time } is the length of the array.
  • (_, i) => is the current index of the array creation loop.
float[] posx = new float[time];
for (int i = 0; i < time; posx[i] = map(i++, 0, time, 0, W));
1 Like
3

How to translate the sketch. !!!

4

Well, you can make an honest attempt and ask again for the parts you’re still stuck.

5

So far my progress:

~~
final int W = 680, H = 200; // dimensions of canvas
final int time = 400; // number of x tick values
final int step = W/time; // time step

float data ; // to store number of infected people
int count = 0; // steps counter
int pos, fy, c, infected, colors, l, f;

void setup() {
size(W, H);
fill(255, 30, 70, 90);

// array containing the x positions of the line graph, scaled to fit the canvas
//posx = Float32Array.from({ length: time }, (_, i) => map(i, 0, time, 0, W));
float posx = new float[time];
for (int i = 0; i < time; posx[i] = map(i++, 0, time, 0, W));

// function to map the number of infected people to a specific height (here the height of the canvas)
fy = _ => map(_, 3, 0, H, 10);

// colors based on height stored in an array list.
colors = d3.range(H).map(i => d3.interpolateWarm(norm(i, 0, H)))

}

I don't know how to translate the last two lines.
I do not understand them:
fy, is declared as in int
but I don't understand the oprarator "_"! which follows after the sign =.
and d3 is declared internally within void? !!
6

This is the translation for fy, but he is not happy.
I have problems with the map function :slight_smile:

//fy = _ => map(_, 3, 0, H, 10);
  int[] fy = new int[time];
  for (int i = 0; i < time; fy[i] = map(i++, 3, 0,H,10));
7

_ isn’t an operator but a function parameter.
Having a parameter named as _ is a convention which means just ignore it.
However that’s not the case there; _ should be renamed to something else.

Sorry but that d3 is another library:

Which means you won’t be able to convert it to Processing unless you find another way to convert the D3’s methods range() & interpolateWarm() to Java.

1 Like
8

fy is a function: fy = _ => map(_, 3, 0, H, 10);:

In Java that’d be converted like this:

static final float fy(final float _) {
  return map(_, 3, 0, H, 10);
}
1 Like
9

Sorry, I don’t have much time. Hope the following can help:

final color t0 = color(115, 57, 173);
final color t1 = color(174, 241, 76);
final int step = 2;

void setup() {
  colorMode(HSB, 255);
  strokeWeight(0.2);
  size(680, 200);
}

void draw() {
  float f = frameCount*.9;
  float c = sin(f*0.008);
  float infected = (exp(-c*c/2.0) / sqrt(TWO_PI) / 0.2) + map(noise(f*0.02), 0, 1, -1, 1);
   
  float y = map(infected, 3, 0, height, 10);
  float x = (f*step)%width;
  color t = lerpColor(t0, t1, norm(infected, 3, 0));

  fill(t);
  stroke(t);
  ellipse(x, y, 4, 4);
  line(x, height, x, y+2);

  if (x<step) background(255);
}
2 Likes
10

Thanks a lot,
It has been a great help and joy !!