Adding a new shape in the orbit

[Kirrat]

Hi
i’m trying to make the shapes move in an orbit below whenever any of the shapes is clicked above. It’s pretty much happening if you run the code below. The problem is that when ever a new shape is clicked the previous shape vanishes. I want the new shape to be added into the orbit while the previous shape keeps orbiting and i don’t know how to do that. Please help.

int constant = 250;
float[] angle1 = new float[100];
int scalar = 100;
float speed = 0.05;
float[]  increment=new float[100];
int limit=0;
int limit1=0;
int limit2=0;
int limit3=0;
int limit4=0;
int num;
void setup() {
  size(1350, 450);
  smooth();
}
void mouseClicked()
{

  if ((mouseX>520) && (mouseX<550)&&(mouseY>28)&&(mouseY<53)) {
    num=1;
    limit1++;
  }
  if ((mouseX>588) && (mouseX<612)&&(mouseY>28)&&(mouseY<53)) {
    num=2;
    limit2++;
  }
  if ((mouseX>652) && (mouseX<686)&&(mouseY>28)&&(mouseY<53)) {
    num=3;
    limit3++;
  }
  if ((mouseX>720) && (mouseX<749)&&(mouseY>28)&&(mouseY<52)) {
    num=4;
    limit4++;
  }

  increment[limit] = random(1, 200);
  limit++;
}

void draw() {
  background(255);
  //Navigation Buttons
  noStroke();
  fill(255);
  ellipse(650, 250, 300, 295);
  noStroke();
  fill(224, 224, 224);
  ellipse(537, 41, 25, 24);
  noStroke();
  fill(224, 224, 224);
  rect(590, 31, 20, 20);
  noStroke();
  fill(224, 224, 224);
  triangle(670, 28, 655, 50, 685, 50);
  stroke(224, 224, 224);
  strokeWeight(10);
  line(725, 32, 743, 43);

  shape obj=new shape();
  if (num==1) {
    obj.createCircle();
  }
  if (num==2) {
    obj.createSquare();
  }
  if (num==3) {
    obj.createTriangle();
  }
  if (num==4) {
    obj.createLine();
  }
}

public class shape {
  public

    void createSquare() {
    for (int i=0; i<=limit2; i++)
    {
      float x = constant + sin(angle1[i]) * scalar;
      float y = constant + cos(angle1[i]) * scalar;
      noStroke();
      fill(33, 150, 243);
      rect(x+400, y+25, 12, 12);
      angle1[i] = angle1[i] + (speed+increment[limit]);
    }
  }
  void createTriangle() {
    for (int i=0; i<=limit3; i++)
    {
      float x = constant + sin(angle1[i]) * scalar;
      float y = constant + cos(angle1[i]) * scalar;
      noStroke();
      fill(139, 195, 74);
      triangle(x+400, y+20, x+390, y+33, x+410, y+33);
      angle1[i] = angle1[i] + (speed+increment[limit]);
    }
  }
  void createLine() {
    for (int i=0; i<=limit4; i++)
    {
      float x = constant + sin(angle1[i]) * scalar;
      float y = constant + cos(angle1[i]) * scalar;
      stroke(255, 193, 7);
      strokeWeight(3);
      line(x+400, y+25, x+415, y+28);
      angle1[i] = angle1[i] + (speed+increment[limit]);
    }
  }
  void createCircle()
  {
    for (int i=0; i<=limit1; i++)
    {
      float x = constant + sin(angle1[i]) * scalar;
      float y = constant + cos(angle1[i]) * scalar;
      noStroke();
      fill(244, 67, 54);
      ellipse(x+400, y+25, 18, 18); 

      angle1[i] = angle1[i] + (speed+increment[limit]);
    }
  }
}

[TfGuy44]

Described the problem. Posted your code. Code is formatted text. Good job! You win a pineapple:

You are doing things a little weird.

I would have your shape class describe one - and only one - shape.

