# P5.js code without stringbuilder

**URL:** <https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084>\
**Category:** Coding Questions\
**Created:** [April 2, 2022, 6:00pm UTC](https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084 "2022-04-02T18:00:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [April 2, 2022, 6:00pm UTC](https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084/1 "2022-04-02T18:00:08Z")

</div>

how do I rewrite this code without string builder?

```auto

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() {
}

```

---

<div class="post-metadata">

**Author:** ![rux](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rux/32/15879_2.png) [@rux](https://discourse.processing.org/u/rux)\
**Post date:** [April 3, 2022, 1:59pm UTC](https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084/2 "2022-04-03T13:59:33Z")

</div>

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

```diff
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](https://p5js.org/reference/#/p5/shuffle) function and [arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), it can be shortened as follows.
> 
> ```javascript
> 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!

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [April 5, 2022, 10:42am UTC](https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084/3 "2022-04-05T10:42:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [April 5, 2022, 10:50am UTC](https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084/4 "2022-04-05T10:50:45Z")

</div>

Actually it isn’t working

---

<div class="post-metadata">

**Author:** ![rux](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rux/32/15879_2.png) [@rux](https://discourse.processing.org/u/rux)\
**Post date:** [April 5, 2022, 11:09am UTC](https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084/5 "2022-04-05T11:09:37Z")

</div>

> 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/](http://127.0.0.1:8082/)

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

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [April 5, 2022, 1:17pm UTC](https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084/6 "2022-04-05T13:17:29Z")

</div>

```auto

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

---

<div class="post-metadata">

**Author:** ![rux](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rux/32/15879_2.png) [@rux](https://discourse.processing.org/u/rux)\
**Post date:** [April 5, 2022, 1:51pm UTC](https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084/7 "2022-04-05T13:51:29Z")

</div>

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.

```javascript
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?