How to create small increment in random number

p5.js Coding Questions
1

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:

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

1 Like
2

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

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();
}
1 Like
3

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

4

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.

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;
}
3 Likes
5

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

6

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

7

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.

3 Likes
8

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

// 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);
}
2 Likes
9

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

10

translate(width/2, height/4);

1 Like