# Adding a new shape in the orbit

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);
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]);
}
}
}

``````
1 Like

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.

4 Likes

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() {
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)) {
}
if ((mouseX>588) && (mouseX<612)&&(mouseY>28)&&(mouseY<53)) {
}
if ((mouseX>652) && (mouseX<686)&&(mouseY>28)&&(mouseY<53)) {

}
if ((mouseX>720) && (mouseX<749)&&(mouseY>28)&&(mouseY<52)) {
}
}

void draw_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.

2 Likes

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)) {
}
if ((mouseX>588) && (mouseX<612)&&(mouseY>28)&&(mouseY<53)) {
}
if ((mouseX>652) && (mouseX<686)&&(mouseY>28)&&(mouseY<53)) {
}
if ((mouseX>720) && (mouseX<749)&&(mouseY>28)&&(mouseY<52)) {
}
}

void draw_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)) {
}
if ((mouseX>588) && (mouseX<612)&&(mouseY>28)&&(mouseY<53)) {
}
if ((mouseX>652) && (mouseX<686)&&(mouseY>28)&&(mouseY<53)) {
}
if ((mouseX>720) && (mouseX<749)&&(mouseY>28)&&(mouseY<52)) {
}
}

void draw_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.

2 Likes

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() ) {
}
}
}

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!

4 Likes

Thankyou
That was all very useful.