Text Randomizer

[glv]

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/

:)

[Rohitsharma]

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

Here is the code: what do you guys think ?

Thank you again!!

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


  }

}

[glv]

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!

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

:)

[Rohitsharma]

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.

[Hyperion65]

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:

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

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

[Rohitsharma]

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.

[Rohitsharma]

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.

[Hyperion65]

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

[Rohitsharma]

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!!

[Hyperion65]

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