Issue using user input in the random() function

[jessicalotze]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [X] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [X] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

p5.js version

v1.9.0

Web browser and version

chrome 121.0.6167.140, Firefox 121.0.1

Operating system

Windows 11

Steps to reproduce this

Steps:

1. use user inputted values in the random() function
2. values will frequently be below the minimum value input into the random() function

console results from code snippet:

Snippet:

let input1;
let input2;
function setup(){
    input1 = createInput('20','number');
    input2 = createInput('50','number');
    noLoop();
}

function draw(){
    let getInput1 = input1.value();
    let getInput2 = input2.value();
    for(let i=0; i<10; i++){
        console.log(getInput1,getInput2)
        test = random(getInput1,getInput2);
        console.log(test);
    }
}

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[Keshav-0907]

Hi @jessicalotze , The output isn't what you might expect because the random() function is getting string values as input. You can fix this by using parseInt() or parseFloat() to turn those strings into numbers. Once you do that, the random() function will work as intended, giving you the right random values.

let input1;
let input2;
function setup(){
    input1 = createInput(20,'number');
    input2 = createInput(50,'number');
    noLoop();
}

function draw(){
    let getInput1 = parseInt(input1.value()); \\ Here
    let getInput2 = parseInt(input2.value()); \\ Here
    for(let i=0; i<10; i++){
        console.log(getInput1,getInput2)
        test = random(getInput1,getInput2);
        console.log(test);
    }
}

[Keshav-0907]

@davepagurek should we also modify the createInput() function to accept integer/float values when type='number' or 'float' ?

p5.prototype.createInput = function (value = '', type = 'text') {
  p5._validateParameters('createInput', arguments);
  let elt = document.createElement('input');
  elt.setAttribute('value', value);
  elt.setAttribute('type', type);
  return addElement(elt, this);
};

We can implement it by, checking if the specified type is 'number' and, if so, converting the provided value to a integer.

  if (type === 'number') {
    elt.setAttribute('value', parseInt(value));
    elt.setAttribute('type', 'number');
  } else {
    elt.setAttribute('value', value);
    elt.setAttribute('type', type);
  }

[jessicalotze]

that fixed it, thanks!