How to make shapes out of characters using loop?

Processing Coding Questions
1

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?

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);
}
1 Like
2

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:

  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:

4 Likes