diff --git a/src/math/trigonometry.js b/src/math/trigonometry.js index 4927bb8d2c..51f42d71a9 100644 --- a/src/math/trigonometry.js +++ b/src/math/trigonometry.js @@ -16,9 +16,11 @@ import * as constants from '../core/constants'; p5.prototype._angleMode = constants.RADIANS; /** - * The inverse of cos(), returns the arc cosine of a - * value. This function expects arguments in the range -1 to 1. By default, - * `acos()` returns values in the range 0 to π (about 3.14). If the + * Calculates the arc cosine of a number. + * + * `acos()` is the inverse of cos(). It expects + * arguments in the range -1 to 1. By default, `acos()` returns values in the + * range 0 to π (about 3.14). If the * angleMode() is `DEGREES`, then values are * returned in the range 0 to 180. * @@ -29,27 +31,45 @@ p5.prototype._angleMode = constants.RADIANS; * @example *
- * let a = PI;
- * let c = cos(a);
- * let ac = acos(c);
- * text(`${round(a, 3)}`, 35, 25);
- * text(`${round(c, 3)}`, 35, 50);
- * text(`${round(ac, 3)}`, 35, 75);
- *
- * describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate cos() and acos() values.
+ * let a = PI;
+ * let c = cos(a);
+ * let ac = acos(c);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(c, 3)}`, 35, 50);
+ * text(`${round(ac, 3)}`, 35, 75);
+ *
+ * describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
+ * }
*
*
- * let a = PI + QUARTER_PI;
- * let c = cos(a);
- * let ac = acos(c);
- * text(`${round(a, 3)}`, 35, 25);
- * text(`${round(c, 3)}`, 35, 50);
- * text(`${round(ac, 3)}`, 35, 75);
- *
- * describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate cos() and acos() values.
+ * let a = PI + QUARTER_PI;
+ * let c = cos(a);
+ * let ac = acos(c);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(c, 3)}`, 35, 50);
+ * text(`${round(ac, 3)}`, 35, 75);
+ *
+ * describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
+ * }
*
*
- * let a = PI / 3;
- * let s = sin(a);
- * let as = asin(s);
- * text(`${round(a, 3)}`, 35, 25);
- * text(`${round(s, 3)}`, 35, 50);
- * text(`${round(as, 3)}`, 35, 75);
- *
- * describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate sin() and asin() values.
+ * let a = PI / 3;
+ * let s = sin(a);
+ * let as = asin(s);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(s, 3)}`, 35, 50);
+ * text(`${round(as, 3)}`, 35, 75);
+ *
+ * describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
+ * }
*
*
- * let a = PI + PI / 3;
- * let s = sin(a);
- * let as = asin(s);
- * text(`${round(a, 3)}`, 35, 25);
- * text(`${round(s, 3)}`, 35, 50);
- * text(`${round(as, 3)}`, 35, 75);
- *
- * describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate sin() and asin() values.
+ * let a = PI + PI / 3;
+ * let s = sin(a);
+ * let as = asin(s);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(s, 3)}`, 35, 50);
+ * text(`${round(as, 3)}`, 35, 75);
+ *
+ * describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
+ * }
*
*
- * let a = PI / 3;
- * let t = tan(a);
- * let at = atan(t);
- * text(`${round(a, 3)}`, 35, 25);
- * text(`${round(t, 3)}`, 35, 50);
- * text(`${round(at, 3)}`, 35, 75);
- *
- * describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate tan() and atan() values.
+ * let a = PI / 3;
+ * let t = tan(a);
+ * let at = atan(t);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(t, 3)}`, 35, 50);
+ * text(`${round(at, 3)}`, 35, 75);
+ *
+ * describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
+ * }
*
*
- * let a = PI + PI / 3;
- * let t = tan(a);
- * let at = atan(t);
- * text(`${round(a, 3)}`, 35, 25);
- * text(`${round(t, 3)}`, 35, 50);
- * text(`${round(at, 3)}`, 35, 75);
- *
- * describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Calculate tan() and atan() values.
+ * let a = PI + PI / 3;
+ * let t = tan(a);
+ * let at = atan(t);
+ *
+ * // Display the values.
+ * text(`${round(a, 3)}`, 35, 25);
+ * text(`${round(t, 3)}`, 35, 50);
+ * text(`${round(at, 3)}`, 35, 75);
+ *
+ * describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
+ * }
*
*
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A rectangle at the top-left of the canvas rotates with mouse movements.');
+ * }
+ *
* function draw() {
* background(200);
- * translate(width / 2, height / 2);
- * let x = mouseX - width / 2;
- * let y = mouseY - height / 2;
- * let a = atan2(y, x);
+ *
+ * // Calculate the angle between the mouse
+ * // and the origin.
+ * let a = atan2(mouseY, mouseX);
+ *
+ * // Rotate.
* rotate(a);
- * rect(-30, -5, 60, 10);
+ *
+ * // Draw the shape.
+ * rect(0, 0, 60, 10);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
*
* describe('A rectangle at the center of the canvas rotates with mouse movements.');
* }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Translate the origin to the center.
+ * translate(50, 50);
+ *
+ * // Get the mouse's coordinates relative to the origin.
+ * let x = mouseX - 50;
+ * let y = mouseY - 50;
+ *
+ * // Calculate the angle between the mouse and the origin.
+ * let a = atan2(y, x);
+ *
+ * // Rotate.
+ * rotate(a);
+ *
+ * // Draw the shape.
+ * rect(-30, -5, 60, 10);
+ * }
*
*
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white ball on a string oscillates left and right.');
+ * }
+ *
* function draw() {
* background(200);
*
- * let t = frameCount;
- * let x = 30 * cos(t * 0.05) + 50;
+ * // Calculate the coordinates.
+ * let x = 30 * cos(frameCount * 0.05) + 50;
* let y = 50;
+ *
+ * // Draw the oscillator.
* line(50, y, x, y);
* circle(x, y, 20);
- *
- * describe('A white ball on a string oscillates left and right.');
* }
*
*
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of black dots form a wave pattern.');
+ * }
+ *
* function draw() {
+ * // Calculate the coordinates.
* let x = frameCount;
* let y = 30 * cos(x * 0.1) + 50;
- * point(x, y);
*
- * describe('A series of black dots form a wave pattern.');
+ * // Draw the point.
+ * point(x, y);
* }
*
*
- * function draw() {
- * let t = frameCount;
- * let x = 30 * cos(t * 0.1) + 50;
- * let y = 10 * sin(t * 0.2) + 50;
- * point(x, y);
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
*
* describe('A series of black dots form an infinity symbol.');
* }
+ *
+ * function draw() {
+ * // Calculate the coordinates.
+ * let x = 30 * cos(frameCount * 0.1) + 50;
+ * let y = 10 * sin(frameCount * 0.2) + 50;
+ *
+ * // Draw the point.
+ * point(x, y);
+ * }
*
*
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white ball on a string oscillates up and down.');
+ * }
+ *
* function draw() {
* background(200);
*
- * let t = frameCount;
+ * // Calculate the coordinates.
* let x = 50;
- * let y = 30 * sin(t * 0.05) + 50;
- * line(x, 50, x, y);
- * circle(x, y, 20);
+ * let y = 30 * sin(frameCount * 0.05) + 50;
*
- * describe('A white ball on a string oscillates up and down.');
+ * // Draw the oscillator.
+ * line(50, y, x, y);
+ * circle(x, y, 20);
* }
*
*
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of black dots form a wave pattern.');
+ * }
+ *
* function draw() {
+ * // Calculate the coordinates.
* let x = frameCount;
* let y = 30 * sin(x * 0.1) + 50;
- * point(x, y);
*
- * describe('A series of black dots form a wave pattern.');
+ * // Draw the point.
+ * point(x, y);
* }
*
*
- * function draw() {
- * let t = frameCount;
- * let x = 30 * cos(t * 0.1) + 50;
- * let y = 10 * sin(t * 0.2) + 50;
- * point(x, y);
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
*
* describe('A series of black dots form an infinity symbol.');
* }
+ *
+ * function draw() {
+ * // Calculate the coordinates.
+ * let x = 30 * cos(frameCount * 0.1) + 50;
+ * let y = 10 * sin(frameCount * 0.2) + 50;
+ *
+ * // Draw the point.
+ * point(x, y);
+ * }
*
*
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
+ * }
+ *
* function draw() {
+ * // Calculate the coordinates.
* let x = frameCount;
* let y = 5 * tan(x * 0.1) + 50;
- * point(x, y);
*
- * describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
+ * // Draw the point.
+ * point(x, y);
* }
*
*
- * let rad = QUARTER_PI;
- * let deg = degrees(rad);
- * text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
+ * function setup() {
+ * createCanvas(100, 100);
*
- * describe('The text "0.79 rad = 45˚".');
+ * background(200);
+ *
+ * // Calculate the angle conversion.
+ * let rad = QUARTER_PI;
+ * let deg = degrees(rad);
+ *
+ * // Display the conversion.
+ * text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
+ *
+ * describe('The text "0.79 rad = 45˚".');
+ * }
*
*
- * let deg = 45;
- * let rad = radians(deg);
- * text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
+ * function setup() {
+ * createCanvas(100, 100);
*
- * describe('The text "45˚ = 0.785 rad".');
+ * background(200);
+ *
+ * // Caclulate the angle conversion.
+ * let deg = 45;
+ * let rad = radians(deg);
+ *
+ * // Display the angle conversion.
+ * text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
+ *
+ * describe('The text "45˚ = 0.785 rad".');
+ * }
*
*
- * let r = 40;
- * push();
- * rotate(PI / 6);
- * line(0, 0, r, 0);
- * text('0.524 rad', r, 0);
- * pop();
- *
- * angleMode(DEGREES);
- * push();
- * rotate(60);
- * line(0, 0, r, 0);
- * text('60˚', r, 0);
- * pop();
- *
- * describe('Two diagonal lines radiating from the top left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Rotate 1/8 turn.
+ * rotate(QUARTER_PI);
+ *
+ * // Draw a line.
+ * line(0, 0, 80, 0);
+ *
+ * describe('A diagonal line radiating from the top-left corner of a square.');
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Rotate 1/8 turn.
+ * rotate(45);
+ *
+ * // Draw a line.
+ * line(0, 0, 80, 0);
+ *
+ * describe('A diagonal line radiating from the top-left corner of a square.');
+ * }
*
*
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Calculate the angle to rotate.
+ * let angle = TWO_PI / 7;
+ *
+ * // Move the origin to the center.
+ * translate(50, 50);
+ *
+ * // Style the flower.
+ * noStroke();
+ * fill(255, 50);
+ *
+ * // Draw the flower.
+ * for (let i = 0; i < 7; i += 1) {
+ * ellipse(0, 0, 80, 20);
+ * rotate(angle);
+ * }
+ *
+ * describe('A translucent white flower on a dark background.');
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(50);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Calculate the angle to rotate.
+ * let angle = 360 / 7;
+ *
+ * // Move the origin to the center.
+ * translate(50, 50);
+ *
+ * // Style the flower.
+ * noStroke();
+ * fill(255, 50);
+ *
+ * // Draw the flower.
+ * for (let i = 0; i < 7; i += 1) {
+ * ellipse(0, 0, 80, 20);
+ * rotate(angle);
+ * }
+ *
+ * describe('A translucent white flower on a dark background.');
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white ball on a string oscillates left and right.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the coordinates.
+ * let x = 30 * cos(frameCount * 0.05) + 50;
+ * let y = 50;
+ *
+ * // Draw the oscillator.
+ * line(50, y, x, y);
+ * circle(x, y, 20);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * describe('A white ball on a string oscillates left and right.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Calculate the coordinates.
+ * let x = 30 * cos(frameCount * 2.86) + 50;
+ * let y = 50;
+ *
+ * // Draw the oscillator.
+ * line(50, y, x, y);
+ * circle(x, y, 20);
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw the upper line.
+ * rotate(PI / 6);
+ * line(0, 0, 80, 0);
+ *
+ * // Use degrees.
+ * angleMode(DEGREES);
+ *
+ * // Draw the lower line.
+ * rotate(30);
+ * line(0, 0, 80, 0);
+ *
+ * describe('Two diagonal lines radiating from the top-left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');
+ * }
+ *
+ *