# How to make shapes out of characters using loop?

**URL:** <https://discourse.processing.org/t/how-to-make-shapes-out-of-characters-using-loop/5134>\
**Category:** Coding Questions\
**Created:** [November 2, 2018, 10:33pm UTC](https://discourse.processing.org/t/how-to-make-shapes-out-of-characters-using-loop/5134 "2018-11-02T22:33:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rollbon](https://avatars.discourse-cdn.com/v4/letter/r/4af34b/32.png) [@rollbon](https://discourse.processing.org/u/rollbon)\
**Post date:** [November 2, 2018, 10:33pm UTC](https://discourse.processing.org/t/how-to-make-shapes-out-of-characters-using-loop/5134/1 "2018-11-02T22:33:10Z")

</div>

I am trying to make a circle that is made out of English Alphabet. I made a String that included the entire alphabet and I tried creating the circle using each character from the string individually using ‘for’ command (loop) but it didn’t work out for me.

I made a small example of what I am trying to create but this time I created the code without using a loop, I only created a small part of the circle since I didn’t want the code to get too repetitive and long for you to read. Can someone help me solve this?

```auto
int cx;
int cy;
float x;
float y;
int character;
float angle;
int radius;
String message;

void setup(){
  size(750,750);
}

void draw(){
  background(0);
  cx = width/2;
  cy = height/2;
  radius = 300;
  message = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; //26 chars
  
  textSize(30);
  character = 0;
  x = cx + cos(radians(angle)) * radius;
  y = cy + sin(radians(angle)) * radius;
  text(message.charAt(character),x,y);
  
  character = 1;
  x = cx + cos(radians(angle+14)) * radius; 
  y = cy + sin(radians(angle+14)) * radius; 
  text(message.charAt(character),x,y);
  
  character = 2;
  x = cx + cos(radians(angle+28)) * radius;
  y = cy + sin(radians(angle+28)) * radius;
  text(message.charAt(character),x,y);
  
  character = 3;
  x = cx + cos(radians(angle+42)) * radius;
  y = cy + sin(radians(angle+42)) * radius;
  text(message.charAt(character),x,y);
  
  character = 5;
  x = cx + cos(radians(angle+56)) * radius;
  y = cy + sin(radians(angle+56)) * radius;
  text(message.charAt(character),x,y);
  
  character = 6;
  x = cx + cos(radians(angle+70)) * radius;
  y = cy + sin(radians(angle+70)) * radius;
  text(message.charAt(character),x,y);
  
  character = 7;
  x = cx + cos(radians(angle+84)) * radius;
  y = cy + sin(radians(angle+84)) * radius;
  text(message.charAt(character),x,y);
  
  character = 8;
  x = cx + cos(radians(angle+98)) * radius;
  y = cy + sin(radians(angle+98)) * radius;
  text(message.charAt(character),x,y);
}

```

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [November 2, 2018, 11:07pm UTC](https://discourse.processing.org/t/how-to-make-shapes-out-of-characters-using-loop/5134/2 "2018-11-02T23:07:22Z")

</div>

Are you asking how to us a `for` loop to cut down on the repetition in your code?

Using a `for` loop is all about noticing a pattern. For example, you could start by making a table:

| character | angle |
| --- | --- |
| 0 | angle + 0 |
| 1 | angle + 14 |
| 2 | angle + 28 |

Hopefully you notice a pattern, and if not, I recommend filling out more of the table.

Anyway, once you notice a pattern, you can create a `for` loop that iterates over that pattern and some arithmetic that uses it. Here’s an example:

```auto
  for (int character = 0; character < 10; character++) {
    x = cx + cos(radians(angle + 14 * character)) * radius;
    y = cy + sin(radians(angle + 14 * character)) * radius;
    text(message.charAt(character), x, y);
  }

```

Shameless self-promotion: here is a tutorial on using `for` loops in Processing:

> **[For loops](https://happycoding.io/tutorials/processing/for-loops)**
>
> Learn how to use for loops in Processing.