Different values for position when rotating around a circle

Processing Coding Questions
1

Hello, I was refactoring some old code and I noticed a problem with this sketch. It starts getting weird when there are 7 or 11, 13 (ad so on…) values in the array. I’m sure that’s because there are floating variables but I tried to round them, converting to int etc… but wasn’t able to solve the issues. Any help would be much appreciated.

int lineLength = 300;
int[] values = new int[0];
int[] val = new int[0];

void setup() {
  size(800, 800);
  pixelDensity(2);
  values = append(values, int(random(100)));
  val = append(val, int(random(100)));
}

void draw() {
  background(50);

  pushMatrix();
  translate(width/2, height/2);
  rotate(radians(180)); // rotate everything to put the first value at the top - center.

  // DRAW GUI
  float intraLineAngle = 360/values.length;
  float angleInRadians = radians(intraLineAngle);

  noFill();
  stroke(150, 50);
  for (int i = 10; i <= 100; i += 10) {
    float diam  = map(i, 0, 100, 0, lineLength*2);
    ellipse(0, 0, diam, diam);
  }
  stroke(150); 
  for (int i = 0; i < values.length; i++) {
    float posx = lineLength * sin(i*angleInRadians);
    float posy = lineLength * cos(i*angleInRadians);
    line(0, 0, posx, posy);
    fill(255);
  }
  // DRAW FIRST CHART
  beginShape();
  for (int i=0; i < values.length; i++) {
    float posx = map(values[i], 0, 100, 0, lineLength) * sin(i*angleInRadians);
    float posy = map(values[i], 0, 100, 0, lineLength) * cos(i*angleInRadians);
    fill(255, 0, 0, 50);
    stroke(255, 0, 0);
    vertex(-posx, posy); // -pos to rotate correctly clockwise
  }
  endShape(CLOSE);
  popMatrix();
}

void mouseClicked() {
  values = append(values, int(random(100)));
  val = append(val, int(random(100)));
}
1 Like
2

Imo for x you use cos and for y sin

3

Hi @Chrisir thanks, I didn’t notice that. Anyway, I changed sin to cos and viceversa but the issue is still there

4

It could be rounding errors

Try to make those to float and don’t use int() with random

5

I changed the code as this:

int lineLength = 300;
float[] values = new float[0];
float[] val = new float[0];

void setup() {
  size(800, 800);
  pixelDensity(2);
  values = append(values, random(100));
  val = append(val, random(100));
}

void draw() {

  background(50);

  pushMatrix();
  translate(width/2, height/2);
  rotate(radians(-90)); // rotate everything to put the first value at the top - center.

  // DRAW GUI
  float intraLineAngle = 360/values.length;
  float angleInRadians = radians(intraLineAngle);

  noFill();
  stroke(150, 50);
  for (int i = 10; i <= 100; i += 10) {
    float diam  = map(i, 0, 100, 0, lineLength*2);
    ellipse(0, 0, diam, diam);
  }
  stroke(150); 
  for (int i = 0; i < values.length; i++) {
    float posx = lineLength * cos(i*angleInRadians);
    float posy = lineLength * sin(i*angleInRadians);
    line(0, 0, posx, posy);
    fill(255);
  }
  // DRAW FIRST CHART
  beginShape();
  for (int i=0; i < values.length; i++) {
    float posx = map(values[i], 0, 100, 0, lineLength) * cos(i*angleInRadians);
    float posy = map(values[i], 0, 100, 0, lineLength) * sin(i*angleInRadians);
    fill(255, 0, 0, 50);
    stroke(255, 0, 0);
    vertex(posx, -posy); // -pos to rotate correctly clockwise
  }
  endShape(CLOSE);
  popMatrix();
  fill(255);
  text(values.length, 100, 100);  
  noFill();
}

void mouseClicked() {
  values = append(values, random(100));
  val = append(val, random(100));
}

But it doesn’t seem to work. I think it’s a rounding error that need to be addressed in the map of the values xpos and ypos but, as I said, I tried round(), int() etc… but the problem persists.

1 Like
6

This looks suspicious

Shouldn’t you multiply by i before converting to radians?

7

here:

use 360.0 instead of 360

float intraLineAngle = 360.0/values.length; // use 360.0 instead of 360

(reason: when no value is float on the right side of the = sign (360 and values.length are both integer), but integer values, Java tends to make the result integer as well (casting) iirc. Hence when 360 is not divisible by values.length, the numbers of lines are too small, because they get rounded)

AND I used radians(i*intraLineAngle) instead

Chrisir

full sketch :

int lineLength = 300;
float[] values = new float[0];
float[] val = new float[0];

void setup() {
  size(800, 800);
  pixelDensity(2);
  values = append(values, random(100));
  val = append(val, random(100));
}

void draw() {

  background(50);

  pushMatrix();
  translate(width/2, height/2);
  rotate(radians(-90)); // rotate everything to put the first value at the top - center.

  // DRAW GUI
  float intraLineAngle = 360.0/values.length; // use 360.0 instead of 360 
  //float angleInRadians = radians(intraLineAngle);

  noFill();
  stroke(150, 50);
  for (int i = 10; i <= 100; i += 10) {
    float diam  = map(i, 0, 100, 0, lineLength*2);
    ellipse(0, 0, diam, diam);
  }
  stroke(150); 
  for (int i = 0; i < values.length; i++) {
    float posx = lineLength * cos(radians(i*intraLineAngle));
    float posy = lineLength * sin(radians(i*intraLineAngle));
    line(0, 0, posx, posy);
    fill(255);
  }

  // DRAW FIRST CHART
  beginShape();
  for (int i=0; i < values.length; i++) {
    float posx = map(values[i], 0, 100, 0, lineLength) * cos(radians(i*intraLineAngle));
    float posy = map(values[i], 0, 100, 0, lineLength) * sin(radians(i*intraLineAngle));
    fill(255, 0, 0, 50);
    stroke(255, 0, 0);
    vertex(posx, -posy); // -pos to rotate correctly clockwise
  }
  endShape(CLOSE);
  popMatrix();

  fill(255);
  text(values.length, 100, 100);  
  noFill();
}

void mouseClicked() {
  values = append(values, random(100));
  val = append(val, random(100));
}
3 Likes
8

Thank you very much! This seems to work perfectly

1 Like
9

You are most welcome!

Chrisir

1 Like