P5.js code without stringbuilder

p5.js Coding Questions
1

how do I rewrite this code without string builder?


function setup() {
  createCanvas(600,600);
    initializeFields();
    var n = 20;
}

function getAlphaNumericString(n) {
    // chose a Character random from this String
    var AlphaNumericString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" + "0123456789" + "abcdefghijklmnopqrstuvxyz" + "!@#$%^&*()-_+=`~/[{]}',<.>?";
    // create StringBuffer size of AlphaNumericString
    var sb = new StringBuilder(n);
    for (var i = 0; i < n; i++) {
        // generate a random number between
        // 0 to AlphaNumericString variable length
        var index = int((AlphaNumericString.length * Math.random()));
        // add Character one by one in end of sb
        sb.append(AlphaNumericString.charAt(index));
    }
    return sb.toString();
}

function draw() {
}

function initializeFields() {
}
2

If you want to make use of the existing code, how about simply adding one character at a time, as shown below?

function getAlphaNumericString(n) {

  var AlphaNumericString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" + "0123456789" + "abcdefghijklmnopqrstuvxyz" + "!@#$%^&*()-_+=`~/[{]}',<.>?";

+  var sb = "";
  for (var i = 0; i < n; i++) {

    var index = int(AlphaNumericString.length * Math.random());

+    sb += AlphaNumericString.charAt(index);
  }
+  return sb;
}
Other shortened way

By using the p5.js shuffle function and arrays, it can be shortened as follows.

function getAlphaNumericString(n) {
  const alphaNumericArray = [...Array(75)].map((_, i) =>
    String.fromCharCode(48 + i)
  );
  return shuffle(alphaNumericArray).slice(0, n).join("");
}

What this function does

  1. Create an array of alphabets, numbers, and symbols.
  2. Shuffle (randomly rearrange) that array. (shuffle())
  3. Extract the required number (n) of symbols from the array. (slice(0, n))
  4. Cast from the array to a string. (.join(''))

However, It is not good to write magic numbers such as 48 or 75 directly.
Using '0'.charCodeAt() or 'z'.charCodeAt() is a more friendly function.

Feel free to let me know if this isn’t the answer you’re looking for!

1 Like
3

Thanks! Here’s the final product if anyone is curious, http://127.0.0.1:8082/

4

Actually it isn’t working

5

Actually it isn’t working

What does your it refer to?

Thanks! Here’s the final product if anyone is curious, http://127.0.0.1:8082/

Your local network cannot be shared.
Just a screenshot of your work would be great :smiley:

6 

function setup() {
  createCanvas(600,600);
    initializeFields();
    var n = 20;
}

function getAlphaNumericString(n) {

  var AlphaNumericString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" + "0123456789" + "abcdefghijklmnopqrstuvxyz" + "!@#$%^&*()-_+=`~/[{]}',<.>?";

  var sb = "";
  for (var i = 0; i < n; i++) {

    var index = int(AlphaNumericString.length * Math.random());

   sb += AlphaNumericString.charAt(index);
  }
  return sb;
}

function draw() {
    eval(sb);
}

and yes I know eval can be dangerous

7

Since getAlphaNumericString is a function, we need to let it run.

The following is an example of getAlphaNumericString() in setup() and outputting it to the console.

function setup() {
  createCanvas(600, 600);
  const n = 20;

  const alphaNumeric = getAlphaNumericString(n);
  console.log(alphaNumeric);
}

function getAlphaNumericString(n) {
  const AlphaNumericString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" + "0123456789" + "abcdefghijklmnopqrstuvxyz" + "!@#$%^&*()-_+=`~/[{]}',<.>?";
  let sb = "";
  for (var i = 0; i < n; i++) {
    const index = int(AlphaNumericString.length * Math.random());
    sb += AlphaNumericString.charAt(index);
  }
  return sb;
}

Is there anything you don’t understand?