From 9b998895d22c54c1105c2dc85e8589fe169ca4ba Mon Sep 17 00:00:00 2001 From: shiffman Date: Sat, 24 Feb 2024 17:29:56 +0000 Subject: [PATCH] Notion - Update docs --- content/03_oscillation.html | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/content/03_oscillation.html b/content/03_oscillation.html index d64e96d..d0d355e 100644 --- a/content/03_oscillation.html +++ b/content/03_oscillation.html @@ -300,10 +300,10 @@

Example 3.3: Pointing in
-
  show() {
-    // Use atan2() to account for all possible directions.
+

+  
  show() {
+    //{!1} Use atan2() to account for all possible directions.
     let angle = atan2(this.velocity.y, this.velocity.x);
-
     stroke(0);
     fill(127);
     push();
@@ -314,6 +314,7 @@ 
Example 3.3: Pointing in
     rect(0, 0, 30, 10);
     pop();
   }

+

 
To simplify this even further, the p5.Vector class provides a method called heading(), which takes care of calling atan2() and returns the 2D direction angle, in radians, for any p5.Vector:

 
    // The easiest way to do this!
     let angle = this.velocity.heading();

@@ -352,7 +353,6 @@ 
Example 3.4: Polar to Cartesian

 
 function setup() {
   createCanvas(640, 240);
-
   // Initialize all values.
   r = height * 0.45;
   theta = 0;
@@ -360,20 +360,16 @@ 
Example 3.4: Polar to Cartesian

 
 function draw() {
   background(255);
-
   // Translate the origin point to the center of the screen.
   translate(width / 2, height / 2);
-
-  // Polar coordinates (r, theta) are converted to Cartesian (x, y) for use in the circle() function.
+  //{!2} Polar coordinates (r, theta) are converted to Cartesian (x, y) for use in the circle() function.
   let x = r * cos(theta);
   let y = r * sin(theta);
-
   fill(127);
   stroke(0);
   line(0, 0, x, y);
   circle(x, y, 48);
-
-  // Increase the angle over time.
+  //{!1} Increase the angle over time.
   theta += 0.02;
 }

Polar-to-Cartesian conversion is common enough that p5.js includes a handy function to take care of it for you. It’s included as a static method of the p5.Vector class called fromAngle(). It takes an angle in radians and creates a unit vector in Cartesian space that points in the direction specified by the angle. Here’s how that would look in Example 3.4:

@@ -541,7 +537,6 @@

Example 3.6: Simple Harmonic Motio angle += angleVelocity; translate(width / 2, height / 2); - stroke(0); fill(127); line(0, 0, x, 0); @@ -574,9 +569,8 @@

Example 3.7: Oscillator Objects

show() { // Oscillating on the x-axis let x = sin(this.angle.x) * this.amplitude.x; - // Oscillating on the y-axis + //{!1} Oscillating on the y-axis let y = sin(this.angle.y) * this.amplitude.y; - push(); translate(width / 2, height / 2); stroke(0); @@ -598,7 +592,7 @@

Exercise 3.9

Incorporate angular acceleration into the Oscillator object.

Waves

-

Imagine a single circle oscillating up and down according to the sine function. This is the equivalent of simulating a single point along the x-axis of a wave pattern. With a little panache and a for loop, you can animate the entire wave by placing a whole bunch of these oscillating circles next to one another (Figure 3.12).

+

Imagine a single circle oscillating up and down according to the sine function. This is the equivalent of simulating a single point along the x-axis of a wave. With a little panache and a for loop, you can animate the entire wave by placing a series of oscillating circles next to one another (Figure 3.12).

Figure 3.12: Animating the sine wave with oscillating circles