Help on creating orbit simulation (lines fade)

crv74 · January 30, 2023, 11:42am

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

glv · January 30, 2023, 11:51am

Hello,

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

:)

crv74 · January 30, 2023, 1:35pm

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

  
  ellipseMode(RADIUS);
}

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

crv74 · February 2, 2023, 3:44pm

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);
  cp5.addFrameRate().setInterval(10).setPosition(0,height - 15);

  // 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)
     ;
     
  cp5.addSlider("sa")
     .setPosition(50,70)
     .setSize(200,20)
     .setRange(1,25)
     .setNumberOfTickMarks(25)
     .setValue(7)
     ;

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

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

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

  cp5.addSlider("rb")
     .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");
  
  ellipseMode(RADIUS);
}

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
}

Thanks in advance!

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)

Chrisir · February 2, 2023, 9:34pm

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

crv74 · February 2, 2023, 9:55pm

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.

Chrisir · February 2, 2023, 11:09pm

that’s easy

distinguish between name and caption:

  // create a new button to make B as clear screen
  cp5.addButton("PremB")   // its name 
    .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
}

jafal · February 3, 2023, 3:25am

Hi

And you can find more examples if you search the forum

crv74 · February 3, 2023, 9:25am

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!!

crv74 · February 3, 2023, 9:30am

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

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

  cp5.addSlider("velg")
     .setPosition(50,30)
     .setSize(200,20)
     .setRange(1,50)
     .setNumberOfTickMarks(50)
     .setValue(25)
     .setLabel("Velocitat Global")
     ;
     
  cp5.addSlider("sa")
     .setPosition(50,70)
     .setSize(200,20)
     .setRange(1,25)
     .setNumberOfTickMarks(25)
     .setValue(7)
     .setLabel("Velocitat Planeta A")

     ;

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

cp5.addButton("PremB")
    .setValue(0)
    .setPosition(50, 150)
    .setSize(200, 20)
    .setLabel("Prem B per netejar el dibuix")
    ;
  
  cp5.addSlider("in")
     .setPosition(550,30)
     .setSize(200,20)
     .setRange(1,100)
     .setValue(50)
     .setLabel("Intensitat dibuix")

     ;

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

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

  ellipseMode(RADIUS);
}

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 !!

Chrisir · February 3, 2023, 10:15am

That’s wrong. My bad.

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.

crv74 · February 3, 2023, 10:24am

Thanks to you for enlightening me

crv74 · February 3, 2023, 10:57am

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!

Topic		Replies	Views
Programming advice (spiral from point to point) Coding Questions	16	520	November 27, 2022
Any help to code this example (attached) Project Guidance	3	532	February 2, 2020
Mathematical circle animation Coding Questions homework	12	1459	December 10, 2020
Basic Processing question for beginner (circular rays) Coding Questions homework	2	282	October 2, 2022
Help with rotation in simple animation Coding Questions	2	340	December 26, 2019

Help on creating orbit simulation (lines fade)

Related topics