Formula for Ellipse - HTML Text

// sketch.js

var cnv_x = 24;   // left top corner
var cnv_y = 160;  // of canvas
var cnv_w = 640;  // graphics width
var cnv_h = 400;  // canvas height

var xC;  // center
var yC;

var res = 0.01;  // resolution
var a = 160;    // half horizontal axis
var b = 120;    // half vertical axis

var slider_a;
var slider_b;

var sa;
var sb;

var p;
var t;

function setup() {
  var cnv = createCanvas(cnv_w, cnv_h);
  cnv.position(cnv_x, cnv_y);

  xC = cnv_w/2;
  yC = cnv_h/2;

  slider_a = createSlider(1, 320, 160, 1);
  slider_a.position(cnv_x, cnv_y-50);
  slider_a.style('width', '320px');

  slider_b = createSlider(1, 200, 120, 1);
  slider_b.position(cnv_x, cnv_y-30);
  slider_b.style('width', '200px');

  p = createP();
} //setup

function draw() {
  background(0, 255, 255);
  p.remove();
  p = createP('<br><br><br><br><br>'
             +'<br><br><br><br><br>'
             +'<br><br><br><br><br>'
             +'  X<sup>2</sup>'
             +'           '
             +'  Y<sup>2</sup><br>'
             +' ---     +     ---'
             +'    =   1<br>'
             );

  noStroke();
  fill(0, 0, 255);
  rect(0, 0, 640, 400);

  x_axis();
  y_axis();
  x_scale();
  y_scale();

  a = slider_a.value();
  b = slider_b.value();

  sa = str(a);
  if (a < 10) {
    sa = '    ' + sa;
  } else if (a < 100) {
    sa = '  ' + sa;
  }

  sb = str(b);
  if (b < 10) {
    sb = '    ' + sb;
  } else if (b < 100) {
    sb = '  ' + sb;
  }

  strokeWeight(3);
  stroke(255, 255, 0);
  for (var angle=0.0; angle<TAU; angle=angle+res) {
    point(xC + a*cos(angle), yC + b*sin(angle));
  }

  p.html(sa+'<sup>2</sup>'
        +'         '
        +sb+'<sup>2</sup>', true);

} //draw

function x_axis() {
  strokeWeight(3);
  stroke(0, 255, 255);
  fill(0, 255, 255);
  line(0, yC, cnv_w, yC);
  triangle(cnv_w, yC, cnv_w - 12, yC+4, cnv_w - 12, yC-4);
  strokeWeight(13);
  point(xC, yC);
  point(xC-300, yC);
  point(xC-200, yC);
  point(xC-100, yC);
  point(xC+100, yC);
  point(xC+200, yC);
  point(xC+300, yC);
} //x_axis

function y_axis() {
  strokeWeight(3);
  stroke(0, 255, 255);
  fill(0, 255, 255);
  line(xC, 0, xC, cnv_h);
  triangle(xC, 0, xC-4, 12, xC+4, 12);
  strokeWeight(13);
  point(xC, yC-100);
  point(xC, yC+100);
  point(xC, yC+200);
} //y_axis

function x_scale() {
  strokeWeight(3);
  stroke(0, 255, 255);
  fill(0, 255, 255);
  textSize(24);
  text("-300", cnv_x + cnv_w/2 - 340, 210, 40, 40);
  text("-200", cnv_x + cnv_w/2 - 250, 210, 40, 40);
  text("-100", cnv_x + cnv_w/2 - 150, 210, 40, 40);
  text("0",    cnv_x + cnv_w/2 - 40, 210, 40, 40);
  text("100", cnv_x + cnv_w/2 + 50, 210, 40, 40);
  text("200", cnv_x + cnv_w/2 + 150, 210, 40, 40);
  text("300", cnv_x + cnv_w/2 + 250, 210, 40, 40);
} //x_scale

function y_scale() {
  strokeWeight(3);
  stroke(0, 255, 255);
  fill(0, 255, 255);
  textSize(24);
  text("200", cnv_x + cnv_w/2-75, yC-200, 40, 40);
  text("100", cnv_x + cnv_w/2-75, yC-110, 40, 40);
  text("0",   cnv_x + cnv_w/2-50, yC-10, 40, 40);
  text("-100", cnv_x + cnv_w/2-85, yC+90, 40, 40);
  text("-200", cnv_x + cnv_w/2-85, yC+180, 40, 40);
} //x_scale