/*
  We're going to create a simple oscillating set of circles on screen
  by calculating our X and Y positions using basic Trig. The angle of
  the X and Y coordinate are calculated from the xtheta and ytheta, which
  we'll increase each frame.
  
  Think of the xtheta and ytheta as a vector2D, at each step we're adding
  a constant velocity to the Vector in the form of xtheta_vel and ytheta_vel.
*/

// angle for our X position
float xtheta;
float xtheta_vel;

// angle for our Y position
float ytheta;
float ytheta_vel;

void setup() {

    // setup the environment
    size(300, 300);
    colorMode(RGB, 255, 255, 255, 255);
    smooth();
    background(0);
    
    // start out each angle at 0
    xtheta = 0.0;
    ytheta = 0.0;
    
    // give the X and Y different angular velocities
    xtheta_vel = 0.01f;
    ytheta_vel = 0.015f;
}

void draw() {

    // slowly fade out the screen
    fill(0, 1);
    noStroke();
    rect(0, 0, width, height);
    
    // We'll use an amplitude to calculate a position on screen
    // the value of sin(xtheta) will be from -1 to 1
    float amplitude = 75.0f;
    float x = amplitude * sin(xtheta);
    xtheta += xtheta_vel;
    
    // repeat the process with our Y value
    amplitude = 50.0f;
    float y = amplitude * cos(ytheta);
    ytheta += ytheta_vel;
    
    // set our circle properties
    ellipseMode(CENTER);
    fill(0, 0, 255);
    
    // reposition the 0, 0 coordinate of the screen to the center of the screen,
    // because our values for X and Y will be positive or negative
    translate(width / 2, height / 2);
    ellipse(x, y, 20, 20);

}