# Cloud of random letters

**URL:** <https://discourse.processing.org/t/cloud-of-random-letters/39837>\
**Category:** Coding Questions\
**Created:** [November 23, 2022, 5:02pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837 "2022-11-23T17:02:51Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 23, 2022, 5:02pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/1 "2022-11-23T17:02:51Z")

</div>

Hi there

I have done this chart with letters but what I really want yo do its a cloud with hundred of letters disorganized around the screen. How could I do something like that?

Thanks

```auto
size(1000,1000);
background(255);

for (int x = 0; x < 1000; x += 30) {
for (int y = 0; y < 1000; y += 30) {

char c = 33;
c += random(93);

fill(random(256), random(256), random(256)); 
textSize(28);
text(c,x,y); 

} 

}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 23, 2022, 5:46pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/2 "2022-11-23T17:46:52Z")

</div>

Hi @humano,

Maybe you can combine it with circle packing algorithm and put the characters into the circles with different sizes corresponding to the circle sizes.

> **[Circle Packing](https://thecodingtrain.com/challenges/50-animated-circle-packing/)**
>
> In this multi-part coding challenge, I demonstrate how to use a circle packing algorithm.

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [November 23, 2022, 6:39pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/3 "2022-11-23T18:39:44Z")

</div>

Hi

Play with this

[![](https://img.youtube.com/vi/NLzne4XaR3M/hqdefault.jpg "13.1 Strings and Drawing Text - Processing Tutorial") ](https://www.youtube.com/watch?v=NLzne4XaR3M&t=614s)

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 23, 2022, 8:29pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/4 "2022-11-23T20:29:41Z")

</div>

Thanks , but I was thinking about something much easier, like

```auto
size(1000,1000);
 
 for(int i=0; i<30; i = i + 1){
 float x1 = random(width);
 float y1 = random(height);
 strokeWeight(30);
 fill(random(255),random(255),random(255));
 point (x1,y1); 
 }

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 23, 2022, 8:40pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/5 "2022-11-23T20:40:49Z")

</div>

> [@humano](#):
>
> ```auto
> char c = 33;
> c += random(93);
> 
> ```

You can insert these lines into the last Sketch!

And then use text(c, …

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 23, 2022, 9:26pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/6 "2022-11-23T21:26:06Z")

</div>

Perfecto! Si I have something like that, that is near of what I have on my mind, but I am looking for something less homogenic

```auto

size(1000,1000);
background(255);

size(1000,1000);
 
 for(int i=0; i<200; i = i + 1){
 float x1 = random(width);
 float y1 = random(height);

 
 char c = 33;
 c += random(93);

 fill(random(256), random(256), random(256)); 
 //textSize(28);
 text(c,x1,y1); 
 if(random(1)>0.5) { 
   textSize(random(20,40)); 
   } 
   else{ 
     strokeWeight(10); 
   } 
 }

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 23, 2022, 9:32pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/7 "2022-11-23T21:32:14Z")

</div>

I would like to achieve a distribution like this

 ![5e7f8273682891bfa7758eed4b831d00](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/d/7d2c403f7ed938085346304cf78e34d8371bcdb5.jpeg)

So I have tried with this code but I don’t know how to make distribution more heterogéneos everywhere on the screen

```auto
float u = 0;
float v = 0;
float w = 0;
size(1000,1000);
background(255);

for (int x = 0; x < 1000; x += 30) {
for (int y = 0; y < 1000; y += 30) {
u = u + 0.1;
v = v + 0.11;
w = w + 0.1;
float n = noise(u) * width;
float m = noise(v) * width;
float l = noise(x/100.0,y/100.0)*10;
strokeWeight(l);
//translate(600,600);
//rotate(PI/2.0);

char c = 33;
 c += random(93);

fill(random(256), random(256), random(256)); 

 text(c,n,m); 
 if(random(1)>0.5) { 
   textSize(random(20,40)); 
   } 
   else{ 
     strokeWeight(10); 
  } 

 } 
 }

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 23, 2022, 10:16pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/8 "2022-11-23T22:16:47Z")

</div>

I have no idea

sry

