<iframe width='500px' height='400px' src='https://nest.ktbyte.com/nest#97071' allowfullscreen></iframe>

float r, a;
ArrayList <PVector> sinv = new ArrayList<PVector>(), cosv = new ArrayList<PVector>();
PFont font;

void setup() {
  size(800, 800);
  r = 150;
  a = 0;
  smooth();
  frameRate(25);

  for (int x = width/2; x < width; x++) sinv.add(new PVector(x, height/2/2 + sin(a)*r));
  for (int y = height/2; y < height; y++) cosv.add(new PVector(width/2/2 + cos(a)*r, y));

  font = createFont("Arial", 24);
  textFont(font, 24);
}

void draw() {
  //background(#56676e);
  background (#57385c);

  bigCircle();
  sinCosCharts();
  infoSection();
  updateAngleLists();
  float val = map(mouseX, 10, width, 0, PI/20);
  if (val <= 0) val = PI/20/3;
  a+= val;
  if (mousePressed && mouseX > 0 && mouseY > 0 && mouseX < width && mouseY < height) {
    r = map(mouseY, 0, height, 10, 200);
  }
}


void bigCircle() {
  // background  ----------------- 
  fill (#ffedbc);
  for (int i = 50; i < width/2; i+= 50) line(i, 0, i, height/2);
  for (int i = 50; i < height/2; i+= 50) line(0, i, width/2, i);

  // circle ----------------- 
  float centerX = width/2/2, centerY = height/2/2;
  noFill();
  stroke (#ffedbc);
  strokeWeight(3);
  ellipse(centerX, centerY, r*2, r*2);  

  // angle ----------------------
  float x = centerX + cos(a)*r, y = centerY + sin(a)*r;
  stroke(#e8e2b2);
  line(centerX, centerY, x, y);
  fill(#e8e2b2);
  noStroke();

  ellipse(x, y, 6, 6);

  // ----------------- 
  dashedLine(true, x, y, 10, width/2);
  dashedLine(false, x, y, 10, height/2);
}


void updateAngleLists() {
  for (int i = sinv.size()-1; i > 0; i--) sinv.get(i).y = sinv.get(i-1).y;
  sinv.get(0).y = height/2/2 + sin(a)*r;
  for (int i = cosv.size()-1; i > 0; i--) cosv.get(i).x = cosv.get(i-1).x;
  cosv.get(0).x = width/2/2 + cos(a)*r;
}

void sinCosCharts() {
  noStroke();
  fill (#A75265);

  rect(width/2, 0, width/2, height/2);
  rect(0, width/2, width/2, height/2);

  fill(255);
  stroke(255);
  strokeWeight(1);

  for (int i = 0; i < sinv.size(); i++) {
    ellipse(sinv.get(i).x, sinv.get(i).y, 3, 3);
    if (i > 0) line(sinv.get(i).x, sinv.get(i).y, sinv.get(i-1).x, sinv.get(i-1).y);
  }

  for (int i = 0; i < cosv.size(); i++) {
    ellipse(cosv.get(i).x, cosv.get(i).y, 3, 3);
    if (i > 0) line(cosv.get(i).x, cosv.get(i).y, cosv.get(i-1).x, cosv.get(i-1).y);
  }
}

int tt(boolean dashed, String txt, int x, int y) {
  text(txt, x, y);
  if (dashed) dashedLine(true, x, y+= 30, 10, width-40);
  return y + 40;
}

void infoSection() {
  int x = width/2+30, y = height/2+50;

  fill(255);
  strokeWeight(1.5);
  stroke(#e8e2b2); 

  y = tt(false, "radius: " + nf(r, 3, 2), x, y);
  y = tt(true, "angle: " + nf(degrees(a%TWO_PI), 3, 2), x, y);
  y = tt(false, "cosine of angle: " + nf(cos(a), 1, 2), x, y);
  y = tt(true, "sin of angle: " + nf(sin(a), 1, 2), x, y);
  y = tt(false, "cos * r = x: " + nf(cos(a)*r, 1, 2), x, y);
  y = tt(false, "sin * r = y: " + nf(sin(a)*r, 1, 2), x, y);
}

void dashedLine(boolean horiz, float X, float Y, float S, float L) {
  strokeWeight(1.5);
  stroke(#e8e2b2);
  while (horiz ?(X < L) :(Y < L)) {
    if (horiz) line(X += S, Y, X+S*0.5, Y);
    else line(X, Y+=S, X, Y+S*0.5);
  }
}