Arrange many lines around a circle

injuvik

Hi Coders!

I want to arrange many lines around a circle in Processing. The amount of lines shall be controlled by the mouseX-position. But i struggle with that:

1. I want the lines to be arranged around the circle properly. The angle/gap between the lines shall be equal. But there's a gap between the first and the last line.

2. I try to get familiar with the map()-function but it does not work.

Thank you guys!!!!

Here's my code:

int a;

void setup () {
  size(540, 540);
  background(#222222);
  stroke(#dddddd);
  noFill();
}

void draw() {
  a = mouseX;
  map(a,0,width,0,100);
  background(#222222);
  translate(width/2, height/2);
  ellipse(0,0,100,100);
  for (int i = 0; i < a; i++) {
    rotate(radians(360/a)); 
    line(50, 0, 200, 0);
  }
  println(a);
}

quark

Two problems here.

Problem 1: line 11 is wasted because you can use mouseX directly so delete it.

Problem 2: the line 12 does NOT modify the variable a rather it returns a floating point number which must be assigned to a variable. So change line 12 to
a = int(map(mouseX,0,width,0,100));

Problem 3: In line 17 360/a does an integer division so when a = 100 it returns 3 not 3.6 change this line to
rotate(radians(360.0/a));
because 360.0 is a float it will force a floating point division.

injuvik

Beautiful! Works perfect! Thanx!

blindfish

@quark said:

Problem 3: In line 17 360/a does an integer division so when a = 100 it returns 3 not 3.6 change this line to rotate(radians(360.0/a));

Or instead of converting 360 to radians why not just apply the calculation to the radians equivalent directly: TWO_PI

The definition in the reference is a little too technical for my liking and could make it clearer that it's equivalent to 360 degrees ;)

Chrisir

or with sin cos

int  a;

void setup () {
  size(540, 540);
  background(#222222);
  stroke(#dddddd);
  noFill();
}

void draw() {
  // a = mouseX;

  background(#222222);

  pushMatrix();
  translate(width/2, height/2);
  ellipse(0, 0, 100, 100);
  popMatrix();

  a = int(map(mouseX, 0, width, 0, 100));

  for (int i = 0; i < a; i++) {

    // rotate(radians(360.0/a));

    float angle;
    if (a*i==0)
      angle  =  radians(360.0);
    else 
      angle  =  radians(360.0/a*i); 

    float x1 = width/2  + 50 * cos(angle); 
    float y1 = height/2 + 50 * sin(angle);

    float x2 = width/2  + 110 * cos(angle); 
    float y2 = height/2 + 110 * sin(angle);

    line(x1, y1, x2, y2);
  }
  println(a);
}

Chrisir

ArrayList<Line> lines = new ArrayList();
float value=0;

void setup () {
  size(540, 540);
  background(#222222);
} // func

void draw() {
  background(#222222);
  // just some decoration
  decoration();
  // loop over all lines 
  for (Line currentLine : lines) {
    currentLine.display();
  } // for
} // func

// --------------------------------------

void decoration() {
  // just some decoration
  noFill(); // white ellipse 
  stroke(255);
  ellipse(width/2, height/2, 100, 100);

  fill(222, 222, 2); // yellow rect 
  noStroke();  
  rect (0, height-50, width, 50);

  fill(0); // with text 
  textAlign(CENTER);
  text("move mouse here from left to right to change density", width/2, height-20);

  stroke(0); // and a line 
  line(value, height-52, 
  value, height-52+15);
} // func

void mouseMoved() {
  // mouse moved 
  // are we above the yellow rect? 
  if (mouseY<height-50) {
    // set the nearest line to red. 
    float minimalDistanceSoFar = 10000; 
    Line winner=null;
    // loop over all lines 
    for (Line currentLine : lines) {
      currentLine.over=false;
      float distanceAsSumFromBothPoints =  dist(mouseX, mouseY, currentLine.x1, currentLine.y1) +
        dist(mouseX, mouseY, currentLine.x2, currentLine.y2);  
      if (distanceAsSumFromBothPoints<minimalDistanceSoFar &&
        distanceAsSumFromBothPoints<=dist(currentLine.x1, currentLine.y1, currentLine.x2, currentLine.y2)+20) {
        minimalDistanceSoFar=distanceAsSumFromBothPoints;
        winner=currentLine;
      }
    }
    if (winner!=null) {
      winner.over=true;
    }
  } else if (mouseY>height-50) { 
    // in the yellow rect we monitor the mouse
    // and make all lines new.
    // kill all lines first: 
    lines.clear();
    float steps = int(map(mouseX, 0, width, 0, 100));
    value=mouseX;

    for (int i = 0; i < steps; i++) {

      float angle;
      if (steps*i==0)
        angle  =  radians(360.0);
      else 
        angle  =  radians(360.0/steps*i); 

      float radius = 50;
      float x1 = width/2  + radius * cos(angle); 
      float y1 = height/2 + radius * sin(angle);

      radius = 110; 
      float x2 = width/2  + radius * cos(angle); 
      float y2 = height/2 + radius * sin(angle);

      // add new line 
      lines.add ( new Line (x1, y1, x2, y2, i ) );
    } // for
  } // else if
} // func 

// =======================================

class Line {

  float x1, y1;
  float x2, y2;
  int id;
  boolean over=false; // mouse over?
  //
  Line(float x1_, float y1_, 
  float x2_, float y2_, int id_) {
    x1= x1_;
    y1 = y1_;

    x2= x2_;
    y2=y2_;

    id = id_;
  }

  void display() {
    if (over) { 
      stroke(255, 2, 2); // red
      fill(255, 2, 2);
      text("id: "+id, 40, 40);
    } else {
      stroke(255);
    } // else 
    line(x1, y1, x2, y2);
  }
  //
} // class 
//