class Shape {
  // Shape objects are a single shape.
}

What does it take to be a shape? Well, you need to know what kind of a shape you are:

class Shape {
  int type;
  Shape( int itype ){
    type = itype;
  }
}

You also need to know where you are:

class Shape {
  int type;
  float x, y;
  Shape( int itype ){
    type = itype;
    float a = random(TWO_PI);
    x = 200 * cos(a);
    y = 200 * sin(a);
  }
}

You also need to be able to draw yourself:

class Shape {
  int type;
  float x, y;
  Shape( int itype ){
    type = itype;
    float a = random(TWO_PI);
    x = 200 * cos(a);
    y = 200 * sin(a);
  }
  void draw(){
    rect(x,y,20,20);
    // TODO: Draw different types of shapes based on the type variable.
  }
}

I’m going to cut this post here before it gets too long.

[TfGuy44]

Right, next, we want to use that Shape class in a cut-down version of your sketch.

class Shape {
  int type;
  float x, y;
  Shape( int itype ){
    type = itype;
    float a = random(TWO_PI);
    x = 200 * cos(a);
    y = 200 * sin(a);
  }
  void draw(){
    stroke(0);
    strokeWeight(1);
    fill(200,0,0);
    rect(x,y,20,20);
    // TODO: Draw different types of shapes based on the type variable.
  }
}


Shape my_first_shape;

void setup(){
  size(1350, 450);
  my_first_shape = new Shape(0);
}

void draw(){
  background(255);
  draw_buttons();
  translate(width/2,height/2);
  my_first_shape.draw();
  
}

void draw_buttons() {
  //Navigation Buttons
  noStroke();
  fill(255);
  ellipse(650, 250, 300, 295);
  noStroke();
  fill(224, 224, 224);
  ellipse(537, 41, 25, 24);
  noStroke();
  fill(224, 224, 224);
  rect(590, 31, 20, 20);
  noStroke();
  fill(224, 224, 224);
  triangle(670, 28, 655, 50, 685, 50);
  stroke(224, 224, 224);
  strokeWeight(10);
  line(725, 32, 743, 43);
}

Notice that my_first_shape is a Shape that now appears at some random position around a ring. Doesn’t move yet. We’ll get back to that. First, let’s fix your buttons so they work and add a new shape to a shapes ArrayList (oh yeah and we’ll switch to using a dynamic structure - an ArrayList - to store your shapes in):

class Shape {
  int type;
  float x, y;
  Shape( int itype ){
    type = itype;
    float a = random(TWO_PI);
    x = 200 * cos(a);
    y = 200 * sin(a);
  }
  void draw(){
    stroke(0);
    strokeWeight(1);
    fill(200,0,0);
    rect(x,y,20,20);
    // TODO: Draw different types of shapes based on the type variable.
  }
}


ArrayList<Shape> shapes = new ArrayList();

void setup(){
  size(1350, 450);
}

void draw(){
  background(255);
  draw_buttons();
  translate(width/2,height/2);
  for(Shape s : shapes){
    s.draw();
  }
}

void mouseClicked() {
  if ((mouseX>520) && (mouseX<550)&&(mouseY>28)&&(mouseY<53)) {
    shapes.add( new Shape(0) );
  }
  if ((mouseX>588) && (mouseX<612)&&(mouseY>28)&&(mouseY<53)) {
    shapes.add( new Shape(1) );
  }
  if ((mouseX>652) && (mouseX<686)&&(mouseY>28)&&(mouseY<53)) {
    shapes.add( new Shape(2) );
   
  }
  if ((mouseX>720) && (mouseX<749)&&(mouseY>28)&&(mouseY<52)) {
    shapes.add( new Shape(3) );     
  }
}

