Variable to read an array of numbers in p5?

p5.js Coding Questions
1

09%20PM

I come from modular programing, (Max/puredata) world, the pic above explains better (at least for me) what I want to do in p5.
I have a variable that goes in between 0 and 100, I want to use this variable to read from a “map/array/curve” of numbers, so when it reaches 50 it’ll reach the max in the array.

what’s the easiest way of doing this?
I had a look to the array functions in p5 though I have no idea about how to implement it.

thank you

2 Likes
2

Hi,

Is there a reason why you are not using a formula?

Somthing like:

if (x <= 50) {
  y = 2 * x;
} else {
  y = - 2 * x + 200
}
2 Likes
3

just cause of ignorance.
thank you, this is perfect!

1 Like
4

Note that you can also build these out of map() if you want them to be sort of like max/msp or pd components.

So, say instead of a triangle wave you wanted an s-curve (sigmoid function):

svg

So you want your component to do this:

1/(1 + e^-x)

which is written:

1/(1 + exp(-x))

But you need to map ranges of inputs and outputs around it…

Below are some simple examples of wrapping these kinds of things up in a convenient function using map().

/**
 * map-based waves
 * Processing 3.4 2019-08
 * https://discourse.processing.org/t/variable-to-read-an-array-of-numbers-in-p5/13377
 */

void draw() {
  background(128);
  float y=0;
  for(float x=0; x<width; x=x+0.2){ // loop over screen to draw points
    y = mapSawtooth(x, 0, 10, 100, 70); // period of 1-10, output 100-70
    point(x, y);
    y = mapTriangleWave(x, 0, 50, 35, 65);
    point(x, y);
    y = mapSigmoid(x, 0, width, 30, 5);
    point(x, y);
  }
}

/**
 * call a generic wave / saw / square function.
 * Use map to put x in; use map to get y out.
 **/
float mapSigmoid(float x, float start1, float stop1, float start2, float stop2){
  float nx=map(x, start1, stop1, -TWO_PI, TWO_PI);
  float y = sigmoid(nx);
  float ny = map(y, 0, 1, start2, stop2);
  return ny;
}

/**
 * s-curve: sigmoid generic formula.
 * Over x[-TWO_PI, TWO_PI] its output y ranges [0-1]
 **/
float sigmoid(float x) {
  return 1/(1 + exp(-x));
}


float mapTriangleWave(float x, float start1, float stop1, float start2, float stop2){
  float nx=map(x, start1, stop1, 0, 1);
  float y = triangleWave(nx);
  float ny = map(y, 0, 1, start2, stop2);
  return ny;
}

/**
 * triangle wave generic formula.
 * Over x[0, 1] its output y ranges [0-1-0]
 **/
float triangleWave(float x) {
  return 2 * abs(sawtooth(x)-0.5);
}

float mapSawtooth(float x, float start1, float stop1, float start2, float stop2){
  float nx=map(x, start1, stop1, 0, 1);
  float y = sawtooth(nx);
  float ny = map(y, 0, 1, start2, stop2);
  return ny;
}

/**
 * sawtooth wave
 * Over x[0, 1] its output y ranges [0-1]
 */
float sawtooth(float x){
  return x % 1.0;
}

curves

The key idea is that you are taking a really simple piece of code – like x % 1.0 for a sawtooth – and wrapping it in a pretty generic way to turn it into something like a pd component.

1 Like
5

Thanks again Jeremy!
i had the intuition that map might be able to help me cause in the object oriented world it has been used for this as well though I have no clue about how to implement this.
the map-based waves example is a bit intimidating to be honest but I think i get its principle.
thank you lots!

1 Like