Text Randomizer

Rohitsharma · August 26, 2020, 8:10pm

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:

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);




    }
  }
}

glv · August 26, 2020, 8:15pm

Hello,

My initial thoughts…
https://processing.org/reference/StringList.html
https://processing.org/reference/StringList_shuffle_.html

:)

Hyperion65 · August 28, 2020, 3:24am

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:

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…

Rohitsharma · August 28, 2020, 1:51pm

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

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);
    }
  }

}

Hyperion65 · August 28, 2020, 2:58pm

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:

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

glv · August 28, 2020, 3:33pm

I provided a JAVA Processing reference before!

Here is a P5.js reference:
https://p5js.org/reference/#/p5/shuffle

Busy at work wish I had time to try this!

:)

Rohitsharma · August 28, 2020, 8:27pm

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

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);
    }
  }

}

Rohitsharma · August 28, 2020, 8:32pm

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

glv · August 28, 2020, 9:14pm

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.

Thinking of cool things now to do with this!

:)

Rohitsharma · August 28, 2020, 9:24pm

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]

  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.

Rohitsharma · August 28, 2020, 9:29pm

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.

glv · August 28, 2020, 9:32pm

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.

:)

Rohitsharma · August 28, 2020, 9:42pm

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

glv · August 28, 2020, 9:44pm

Try this in a loop:
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.

:)

Rohitsharma · August 28, 2020, 9:49pm

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

Hyperion65 · August 28, 2020, 10:23pm

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

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)

glv · August 28, 2020, 10:59pm

Hello,

Take a look at this:
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.

:)

Rohitsharma · August 29, 2020, 11:20am

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:

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);


    }

}

glv · August 29, 2020, 12:42pm

Give this some thought:

  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.

:)

Rohitsharma · August 29, 2020, 1:43pm

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.
fill(255, 0, 0);
      circle(i * stepX, j * stepY, 20);
      print(i, j, k);
      k++;  

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);
     
    }
  }

}

Topic		Replies	Views
Very new to processing - Working with Text Coding Questions	3	256	June 3, 2018
Random Text Generator (using stored text/data) Project Guidance	5	2141	January 10, 2020
Little Problem with the random function Coding Questions	2	314	February 6, 2019
Randomly distribute objects on grid Coding Questions	4	1652	December 23, 2019
Text Rain Processing Coding Questions homework	7	1395	April 17, 2019

Text Randomizer

Related topics