# Text Randomizer

**URL:** https://discourse.processing.org/t/text-randomizer/23509
**Category:** Coding Questions
**Created:** [August 26, 2020, 8:10pm UTC](https://discourse.processing.org/t/text-randomizer/23509 "2020-08-26T20:10:47Z")
**Posts on this page:** 10
**Page:** 2

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 29, 2020, 3:17pm UTC](https://discourse.processing.org/t/text-randomizer/23509/21 "2020-08-29T15:17:53Z")

</div>

Hello,

The snippet of code I provided was a simplified example of drawing a grid (with your code) and I added the k which counts from 0 to 8.

You can access a 9 element array with this. This is what I did with an array which could also be shuffled.

I am not working on fixing your code and only offering insights that may lead to a solution for you.

Observations:

- You did not use fill() before circle.
- Random is in the draw() cycle and will change every cycle; consider putting it in setup() for now for testing and run your code for new random values each time.

I used shuffle() and it worked. It seems you are trying to write a custom shuffle() routine which is achievable with some effort.

Slow things down to see what is happening with a frameRate(1)

All the resources are here:  
[https://p5js.org/](https://p5js.org/)

`:)`

---

<div class="post-metadata">

### Author: ![Rohitsharma](https://avatars.discourse-cdn.com/v4/letter/r/58f4c7/32.png) [@Rohitsharma](https://discourse.processing.org/u/Rohitsharma)
#### Post date: [August 29, 2020, 4:38pm UTC](https://discourse.processing.org/t/text-randomizer/23509/22 "2020-08-29T16:38:36Z")

</div>

Here is the final output. Thank you @glv @Hyperion65 for helping me out.

Here is the [code](https://editor.p5js.org/Rohit/sketches/SBo4u0VYF): what do you guys think ?

Thank you again!! 🙂

```auto
var letters = ["T", "H", "E"];

var rows = 3;
var columns = 3;

function setup() {

  createCanvas(600, 600);

  background(65, 157, 239);

  stepX = width / columns;
  stepY = height / rows;

  //text attributes

  textSize(120);
  fill(255);
  textAlign(CENTER, CENTER);

  for (var i = 0; i < 3; i++) {
    //for loop to iterate rows

    var thisStepX = stepX / 2 + i * stepX;
    var thisStepY = stepY / 2 + i * stepY;

    //random
    var r = round(random(2));
    
    
    text(letters[i], stepX / 2 + i * stepX, stepY / 2 + r * stepY);

  }

  function draw() {

  }

}

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 29, 2020, 4:59pm UTC](https://discourse.processing.org/t/text-randomizer/23509/23 "2020-08-29T16:59:00Z")

</div>

Hello,

It is not random as per your first post but still cool as is.

Your implementation as is seems to work so far and much cleaner. `:)`

I really had to think about what you were doing!

```auto
 print(i, r, stepX / 2 + i * stepX, stepY / 2 + r * stepY);

```

`:)`

---

<div class="post-metadata">

### Author: ![Rohitsharma](https://avatars.discourse-cdn.com/v4/letter/r/58f4c7/32.png) [@Rohitsharma](https://discourse.processing.org/u/Rohitsharma)
#### Post date: [August 29, 2020, 7:53pm UTC](https://discourse.processing.org/t/text-randomizer/23509/24 "2020-08-29T19:53:29Z")

</div>

Hello @glv Thank you. yes its not very random, it is wither horizontal or vertical as suggested by @Hyperion65. I am trying to figure it out to make it a bit more random, but then making it even more random is going to lose its legibility. Its that bit that I am struggling with. However I do want to try to get a even more random version of it, just to compare both the designs. working on it now.

---

<div class="post-metadata">

### Author: ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [August 29, 2020, 8:06pm UTC](https://discourse.processing.org/t/text-randomizer/23509/25 "2020-08-29T20:06:30Z")

</div>

yes its great 🙂 random yet still recognizable

if you replace the values at i \< 3 and random(2) with “row” you can use any length of words to fit.  
I took the liberty to add this:

 ![Bildschirmfoto 2020-08-29 um 22.00.27](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6fb1c68fcc2e7a464a706f45d024732fe885575b.png)

make a random before starting the loop  
forking the text line, you will have horizontal and vertical randomly.

```auto
var hv = round(random(1));
...
if (hv == 0) text(letters[i], stepX / 2 + i * stepX, stepY / 2 + r * stepY);
if (hv == 1) text(letters[i], stepX / 2 + r * stepX, stepY / 2 + i * stepY);

```

well done 🙂

---

<div class="post-metadata">

### Author: ![Rohitsharma](https://avatars.discourse-cdn.com/v4/letter/r/58f4c7/32.png) [@Rohitsharma](https://discourse.processing.org/u/Rohitsharma)
#### Post date: [August 29, 2020, 8:30pm UTC](https://discourse.processing.org/t/text-randomizer/23509/26 "2020-08-29T20:30:08Z")

</div>

Yes, Thanks for your input. It helped me a lot in understanding the nuts and bolts of it. I have expanded it to a bigger grid and exploring how it can be pushed further!! 🙂

I do get this overlap sometimes, which I am trying to fix.

Thank again for your guidance. Much appreciated.

 ![Screenshot 2020-08-29 at 9.27.59 pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e24854303681e9878feebaa6d910e5a86437b934.png)

---

<div class="post-metadata">

### Author: ![Rohitsharma](https://avatars.discourse-cdn.com/v4/letter/r/58f4c7/32.png) [@Rohitsharma](https://discourse.processing.org/u/Rohitsharma)
#### Post date: [August 29, 2020, 8:34pm UTC](https://discourse.processing.org/t/text-randomizer/23509/27 "2020-08-29T20:34:37Z")

</div>

![Screenshot 2020-08-29 at 9.32.46 pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b0ff46066bb0147adfa479573efde02c504f6af6.png)

I see what the problem is here 🧐 🧐. Working on it now

Ahhh Found it. Sorry I completely missed to remove the random value. One instead of two. 🙂 🙂 or maybe not. 🤭

---

<div class="post-metadata">

### Author: ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [August 30, 2020, 8:16am UTC](https://discourse.processing.org/t/text-randomizer/23509/28 "2020-08-30T08:16:42Z")

</div>

it is because you put the random for hv **inside** the loop. so it can happen that the same field is selected. put it outside 😉

---

<div class="post-metadata">

### Author: ![Rohitsharma](https://avatars.discourse-cdn.com/v4/letter/r/58f4c7/32.png) [@Rohitsharma](https://discourse.processing.org/u/Rohitsharma)
#### Post date: [August 30, 2020, 10:24am UTC](https://discourse.processing.org/t/text-randomizer/23509/29 "2020-08-30T10:24:55Z")

</div>

Thank you. I did try that, the complete randomness just makes it harder to distinguish the word. Much prefer it when it reads horizontally or vertically!!

---

<div class="post-metadata">

### Author: ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [August 31, 2020, 8:28pm UTC](https://discourse.processing.org/t/text-randomizer/23509/30 "2020-08-31T20:28:00Z")

</div>

yes, in that case the random number should be depending on the previous random value.  
so the first time it is random(number of cells)

if it is at 7 (e.g.) then the next random should be 7± random(2) or another small value  
then you will get something like 7,5,6,9,8,5,…  
and not 7,0,8,2,3,9,1,5

[Previous page](https://discourse.processing.org/t/text-randomizer/23509.md?page=1)
