# 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:** 20\
**Page:** 1

<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 26, 2020, 8:10pm UTC](https://discourse.processing.org/t/text-randomizer/23509/1 "2020-08-26T20:10:47Z")

</div>

Hello,

I am trying to write a text randomizer. The idea is to put individual letters of ‘ATOMS’ into the grid. There is a specific grid that I have created and I want Individual letters of the word ‘ATOMS’ to sit in random places on the grid on mouse cl. (Image attached) without being repeated.

I have tried putting them in an array but somehow it doesn’t seem to work.

Thank you.

Here is the [code:](https://editor.p5js.org/Rohit/sketches/aiKTlxbe7)

```auto
var letters = ["A", "T", "O", "M", "S"];

var rows = 5;
var columns = 5;

var randomColor;
var randomText;

//variables for steps
var stepX;
var stepY;

function setup() {

  createCanvas(600, 600);

  background(255);

  rectMode(CORNER);

  //noStroke();

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

  noLoop();

}

function draw() {

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

      //putting the text in
      textSize(72);
      fill(255);
      text(letters[0], i * stepX, j * stepY);
      text(letters[1], 200, 200);
      text(letters[2], 100, 300);
      text(letters[3], 300, 200);
      text(letters[4], 300, 300);

      randomColor = color(random(255));
      fill(randomColor);
      noStroke();
      rect(i * stepX, j * stepY, stepX, stepY);

    }
  }
}

```

 ![Untitled_Artwork](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/31cc061d0ad696d17b024f7aa1551034388e3a34.jpeg)

---

<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 26, 2020, 8:15pm UTC](https://discourse.processing.org/t/text-randomizer/23509/2 "2020-08-26T20:15:59Z")

</div>

Hello,

My initial thoughts…  
[https://processing.org/reference/StringList.html](https://processing.org/reference/StringList.html)  
[https://processing.org/reference/StringList\_shuffle\_.html](https://processing.org/reference/StringList_shuffle_.html)

`:)`

---

<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 28, 2020, 3:24am UTC](https://discourse.processing.org/t/text-randomizer/23509/3 "2020-08-28T03:24:39Z")

</div>

hello,  
i don’t think that your problem is the array.  
it looks like you are writing the ‘A’ into every field of the grid  
i = 0, j = 0 -\> text(letters[0], i \* stepX, j \* stepY); will become text(“A”, 0,0);  
0 1 -\> A, 120,120  
0 2 -\> A 120, 140  
and so on…

then you put all the other letters always into the same place

if you want to place the letters randomly, shouldn’t you use a random value ?

like:

```auto
for (var i = 0; i < columns; i++) {
text (letter[I], random(5)*stepX, random(5)*stepY);
}

```

(maybe using int() to get correct integer values - im not good in p5js)  
the next step would be to prevent letters from being put into a place that already has one  
another thing probably to have the word still readable…

or maybe you want them horizontally OR vertically arranged.  
so you could randomly put A only in the first column or row, T in the next and so on…

---

<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 28, 2020, 1:51pm UTC](https://discourse.processing.org/t/text-randomizer/23509/4 "2020-08-28T13:51:25Z")

</div>

> [@Hyperion65](#):
>
> ```auto
> for (var i = 0; i < columns; i++) {
> text (letter[I], random(5)*stepX, random(5)*stepY);
> }
> 
> ```

Thank you!! I am new to P5js as well. I have tried your code and tweaked it a bit. it seems to work, but how to get them sit in the specified grid? and randomly generate the positions.

Right now I have tried to make them displace horizontally.

Here is the code: [https://editor.p5js.org/Rohit/sketches/aiKTlxbe7](https://editor.p5js.org/Rohit/sketches/aiKTlxbe7)

```auto
var letters = ["A", "T", "O", "M", "S"];

var rows = 5;
var columns = 5;

var randomColor;
var randomText;

//variables for steps
var stepX;
var stepY;

function setup() {

  createCanvas(600, 600);

  background(255);

  rectMode(CORNER);

  //noStroke();

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

  //noLoop();

}

function draw() {
  textSize(72);

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

      //Text

      //rows
      //fill(0);

      // horizontal displacement only 

      text(letters[0], random(5) * stepX, stepY - 30);
      text(letters[1], random(5) * stepX, stepY + 80);
      text(letters[2], random(5) * stepX, stepY + 200);
      text(letters[3], random(5) * stepX, stepY + 320);
      text(letters[4], random(5) * stepX, stepY + 440);

      //Grid

      //noStroke();
      noFill();
      rect(i * stepX, j * stepY, stepX, stepY);
    }
  }

}

```

---

<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 28, 2020, 2:58pm UTC](https://discourse.processing.org/t/text-randomizer/23509/5 "2020-08-28T14:58:39Z")

</div>

1st I think you do not need to call textSize() in draw(), im used to processing and there using fill() etc. is usually thought to cost relatively much cpu.

2nd stepX is the width divided by the number of fields. but you want to put the “T” in the middle of the axis. so the first step should be 1/2 step, adding stepX fully for the rest of the columns.

so saying:

```auto
stepX = width/columns;
...
var thisStepX = stepX/2 + i*stepX;
var thisStepY = stepY/2 + i*stepY;

text(letters[i], thisStepX, thisStepY);

```

should put the letters diagonally.

now you can replace I or j by a random number -\> every letter can be everywhere  
or only make j random -\> each column gets a letter at a random place from the rows

I think you will not need two nested loops then: looping through the columns you place 1 letter in each row randomly with random(rows)

also, by putting noFill() inside the end of the inner (j) loop, you will not see more than the first letter 😃 you should put a fill(0) in front of the text

---

<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 28, 2020, 3:33pm UTC](https://discourse.processing.org/t/text-randomizer/23509/6 "2020-08-28T15:33:43Z")

</div>

I provided a JAVA Processing reference before!

Here is a P5.js reference:  
[https://p5js.org/reference/#/p5/shuffle](https://p5js.org/reference/#/p5/shuffle)

Busy at work wish I had time to try this!

`:)`

---

<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 28, 2020, 8:27pm UTC](https://discourse.processing.org/t/text-randomizer/23509/7 "2020-08-28T20:27:25Z")

</div>

Thank you so much. This seems to solve the problem of positioning. I have simplified the grid a bit to get a better understanding.  
Just need to figure out the randomization bit.

Revised Code here: [Code](https://editor.p5js.org/Rohit/sketches/SBo4u0VYF)

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

var rows = 3;
var columns = 3;

//variables for steps

function setup() {

  createCanvas(600, 600);

  background(255);

  rectMode(CORNER);

  //noStroke();

  stepX = width / columns;

  stepY = height / rows;

}

function draw() {
  textSize(150);

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

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

    textAlign(CENTER, CENTER);
    //text(letters[i], thisStepX, thisStepY);
    
    //first row
    text(letters[i], thisStepX, thisStepY);
    text(letters[i], thisStepX + stepX, thisStepY);
    text(letters[i], thisStepX + 2 * stepX, thisStepY);
    
    //Second row
   text(letters[i], thisStepX, thisStepY + stepY);
   text(letters[i], thisStepX + stepX, thisStepY + stepY);
   text(letters[i], thisStepX + 2* stepX, thisStepY + stepY);

    //Third row
    text(letters[i], thisStepX, thisStepY + 2* stepY);
   text(letters[i], thisStepX + stepX, thisStepY + 2 * stepY);
   text(letters[i], thisStepX + 2* stepX, thisStepY + 2 * stepY);

    for (var j = 0; j < rows; j++) {
      noFill();
    

      //Grid

      //noStroke();
      noFill();
      rect(i * stepX, j * stepY, stepX, 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 28, 2020, 8:32pm UTC](https://discourse.processing.org/t/text-randomizer/23509/8 "2020-08-28T20:32:39Z")

</div>

Thank you for the reference. I am trying that in processing side by side. Thank you for your help 🙂

---

<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 28, 2020, 9:14pm UTC](https://discourse.processing.org/t/text-randomizer/23509/9 "2020-08-28T21:14:36Z")

</div>

The shuffle works great!

I am confident you can do this!  
Ask if you need help.

I tried and it was a success in Processing.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/aa488d21758252a40d8c79bf251f9bb843072305.png)

Thinking of cool things now to do with this!

`:)`

---

<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 28, 2020, 9:24pm UTC](https://discourse.processing.org/t/text-randomizer/23509/10 "2020-08-28T21:24:42Z")

</div>

![Screenshot 2020-08-28 at 9.25.31 pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/84496dbca46458a017fd2c4af1a0db0c1ceae148.png)

That is great!  
I have tried this. it is somewhat working but still not there. , but i want just the three word to appear at a time. Here is the link to the code.  
Link: [[https://editor.p5js.org/Rohit/sketches/SBo4u0VYF](https://editor.p5js.org/Rohit/sketches/SBo4u0VYF)]

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

    var thisStepX = stepX / 2 + i * stepX;
    var thisStepY = stepY / 2 + i * stepY;
    
    //defining the random attributes to the letters
  var rand = round(random(letters.length -1));
  var TheCollective = letters[rand];

    textAlign(CENTER, CENTER);
    //text(letters[i], thisStepX, thisStepY);

    //first row
    text(TheCollective, thisStepX, thisStepY);
    text(TheCollective, thisStepX + stepX, thisStepY);
    text(TheCollective, thisStepX + 2 * stepX, thisStepY);

    //Second row
    text(TheCollective, thisStepX, thisStepY + stepY);
    text(TheCollective, thisStepX + stepX, thisStepY + stepY);
    text(TheCollective, thisStepX + 2 * stepX, thisStepY + stepY);

    //Third row
    text(TheCollective, thisStepX, thisStepY + 2 * stepY);
    text(TheCollective, thisStepX + stepX, thisStepY + 2 * stepY);
    text(TheCollective, thisStepX + 2 * stepX, thisStepY + 2 * stepY);

    for (var j = 0; j < rows; j++) {
      noFill();

      //Grid

      //noStroke();
      noFill();
      rect(i * stepX, j * stepY, stepX, stepY);
    }
  }

```

how did you do it? Please advise.

---

<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 28, 2020, 9:29pm UTC](https://discourse.processing.org/t/text-randomizer/23509/11 "2020-08-28T21:29:52Z")

</div>

I have tried this in processing, the grid works but i just want the specific word to show and and the rest of the grid should stay empty.

---

<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 28, 2020, 9:32pm UTC](https://discourse.processing.org/t/text-randomizer/23509/12 "2020-08-28T21:32:26Z")

</div>

Hello,

This is what I did:

- Filled an array with all spaces for entire grid.
- Filled the first few elements with characters from a word
- Shuffled
- And then took the elements of the array and displayed them in a grid.

I got the shuffle working first and then focused on the grid.

`:)`

---

<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 28, 2020, 9:42pm UTC](https://discourse.processing.org/t/text-randomizer/23509/13 "2020-08-28T21:42:49Z")

</div>

Did you specify an array size? like a 5x5 grid in your screenshot?

---

<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 28, 2020, 9:44pm UTC](https://discourse.processing.org/t/text-randomizer/23509/14 "2020-08-28T21:44:25Z")

</div>

Try this in a loop:  
[https://p5js.org/reference/#/p5/append](https://p5js.org/reference/#/p5/append)

I used append in String List in Processing Java.

Work on a little snippet of code just to fill array and then add characters and then shuffle and then place them in a grid.

My array is the size of the grid row\*col.

Checking out for now.

Keep at it.

`:)`

---

<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 28, 2020, 9:49pm UTC](https://discourse.processing.org/t/text-randomizer/23509/15 "2020-08-28T21:49:52Z")

</div>

Thank you again, I am going to have a go at it!! 🙂

---

<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 28, 2020, 10:23pm UTC](https://discourse.processing.org/t/text-randomizer/23509/16 "2020-08-28T22:23:58Z")

</div>

I think @glv 's idea of shuffling is also interesting. but maybe it will give you less control of recognizing the word. I also notice that you still use **two** nested loops and I do not think that you need it, since your idea of iterating over each column will give a more readable result than pure randomness…

you should walk through your code step by step to see what happens in each loop.

i think:  
**step 1:** walk through each row from 0 to n (5 in your example.)  
that would be the loop you need -\> for (int i = 0; i \< n; I++);  
0 = first row, 1 = second, …, n = last row

**step 2:** create a random number between 0 to n (5 in your example)  
**find a position for the nth letter in the nth row** -\>  
if you are at i = 0 in your **single loop** , it will put the first letter into the first row

`text (letter[i], stepX/2 + i * stepX, stepY/2 + i * stepY);`  
-\> this would put each character into one field further than the next, creating a diagonal word

```auto
var r = random(n);
text (letter[i], stepX/2 + r * stepX, stepY/2 + i * stepY);

```

-\> this will put each letter (because i is growing by 1 each cycle)  
into the next row (because of i \* stepY), but into a random position in that column (because of r \* stepX)

if you switch r and i it would switch rows and columns  
`text (letter[i], stepX/2 + i * stepX, stepY/2 + r * stepY);`

if you use r both times it would be completely random (but two characters could land in the same spot)

---

<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 28, 2020, 10:59pm UTC](https://discourse.processing.org/t/text-randomizer/23509/17 "2020-08-28T22:59:24Z")

</div>

Hello,

Take a look at this:  
[https://processing.org/tutorials/pixels/](https://processing.org/tutorials/pixels/)

The pixels for an image (which is a grid) are stored in a long one-dimensional array and restored to a grid.

This may give you some insight.

`:)`

---

<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, 11:20am UTC](https://discourse.processing.org/t/text-randomizer/23509/18 "2020-08-29T11:20:46Z")

</div>

> [@Hyperion65](#):
>
> ```auto
> var r = random(n);
> text (letter[i], stepX/2 + r * stepX, stepY/2 + i * stepY);
> 
> ```

Thank you so much. I have tried this, but it was giving me a float value. I have rounded it and now it is across the rows. 🤔 🤔

here is the code:

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

var rows = 3;
var columns = 3;

//variables for steps

function setup() {

  createCanvas(600, 600);

  background(255);

  rectMode(CORNER);

  //noStroke();

  stepX = width / columns;

  stepY = height / rows;

}

function draw() {
  textSize(150);

    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;

    textAlign(CENTER, CENTER);
    //text(letters[i], thisStepX, thisStepY);

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

    }

}

```

---

<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, 12:42pm UTC](https://discourse.processing.org/t/text-randomizer/23509/19 "2020-08-29T12:42:32Z")

</div>

Give this some thought:

```auto
  let k = 0;  
  for (var i = 0; i < columns; i++) 
    {
    for (var j = 0; j < rows; j++) 
      {
      noFill();
      rect(i * stepX, j * stepY, stepX, stepY);
      
      fill(255, 0, 0);
      circle(i * stepX, j * stepY, 20);
      print(i, j, k);
      k++;  
      }

```

print() is useful for seeing what happens at each step.

`:)`

---

<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, 1:43pm UTC](https://discourse.processing.org/t/text-randomizer/23509/20 "2020-08-29T13:43:47Z")

</div>

> [@glv](#):
>
> I have tried this. the print function does seem to show that it cycles through random between (0-2) and outputs the bits onto the screen.
> 
> ```auto
> fill(255, 0, 0);
> circle(i * stepX, j * stepY, 20);
> print(i, j, k);
> k++;  
> 
> ```

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

var rows = 3;
var columns = 3;

//variables for steps

function setup() {

  createCanvas(600, 600);

  background(255);

  rectMode(CORNER);

  //noStroke();

  stepX = width / columns;

  stepY = height / rows;

}

function draw() {
  textSize(150);

    textAlign(CENTER, CENTER);
    //text(letters[i], thisStepX, thisStepY);
   let k = 0;
  
  
    for (var i = 0; i < 3; i++) {
    //for loop to iterate rows

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

    textAlign(CENTER, CENTER);
    //text(letters[i], thisStepX, thisStepY);

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

 //Grid

    for (var j = 0; j < rows; j++) {
      noFill();
  
      //noStroke();
      noFill();
      rect(i * stepX, j * stepY, stepX, stepY);
      
      stroke(0);
      ellipseMode(CORNER);
      circle(i * stepX, j * stepY, stepX);
      print(i, j, k);
     
    }
  }

}

```

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