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