# How to incorporate exponential curve with a specified limit?

**URL:** <https://discourse.processing.org/t/how-to-incorporate-exponential-curve-with-a-specified-limit/28995>\
**Category:** Coding Questions\
**Created:** [March 30, 2021, 9:16pm UTC](https://discourse.processing.org/t/how-to-incorporate-exponential-curve-with-a-specified-limit/28995 "2021-03-30T21:16:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![leatherbird](https://avatars.discourse-cdn.com/v4/letter/l/6f9a4e/32.png) [@leatherbird](https://discourse.processing.org/u/leatherbird)\
**Post date:** [March 30, 2021, 9:16pm UTC](https://discourse.processing.org/t/how-to-incorporate-exponential-curve-with-a-specified-limit/28995/1 "2021-03-30T21:16:45Z")

</div>

Hello!  
I’m playing with randomGaussians, and gradual transitions, trying to understand the concept, and I’ve hit a bit of a snag.  
I’m hoping someone can help with the math involved.

I’m drawing simple squares in a grid pattern. I’d like the left side of the grid to be… “normal.”  
All the squares are drawn as they should be, in a simple grid.  
But as we get to the right side of the grid, I’d like square placement to become more “crazy.”

So this is what I’ve got so far.

```auto
size(800, 400);
int scale = 10;
background(0);
noStroke();
rectMode(CENTER);

for (int x = 0; x <= width; x += scale) {
  for (int y = 0; y <= height; y += scale) {

    float pDistribution = map(x, 0, width, 0, 15);

    float xDrift = randomGaussian() * pDistribution;
    float yDrift = randomGaussian() * pDistribution;

    fill(200);
    push();
    translate(x, y);
    rect(xDrift, yDrift, scale, scale);
    pop();
  }
}

```

I’m proud of getting this far, because it’s doing essentially what I want.  
The only thing is, **I’d like the Gaussian Distribution to have a more exponential curve.**  
Hopefully, I’m using the correct terminology here.  
Basically, I’d like the squares to be in their more “correct” spots a bit longer longer as we travel across x.  
The squares on the far left and far right are exactly where I want them, but I’d like the middle to chill out a bit.

Because of the word “exponential”, I thought _maybe_ `exp()` should go in there somewhere, but I don’t really understand how it would fit.

If I need to rephrase or clarify what I’m asking, please let me know!  
Any advice would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 30, 2021, 9:50pm UTC](https://discourse.processing.org/t/how-to-incorporate-exponential-curve-with-a-specified-limit/28995/2 "2021-03-30T21:50:41Z")

</div>

> [@leatherbird](#):
>
> ` float pDistribution = map(x, 0, width, 0, 15);`

you can oppress this

```auto
    float pDistribution;
    if (x<300) pDistribution = 0; 
       else pDistribution = map(x, 300, width, 0, 15); // OR map(x, 0, width, 0, 15);

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [March 30, 2021, 9:55pm UTC](https://discourse.processing.org/t/how-to-incorporate-exponential-curve-with-a-specified-limit/28995/3 "2021-03-30T21:55:17Z")

</div>

Hello leatherbird,

Cool project!

You are on the right track.  
The problem with `exp()` is that it diverges wayyyyy too fast.

For example, exp(10) is a bit more than 22000.  
Now let’s consider that `randomGaussian()` gives you a value between -3 and 3 to simplify things.  
Then it means that when you are at your second square (so x = 10) your drifts value are between - 3 \* 22000 and + 3 \* 22000.  
That’s quite a lot of pixels and that’s why you don’t get any squares on your screen.

So what you want is a function that behaves in the same way as you an exp() but with the max value when x = width being the 15 that you have in your linear mapping in your code.

A good way to think of it is to trace the function along the x axis on top of your graph. The Higher the value, the higher they will drift.

Here is an example with a sin():

```auto
void setup() {

  size(800, 400);
  int scale = 10;
  background(0);
  noStroke();
  rectMode(CENTER);

  for (int x = 0; x <= width; x += scale) {
    float sinVal = 7.5 * (sin(0.03 * x) + 1);

    for (int y = 0; y <= height; y += scale) {

      float xDrift = randomGaussian() * sinVal;
      float yDrift = randomGaussian() * sinVal;

      fill(200);
      push();
      translate(x, y);
      rect(xDrift, yDrift, scale, scale);
      pop();
    }
  }

  // Plot the sin
  for (int x = 0; x <= width; x++) {
    float sinVal = 7.5 * (sin(0.03 * x) + 1);
    float yCoord = map(sinVal, 0, 15, height, 0);
    fill(255, 0, 0);
    noStroke();
    ellipse(x, yCoord, 5, 5);
  }
}

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/47b5c79a8b16c5afe9d654c8be949e0d8a5aca4d.png)

Now for your function. You know that `exp(log(15)) = 15`. And you want you value to be 15 when x = width. So you can have `exp(log(15) * x / width)` being your function. Now it doesn’t start at 0 but at exp(0). So to compensate for that you can use `exp(log(15 + exp(0)) * x / width) - exp(0)`. So at the end you get:

```auto
void setup() {

  size(800, 400);
  int scale = 10;
  background(0);
  noStroke();
  rectMode(CENTER);

  for (int x = 0; x <= width; x += scale) {
    float expVal = exp(log(15 + exp(0)) * x / width) - exp(0);

    for (int y = 0; y <= height; y += scale) {

      float xDrift = randomGaussian() * expVal;
      float yDrift = randomGaussian() * expVal;

      fill(200);
      push();
      translate(x, y);
      rect(xDrift, yDrift, scale, scale);
      pop();
    }
  }

  // Plot the exp
  for (int x = 0; x <= width; x++) {
    float expVal = exp(log(15 + exp(0)) * x / width) - exp(0);
    float yCoord = map(expVal, 0, 15, height, 0);
    fill(255, 0, 0);
    noStroke();
    ellipse(x, yCoord, 5, 5);
  }
}

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7314dda5268c06ef35bd19374bae8f01864ec8f7.png)

---

<div class="post-metadata">

**Author:** ![leatherbird](https://avatars.discourse-cdn.com/v4/letter/l/6f9a4e/32.png) [@leatherbird](https://discourse.processing.org/u/leatherbird)\
**Post date:** [March 31, 2021, 7:12am UTC](https://discourse.processing.org/t/how-to-incorporate-exponential-curve-with-a-specified-limit/28995/5 "2021-03-31T07:12:34Z")

</div>

Thank you! This is exactly what I was attempting.  
I guess I don’t fully understand what `log()` _or_ `exp()` are doing.  
I will have to research these further before I comprehend them well enough to control them.

But _now_ I know what I need to study!  
I’m grateful to you for pointing me in the right direction!  
Thank you so much!

---

<div class="post-metadata">

**Author:** ![leatherbird](https://avatars.discourse-cdn.com/v4/letter/l/6f9a4e/32.png) [@leatherbird](https://discourse.processing.org/u/leatherbird)\
**Post date:** [March 31, 2021, 7:29am UTC](https://discourse.processing.org/t/how-to-incorporate-exponential-curve-with-a-specified-limit/28995/6 "2021-03-31T07:29:31Z")

</div>

By the way, with your help I was able to get the look I wanted!  
I’m so excited to keep playing with it!

 ![broken_grid01](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6339e635cf423161a62b5c88ae25fa73b617aa25.png)

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 2, 2021, 3:39am UTC](https://discourse.processing.org/t/how-to-incorporate-exponential-curve-with-a-specified-limit/28995/7 "2021-04-02T03:39:09Z")

</div>

Great write up @jb4x! I love the curve overlays.