# How to create small increment in random number

**URL:** <https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669>\
**Category:** Coding Questions\
**Created:** [May 29, 2019, 7:38am UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669 "2019-05-29T07:38:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [May 29, 2019, 7:38am UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669/1 "2019-05-29T07:38:00Z")

</div>

Hi All

I have been stuck this problem for few days. Couldn’t figure it out how create small increment in random number.

This is my code:

```auto
var jitter;

function setup() {
  createCanvas(400, 400);
  background(220);
  strokeWeight(2);
  noFill();
}

function draw() {

  beginShape()
  for (var i = 0; i < 300; i += 10) {
    jitter = random(35, 45);
    var y = 50 + i;
    var x = jitter;
    vertex(x, y);
  }
  endShape();
  noLoop();
}

```

Basically what I want to do is to create a line that smooth in the top and curl / jitter in the bottom. My logic is to create vertex with random x. And make the x have small increment in the random number. But couldn’t find a way to do it

Please help, any idea would be appreciated

Thanks

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [May 29, 2019, 8:38am UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669/2 "2019-05-29T08:38:51Z")

</div>

Here is one way to create a linear interpolation between the values.

```auto
var jitter = 0;
var jitterMax = 80;

function setup() {
  createCanvas(400, 400);
  background(220);
  strokeWeight(2);
  noFill();
}

function draw() {
  // Translate makes it simpler to draw from on point
  // p5js.org/reference/#/p5/translate
  translate(35,45);

  beginShape();
  for (var i = 0; i < 300; i += 10) {
    
    // The map function is an easy way to interpolate values
    // p5js.org/reference/#/p5/map
    jitter = map(i, 0, 300, 0, jitterMax);
    
    var y = 50 + i;
    var x = random(-jitter, jitter);
    vertex(x, y);
  }

  endShape();
  noLoop();
}

```

---

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [May 29, 2019, 8:44am UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669/3 "2019-05-29T08:44:18Z")

</div>

> [@philipplehmann](#):
>
> var jitter = 0; var jitterMax = 80; function setup() { createCanvas(400, 400); background(220); strokeWeight(2); noFill(); } function draw() { // Translate makes it simpler to draw from on point // [reference | p5.js](http://p5js.org/reference/#/p5/translate) translate(35,45); beginShape(); for (var i = 0; i \< 300; i += 10) { // The map function is an easy way to interpolate values // [reference | p5.js](http://p5js.org/reference/#/p5/map) jitter = map(i, 0, 300, 0, jitterMax); var y = 50 + i; var x = random(-jitter, jitter); vertex(x, y); } endShape(); noLoop(); }

Wow amazing… using map is good idea, I don’t think about it that way. Thank you!

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [May 29, 2019, 8:56am UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669/4 "2019-05-29T08:56:35Z")

</div>

If you want to increment the values in a smoother way, have a look at logistic functions. I’m not an expert on this matter but tweeked the function a bit for this example.

```auto
var jitter = 0;
var jitterMax = 80;
var steps = 40;

function setup() {
  createCanvas(400, 400);
  background(220);
  strokeWeight(2);
  noFill();
}

function draw() {
  translate(200, 50);

  beginShape();
  for (var i = 0; i < steps; i++) {
    
    // This probalby needs improvement :)
    var m = logistic(i/steps);
    jitter = random(-jitterMax * m, jitterMax * m);
    
    var y = map(i, 0, steps, 0, 300);
    var x = random(-jitter, jitter);
    vertex(x, y);
  }

  endShape();
  noLoop();
}

function logistic(x) {
    // Input for improvement here much appreciated
    return (1 / (1 + Math.exp(-2 * (x - 0))) - 0.5) * 2;
}

```

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [May 29, 2019, 8:59am UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669/5 "2019-05-29T08:59:06Z")

</div>

And one more thing.  
Instead of random, you could have a look into noise().

---

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [May 29, 2019, 9:16am UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669/6 "2019-05-29T09:16:11Z")

</div>

This is interesting, but quick google doesn’t give me any references about logistic. Is this function is similar with map() ?

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [May 29, 2019, 9:44am UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669/7 "2019-05-29T09:44:11Z")

</div>

logistic (or sigmoid) its a mathematical function often referred to as S-Curve.  
You can write this principle as a javascript-function and use it.  
Map() is sort of the same but you don’t have to write it yourself because it is already part of the P5JS library.

---

<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:** [May 29, 2019, 4:53pm UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669/8 "2019-05-29T16:53:05Z")

</div>

Added **mousePressed()** + **redraw()** to @philipplehmann’s sketch. 🖱  
No need to rerun now for just another jitter: 😉

```auto
// https://Discourse.processing.org/t/
// how-to-create-small-increment-in-random-number/11669/8

// PhilippLehmann (2019/May/29)

"use strict";

const MAX = 80, STEPS = 40, BG = 0o340;
let bg;

function setup() {
  createCanvas(250, 500).mousePressed(redraw);
  strokeWeight(2).noFill().noLoop();
  bg = color(BG);
}

function draw() {
  background(bg);
  translate(width>>1, height>>2);

  beginShape();
  for (let i = 0; i < STEPS; ++i) {
    const m = sigmoid(i/STEPS),
          jitter = random(-MAX * m, MAX * m),
          x = random(-jitter, jitter),
          y = map(i, 0, STEPS, 0, height - 100);

    vertex(x, y);
  }
  endShape();
}

function sigmoid(x = 0) {
  return 2 * (1 / (exp(-2*x) + 1) - 0.5);
}

```

---

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [May 30, 2019, 2:43am UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669/9 "2019-05-30T02:43:56Z")

</div>

Awesome! This is new logic flow for me. I have a question:  
`translate(width>>1,height>>2)` what does it mean by using \>\> in translate ?

Thanks

---

<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:** [May 30, 2019, 3:10am UTC](https://discourse.processing.org/t/how-to-create-small-increment-in-random-number/11669/10 "2019-05-30T03:10:55Z")

</div>

> [@noob](#):
>
> `translate(width>>1, height>>2);`

`translate(width/2, height/4);`

> **[\>\> (right shift) / Reference](https://processing.org/reference/rightshift.html)**
>
> Shifts bits to the right. The number to the left of the operator is shifted the number of places specified by the number to the right. Each shift to the right halves the number, therefore each right s…

> **[Expressions and operators - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)**
>
> This chapter documents all the JavaScript language operators, expressions and keywords.