void draw_buttons() {
  //Navigation Buttons
  noStroke();
  fill(255);
  ellipse(650, 250, 300, 295);
  noStroke();
  fill(224, 224, 224);
  ellipse(537, 41, 25, 24);
  noStroke();
  fill(224, 224, 224);
  rect(590, 31, 20, 20);
  noStroke();
  fill(224, 224, 224);
  triangle(670, 28, 655, 50, 685, 50);
  stroke(224, 224, 224);
  strokeWeight(10);
  line(725, 32, 743, 43);
}

Now when you click a button, a new shape appears. Yes, okay, they are all squares still. And they don’t rotate yet. Hang on.

[TfGuy44]

Minor adjustments now. First, draw the shapes differently based on the type of shape. Plus a few size adjustments - made the ring radius smaller, shifted the center down a little…

class Shape {
  int type;
  float x, y;
  Shape( int itype ) {
    type = itype;
    float a = random(TWO_PI);
    x = 160 * cos(a);
    y = 160 * sin(a);
  }
  void draw() {
    noStroke();
    switch(type) {
    case 0: // Circle
      fill(244, 67, 54);
      ellipse(x, y, 18, 18); 
      break;
    case 1: // Square
      fill(33, 150, 243);
      rect(x, y, 12, 12);
      break;
    case 2: // Triangle
      fill(139, 195, 74);
      triangle(x, y, x-10, y+13, x+10, y+13);
      break;
    case 3: // Line
      stroke(255, 193, 7);
      strokeWeight(3);
      line(x, y, x+15, y+3);
      break;
    }
  }
}


ArrayList<Shape> shapes = new ArrayList();

void setup() {
  size(1350, 450);
}

void draw() {
  background(255);
  draw_buttons();
  translate(width/2, height/2+20);
  for (Shape s : shapes) {
    s.draw();
  }
}

void mouseClicked() {
  if ((mouseX>520) && (mouseX<550)&&(mouseY>28)&&(mouseY<53)) {
    shapes.add( new Shape(0) );
  }
  if ((mouseX>588) && (mouseX<612)&&(mouseY>28)&&(mouseY<53)) {
    shapes.add( new Shape(1) );
  }
  if ((mouseX>652) && (mouseX<686)&&(mouseY>28)&&(mouseY<53)) {
    shapes.add( new Shape(2) );
  }
  if ((mouseX>720) && (mouseX<749)&&(mouseY>28)&&(mouseY<52)) {
    shapes.add( new Shape(3) );
  }
}

void draw_buttons() {
  //Navigation Buttons
  noStroke();
  fill(255);
  ellipse(650, 250, 300, 295);
  noStroke();
  fill(224, 224, 224);
  ellipse(537, 41, 25, 24);
  noStroke();
  fill(224, 224, 224);
  rect(590, 31, 20, 20);
  noStroke();
  fill(224, 224, 224);
  triangle(670, 28, 655, 50, 685, 50);
  stroke(224, 224, 224);
  strokeWeight(10);
  line(725, 32, 743, 43);
}

And now rotating:

class Shape {
  int type;
  float x, y;
  float a, da;
  Shape( int itype ) {
    type = itype;
    a = random(TWO_PI);
    da = -0.01;
  }
  void draw() {
    a+=da;
    a%=TWO_PI;
    x = 160 * cos(a);
    y = 160 * sin(a);
    noStroke();
    switch(type) {
    case 0: // Circle
      fill(244, 67, 54);
      ellipse(x, y, 18, 18); 
      break;
    case 1: // Square
      fill(33, 150, 243);
      rect(x, y, 12, 12);
      break;
    case 2: // Triangle
      fill(139, 195, 74);
      triangle(x, y, x-10, y+13, x+10, y+13);
      break;
    case 3: // Line
      stroke(255, 193, 7);
      strokeWeight(3);
      line(x, y, x+15, y+3);
      break;
    }
  }
}


ArrayList<Shape> shapes = new ArrayList();

void setup() {
  size(1350, 450);
}

void draw() {
  background(255);
  draw_buttons();
  translate(width/2, height/2+20);
  for (Shape s : shapes) {
    s.draw();
  }
}

