# Help on creating orbit simulation (lines fade)

Hi there,

after my (your basically) last learning process of the surface programming, it came in mind another thing i want to try, but i really don’t knwo how to start it (call me dumb).

The idea came, under a video i saw called “the Venus petal” or so…

What i’d like to do is:

• Draw a point A that moves (rotates) in a circular-orbit of radius AR and speed AS (i’d like to change those values later)
• Draw a point B that moves (rotates) in a circular-orbit of radius BR and speed BS (i’d like to change those values later)

Draw a line from points A to B, and see how the magi happens

At this point i know how to make the circles and points, but the part to use a “coordinate” as a point i don’t really know how to approach it.

I’m sure it is very easy but can’t ^^

Thanks for any hint or help!
Carles

Hello,

This is a “hidden” tutorial (not on Processing website) that may help:

`:)`

1 Like

That helped, and messed my head more!
Thanks

I think i got what i wanted 99%

``````PVector center;
float as, bs, ax, ay, bx, by, ra, rb;
color BGcolor;                   // the background color
boolean ClearBG;                 // clear the background on each frame?

void setup() {
size(1000, 1000);
center = new PVector(width/2, height/2);
ra = dist(15, 15, 200, 200);
rb = dist(15, 15, 100, 100);
BGcolor = color(20, 20, 20);   // background color
ClearBG = false;               // don't clear background on each frame
background(BGcolor);

}

void draw() {
if (ClearBG) background(BGcolor);
//hint(ENABLE_STROKE_PURE);
//smooth();
stroke(90);

//find the point based on the angle
float ax = center.x + cos(as)*ra;
float ay = center.y + sin(as)*ra;
float bx = center.x + cos(bs)*rb;
float by = center.y + sin(bs)*rb;

//draw the traveling planets
ellipse(ax, ay, 1, 1);
ellipse(bx, by, 1, 1);
line (ax, ay, bx, by);

//increment the angle to move the point
as += PI/45;
bs += PI/120;

// Output calculations to screen
text("Prem B per netejar", 50, 50);
//  text("Òrbita Planeta A = " as, 50, 70);
//  text("Òrbita Planeta B = " bs, 50, 90);

}

void keyTyped() {
if (key == 'b') ClearBG = !ClearBG;         // toggle clearing the background
}
``````

I copied some code from the hidden tutorial, even one of the firsts from the Imaginary Institute.

What i can’t achieve now is:

Write the data used as diameter, radius…
Get the Stroke with some “alpha” or vanish lenght, si it can draw over itself but getting sort of vanished the “older” strokes.

Anyway thanks! You made me think and learn !!

Carles

1 Like

I make a lot of improvements thanks to the controlP5 library.

But i need some help on:

• can the slider/buttons of control be themed? (i basically want a green variant)
• how can i use the Button to execute what the “B” key does? (can’t get it)
• how can i make the Text description not be drawn infinite times till it gets blurrish?
• how can i “set” sort of decaying lines, or max lines drawed, so it don’t get so cluttered that you lose the main center-pattern??

i paste the actual code so you can tinked and debug:

``````import controlP5.*;

ControlP5 cp5;

int myColor = color(0,0,0);

Slider abc;

PVector center;
float as, bs, ax, ay, bx, by, ra, rb, sa, sb, in;
color BGcolor;                   // the background color
boolean ClearBG;                 // clear the background on each frame?

void setup() {
size(900, 900);
center = new PVector(width/2, height/2);
ra = dist(15, 15, 250, 250);
rb = dist(15, 15, 150, 150);
sa = 7; // speed planet A
sb = 12; // speed planet B
BGcolor = color(0, 40, 0);   // background color
ClearBG = false;               // don't clear background on each frame
background(BGcolor);
cp5 = new ControlP5(this);

// create a new button to make B as clear screen
cp5.addButton("Prem B per netejar el dibuix")
.setValue(0)
.setPosition(50,25)
.setSize(200,25)
;

.setPosition(50,70)
.setSize(200,20)
.setRange(1,25)
.setNumberOfTickMarks(25)
.setValue(7)
;

.setPosition(50,110)
.setSize(200,20)
.setRange(1,25)
.setNumberOfTickMarks(25)
.setValue(12)
;

.setPosition(550,30)
.setSize(200,20)
.setRange(1,100)
.setValue(50)
;

.setPosition(550,70)
.setSize(200,20)
.setRange(5,350)
.setValue(250)
;

.setPosition(550,110)
.setSize(200,20)
.setRange(5,250)
.setValue(150)
;

cp5.getController("sa").setCaptionLabel("Velocitat Planeta A");
cp5.getController("sb").setCaptionLabel("Velocitat Planeta B");
cp5.getController("in").setCaptionLabel("Intensitat del dibuix");
cp5.getController("ra").setCaptionLabel("Orbita Planeta A");
cp5.getController("rb").setCaptionLabel("Orbita Planeta B");

}

void draw() {
if (ClearBG) background(BGcolor);
//hint(ENABLE_STROKE_PURE);
//smooth();
stroke(0, 120, 0, in);

float ax = center.x + cos(as)*ra;
float ay = center.y + sin(as)*ra;
float bx = center.x + cos(bs)*rb;
float by = center.y + sin(bs)*rb;

//draw the traveling planets
//  ellipse(ax, ay, 1, 1);
//  ellipse(bx, by, 1, 1);
line (ax, ay, bx, by);

as += PI/(sa*10);
bs += PI/(sb*10);

}

