# From Javascript P5 to Processing 3.x

**URL:** <https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399>\
**Category:** Coding Questions\
**Created:** [January 27, 2021, 5:58am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399 "2021-01-27T05:58:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![HerClau](https://avatars.discourse-cdn.com/v4/letter/h/4bbf92/32.png) [@HerClau](https://discourse.processing.org/u/HerClau)\
**Post date:** [January 27, 2021, 5:58am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399/1 "2021-01-27T05:58:49Z")

</div>

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

```auto
// 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](https://discourse.processing.org/t/how-to-make-a-moving-graph-in-javascript-p5/19630/2)

---

<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:** [January 27, 2021, 9:11am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399/2 "2021-01-27T09:11:59Z")

</div>

- JS Float32Array corresponds to Java `float[]`.
- `{ length: time }` is the _length_ of the array.
- `(_, i) =>` is the current index of the array creation loop.

```auto
float[] posx = new float[time];
for (int i = 0; i < time; posx[i] = map(i++, 0, time, 0, W));

```

- [developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/TypedArray/from#generate\_a\_sequence\_of\_numbers](http://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/from#generate_a_sequence_of_numbers)
- [Processing.org/reference/float.html](http://Processing.org/reference/float.html)

---

<div class="post-metadata">

**Author:** ![HerClau](https://avatars.discourse-cdn.com/v4/letter/h/4bbf92/32.png) [@HerClau](https://discourse.processing.org/u/HerClau)\
**Post date:** [January 27, 2021, 9:57am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399/3 "2021-01-27T09:57:35Z")

</div>

> [@HerClau](#):
>
> How to translate the following line of code to Preocessing:

How to translate the [sketch](https://discourse.processing.org/t/how-to-make-a-moving-graph-in-javascript-p5/19630/2). !!!

---

<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:** [January 27, 2021, 10:00am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399/4 "2021-01-27T10:00:42Z")

</div>

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

> **[processing/p5.js](https://github.com/processing/p5.js/wiki/Processing-transition)**
>
> Processing-transition

---

<div class="post-metadata">

**Author:** ![HerClau](https://avatars.discourse-cdn.com/v4/letter/h/4bbf92/32.png) [@HerClau](https://discourse.processing.org/u/HerClau)\
**Post date:** [January 27, 2021, 10:36am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399/5 "2021-01-27T10:36:13Z")

</div>

> [@GoToLoop](#):
>
> `for (int i = 0; i < time; posx[i] = map(i++, 0, time, 0, W));`

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)))

}

```auto
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? !!
```

---

<div class="post-metadata">

**Author:** ![HerClau](https://avatars.discourse-cdn.com/v4/letter/h/4bbf92/32.png) [@HerClau](https://discourse.processing.org/u/HerClau)\
**Post date:** [January 27, 2021, 10:50am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399/6 "2021-01-27T10:50:29Z")

</div>

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

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

```

---

<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:** [January 27, 2021, 10:52am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399/7 "2021-01-27T10:52:53Z")

</div>

> [@HerClau](#):
>
> `but I don't understand the oprarator "_"!`

`_` 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.

> [@HerClau](#):
>
> `and d3 is declared internally within void? !!`

Sorry but that d3 is another library:

> **[D3 by Observable | The JavaScript library for bespoke data visualization](https://d3js.org)**
>
> The JavaScript library for bespoke data visualization

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.

---

<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:** [January 27, 2021, 10:55am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399/8 "2021-01-27T10:55:41Z")

</div>

> [@HerClau](#):
>
> This is the translation for fy,

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

> **[Arrow function expressions - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)**
>
> An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:

In Java that’d be converted like this:

```auto
static final float fy(final float _) {
  return map(_, 3, 0, H, 10);
}

```

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [January 27, 2021, 10:39pm UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399/9 "2021-01-27T22:39:24Z")

</div>

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

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![HerClau](https://avatars.discourse-cdn.com/v4/letter/h/4bbf92/32.png) [@HerClau](https://discourse.processing.org/u/HerClau)\
**Post date:** [January 28, 2021, 7:24am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399/10 "2021-01-28T07:24:17Z")

</div>

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