Chrisir

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 23, 2022, 10:54pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/9 "2022-11-23T22:54:53Z")

</div>

Changing the x and y increase inside the loop I can get some interesting effect, but how could I fill all the screen with letters?

```auto
float u = 0;
float v = 0;
size(1000,1000);
background(255);

for (int x = 0; x < 1000; x += 30) {
for (int y = 0; y < 1000; y += 90) {
u = u + 0.1;
v = v + 0.11;
float n = noise(u) * width;
float m = noise(v) * width;

//translate(600,600);
//rotate(PI/2.0);

char c = 33;
 c += random(93);

fill(random(256), random(256), random(256)); 

 text(c,n,m); 
 if(random(1)>0.5) { 
   textSize(random(20,40)); 
   } 
   else{ 
     strokeWeight(10); 
  } 

 } 
 }

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [November 23, 2022, 11:19pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/10 "2022-11-23T23:19:57Z")

</div>

> **[Random text - Processing Forum](https://forum.processing.org/one/topic/random-text.html)**
>
> Processing Forum

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [November 23, 2022, 11:28pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/11 "2022-11-23T23:28:38Z")

</div>

> [@humano](#):
>
> but how could I fill all the screen with letters?

I think @mnse ‘s suggestion is a good place to start if you’re looking for an all-over distribution.  
And then to achieve the overlapping and density use the createGraphics function to create multiple layers.  
🤓

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 23, 2022, 11:29pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/12 "2022-11-23T23:29:02Z")

</div>

Thanks but I think that example does not work on a Code with noise

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [November 23, 2022, 11:32pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/13 "2022-11-23T23:32:16Z")

</div>

And you are using noise because….? 😀  
I ask bc there may be another approach that allows you more control to achieve the results you want.  
🤓

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 23, 2022, 11:34pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/14 "2022-11-23T23:34:22Z")

</div>

Random position is so homogeneous

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [November 23, 2022, 11:41pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/15 "2022-11-23T23:41:09Z")

</div>

> [@humano](#):
>
> homogeneous

Just for clarity what do you mean by homogeneous?  
The example you showed has basically an all over distribution.  
With the exception of two lighter areas.  
You could also use probability to target areas that you want your letterforms to appear as well.

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 23, 2022, 11:48pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/16 "2022-11-23T23:48:15Z")

</div>

What I mean is that letters are on the center on the screen and I am trying to create letters beyond límites, as you can ser on that sketch

 ![Screenshot_2022-11-23-19-43-48-355-edit_com.calsignlabs.apde.sketchpreview](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/d/cd6bf8aeff6b3994f852a45518803e3452ec08f3.jpeg)

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [November 23, 2022, 11:59pm UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/17 "2022-11-23T23:59:22Z")

</div>

Ok.  
And I think I understand why you might use noise.  
However, I also think using noise limits your options and potentially closes other avenues worth exploring.  
Like I said before, consider @mnse 's circle packing approach as step one.  
Then using createGraphics, you can stack layers and control the all-over density.  
🤓

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 24, 2022, 12:26am UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/18 "2022-11-24T00:26:11Z")

</div>

I Will try to explore that, but I really don’t know if I Will able to understand It with my level. I am starting to use noise and as I beguinner I can not do all the things that I want, but I guess that make that cloud bigger has to be possible. Maybe is too much for this topic, but I Will try to make another tomorrow focused on that.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 24, 2022, 8:22am UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/19 "2022-11-24T08:22:17Z")

</div>

Apart from your other thread:

I can imagine a work-around where you have different islands of letters

The islands overlap and are of different size on the canvas

Each island has letters in a circle

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 24, 2022, 8:45am UTC](https://discourse.processing.org/t/cloud-of-random-letters/39837/20 "2022-11-24T08:45:20Z")

</div>

Hi,

If you think the circle mapping is too advanced you can just do this here

> [@humano](#):
>
> ```auto
> //float n = noise(u) * width;
> //float m = noise(v) * width;
> 
> // scaling value to a larger rectangular area
> float n = width/2+(noise(u)-0.5) * width*2.;
> float m = height/2+(noise(v)-0.5) * height*2.;
> 
> ```

Cheers  
— mnse