void keyTyped() {
if (key == 'b') ClearBG = !ClearBG;         // toggle clearing the background
}
``````

Carles

p.s: of course most of the code comes from tutorials and examples as i said before (but can’t rememeber some of the sources i got them)

ps2: updated the code with more handlers, and trasparency to the line drawn… i still wish i could make i vanish after 10-1000 times but cannot figure how to (with a handle also if possible)

1 Like

this is easiest when you write it in draw() anew

when you don’t want to delete the whole screen, make a small rectangle over the text with fill(green) and delete only this area and write the text again in draw()

you can make a similar rect for the entire screen, with
green fill but make opacity only 15 or so, then it deletes the lines but slowly

`fill(0,255,0,15);`

1 Like

Thanks for the tips, but that doesn’t give the result i espected… I’ll figure out some other solution.
The set the button to “clear” i still haven’t found the way to do it.

1 Like

that’s easy

distinguish between name and caption:

``````  // create a new button to make B as clear screen
.setValue(0)
.setPosition(50, 25)
.setSize(200, 25)
.setLabel("Prem B per netejar el dibuix");  // caption
;
``````

then a function PremB gets called automatically when clicked:

``````void PremB() {
if (key == 'b') ClearBG = !ClearBG;         // toggle clearing the background
}
``````
2 Likes

Hi

And you can find more examples if you search the forum

2 Likes

Thanks a LOT!

That’s what I needed, but for some reason it only “works” when i press B on the keyboard once, then the button does what’s intended for.
Am i missing something on the way??

I am dumb as HELL… it just needed to take out the “if” because it’s a toggle on/off, and set the initial value to True.

Sorted it!!

2 Likes

That’s what i needed !!!
Thanks a lot.
Now if I just could have “accents” on the words/labels (Òrbita, etc…)

I paste the updated code, just to see if the button thing can work from the start…

For better “smoothness” what do you reccomend me: smooth() or hint(ENABLE_STROKE_PURE)
I really can’t see the difference

Also tell me what do you think about the experiment.
The video that inspired me to do it is this one:

``````import controlP5.*;

ControlP5 cp5;

Textlabel titol01;

int myColor = color(0,0,0);

Slider abc;

PVector center;
float as, bs, ax, ay, bx, by, ra, rb, sa, sb, in, velg;
color BGcolor;                   // the background color
boolean ClearBG;                 // clear the background on each frame?

void setup() {
size(900, 900);
center = new PVector(width/2, (height/2)+50);
ra = dist(15, 15, 250, 250);
rb = dist(15, 15, 150, 150);
sa = 7; // speed planet A
sb = 12; // speed planet B
BGcolor = color(10, 10, 10);   // background color
ClearBG = true;               // don't clear background on each frame
background(BGcolor);
cp5 = new ControlP5(this);

// change the original colors
cp5.setColorForeground(#006000);
cp5.setColorBackground(#002000);
cp5.setColorActive(#00AA00);

.setText("Dibuixos Orbitals")
.setPosition(400,10)
.setColorValue(#00dd00)
;

.setPosition(50,30)
.setSize(200,20)
.setRange(1,50)
.setNumberOfTickMarks(50)
.setValue(25)
.setLabel("Velocitat Global")
;

.setPosition(50,70)
.setSize(200,20)
.setRange(1,25)
.setNumberOfTickMarks(25)
.setValue(7)
.setLabel("Velocitat Planeta A")

;

.setPosition(50,110)
.setSize(200,20)
.setRange(1,25)
.setNumberOfTickMarks(25)
.setValue(12)
.setLabel("Velocitat Planeta B")
;

.setValue(0)
.setPosition(50, 150)
.setSize(200, 20)
.setLabel("Prem B per netejar el dibuix")
;

.setPosition(550,30)
.setSize(200,20)
.setRange(1,100)
.setValue(50)
.setLabel("Intensitat dibuix")

;

.setPosition(550,70)
.setSize(200,20)
.setRange(5,350)
.setValue(250)
.setLabel("Orbita Planeta A")
;

.setPosition(550,110)
.setSize(200,20)
.setRange(5,250)
.setValue(150)
.setLabel("Orbita Planeta B")
;

}

void draw() {
if (ClearBG) background(BGcolor);
//hint(ENABLE_STROKE_PURE);
smooth();
stroke(0, 120, 0, in);

float ax = center.x + cos(as)*ra;
float ay = center.y + sin(as)*ra;
float bx = center.x + cos(bs)*rb;
float by = center.y + sin(bs)*rb;

//draw the traveling planets
//  ellipse(ax, ay, 1, 1);
//  ellipse(bx, by, 1, 1);
line (ax, ay, bx, by);

as += PI/(sa*(51-velg));
bs += PI/(sb*(51-velg));

}

void PremB() {
ClearBG = !ClearBG;         // toggle clearing the background
}

``````

Thanks a lot again !!

1 Like

We don’t need key here at all!!!

``````void PremB() {
ClearBG = !ClearBG;         // toggle clearing the background
}
``````

Sorry.

I just saw you corrected that yourself so thank you.

The graphic is beautiful. Congratulations.

2 Likes

Thanks to you for enlightening me

1 Like

Idea:

what about to add a Slider with Hue value, so the user can choose the “color” of the line drawn?

That would involve a new variable “hue”, colormode HSV and put the value on it right??

I keep investigating, thanks!

2 Likes