// var constellation = 
// draw two ellipses with a bezier curve connecting them (and then step two with a label)
// draw two circles
// draw a bezier

var constellation;
var x;
var y;
var x1;
var x2;
var y2;
var x3;
var clrTan;
var Circ2;
var Circ;

function setup() {
  // Initialize all values
  x1 = -155;
  x2 = 112;
  y1 = 5;
  y2 = 0;
  x3 = 0 - 250;
  y3 = windowHeight / 2;
  x4 = 0 + 250;
  clrTan = '#FEF7ED';
  circ2 = createElement('div', '');
  circ = createElement('div', '');
}

function draw() {

  createCanvas(windowWidth, windowHeight);
  background('#0E293D');

  // Translate the origin point to the center of the screen to make responsive
  translate(width / 2, height / 2);
  //call the function-make it into a constructor function
  // 
  constellation();

}


constellation = function() {

  //setting path of orbiting circles using 4 quadrants
  //quadrant 1
  if ((x1 < 0) && (y1 > 0)) {
    x1 = x1 + 0.6;
    y1 = y1 + .2;
  }

  //quadrant 2
  if ((x1 > -1) && (y1 > -1)) {
    x1 = x1 + .6;
    y1 = y1 - .2;
  }

  //quadrant 3
  if ((x1 > -2) && (y1 < 0)) {
    x1 = x1 - .6;
    y1 = y1 - .2;
  }

  //quadrant 4
  if ((x1 < 1) && (y1 < 0)) {
    x1 = x1 - .6;
    y1 = y1 + .2;
  }

// drawing the orbiting circle
  fill('rgba(221, 239, 255, .1)');
  stroke('#FEFCA2');
  strokeWeight(3);
  circ = ellipse(x1, y1, 45, 45);
  // circ2 = ellipse(x2, y2, 25, 25);
  
  //drawing the text labels
  textSize(36);
  fill('#DDEFFF');
  noStroke();
  text('Us', x3 - 27, y2 + 135);
  text('The World', x4 - 81, y2 + 135);

//drawing the anchor circles

  fill('#DDEFFF');
  stroke('#069172');
  strokeWeight(18);
  ellipse(x3, y2, 175, 175);
  ellipse(x4, y2, 175, 175);
  
  fill('#46494C');
  stroke('#C5C3C6');
  strokeWeight(9);
  ellipse(x4, y2, 36, 36);

  fill('#46494C');
  stroke('#C5C3C6');
  strokeWeight(9);
  ellipse(x3, y2, 36, 36);

  fill('#D3B09C');
  stroke('#D3B09C');

//drawing the bezier lines connecting anchor circles
  fill(25, 133, 161, 1);
  stroke('#DDEFFF');
  strokeWeight(1);
  bezier(x3, 0, 0, -72, 0, 0 - 72, x4, 0);
  bezier(x4, 0, 0, 72, 0, 0 + 72, x3, 0);

}