void mouseClicked() {
  if ((mouseX>520) && (mouseX<550)&&(mouseY>28)&&(mouseY<53)) {
    shapes.add( new Shape(0) );
  }
  if ((mouseX>588) && (mouseX<612)&&(mouseY>28)&&(mouseY<53)) {
    shapes.add( new Shape(1) );
  }
  if ((mouseX>652) && (mouseX<686)&&(mouseY>28)&&(mouseY<53)) {
    shapes.add( new Shape(2) );
  }
  if ((mouseX>720) && (mouseX<749)&&(mouseY>28)&&(mouseY<52)) {
    shapes.add( new Shape(3) );
  }
}

void draw_buttons() {
  //Navigation Buttons
  noStroke();
  fill(255);
  ellipse(650, 250, 300, 295);
  noStroke();
  fill(224, 224, 224);
  ellipse(537, 41, 25, 24);
  noStroke();
  fill(224, 224, 224);
  rect(590, 31, 20, 20);
  noStroke();
  fill(224, 224, 224);
  triangle(670, 28, 655, 50, 685, 50);
  stroke(224, 224, 224);
  strokeWeight(10);
  line(725, 32, 743, 43);
}

This now works, and you can have many types of shapes going all at once.

[TfGuy44]

Buttons can be objects too!

class Shape {
  int type;
  float x, y;
  float a, da;
  Shape( int itype ) {
    type = itype;
    a = random(TWO_PI);
    da = -0.01;
  }
  void draw() {
    a+=da;
    a%=TWO_PI;
    x = 160 * cos(a);
    y = 160 * sin(a);
    noStroke();
    switch(type) {
    case 0: // Circle
      fill(244, 67, 54);
      ellipse(x, y, 18, 18); 
      break;
    case 1: // Square
      fill(33, 150, 243);
      rect(x, y, 12, 12);
      break;
    case 2: // Triangle
      fill(139, 195, 74);
      triangle(x, y, x-10, y+13, x+10, y+13);
      break;
    case 3: // Line
      stroke(255, 193, 7);
      strokeWeight(3);
      line(x, y, x+15, y+3);
      break;
    }
  }
}

class Button {
  float x, y;
  int type;
  Button( int itype ) {
    type = itype;
    y = 0;
    x = width/2 + (type-2) * 50;
  }
  void draw() {
    pushMatrix();
    stroke(128);
    strokeWeight(1);
    noFill();
    rect(x, y, 50, 50);
    noStroke();
    fill(244);
    if( over() ) fill(64);
    translate(25,25);
    switch(type) {      
    case 0: // Circle
      ellipse(x, y, 18, 18); 
      break;
    case 1: // Square
      rect(x, y, 12, 12);
      break;
    case 2: // Triangle
      triangle(x, y, x-10, y+13, x+10, y+13);
      break;
    case 3: // Line
      stroke(244);
      if( over() ) stroke(64);
      strokeWeight(3);
      line(x, y, x+15, y+3);
      break;
    }
    popMatrix();
  }
  boolean over() {
    return( x < mouseX && mouseX < x + 50 && y < mouseY && mouseY < y + 50 );
  }
  void click() {
    if ( over() ) {
      shapes.add( new Shape(type) );
    }
  }
}

ArrayList<Shape> shapes = new ArrayList();
Button[] buttons = new Button[4];

void setup() {
  size(1350, 450);
  for( int t = 0; t < 4; buttons[t] = new Button(t++) );
}

void draw() {
  background(255);
  for (Button b : buttons) b.draw();
  translate(width/2, height/2+20);
  for (Shape s : shapes) s.draw();
}

void mouseClicked() {
  for (Button b : buttons) b.click();
}

Notice that the main driving logic is now TINY! Seriously, look at how simple setup(), draw(), and mousePressed() have become!

[Kirrat]

Thankyou
That was all very useful.