mirror of
https://github.com/nature-of-code/noc-book-2
synced 2024-11-17 07:49:05 +01:00
Notion - Update docs
This commit is contained in:
parent
53547db46d
commit
e21b8b339d
3 changed files with 3 additions and 3 deletions
|
@ -20,9 +20,9 @@
|
|||
<p>To model oscillation, you need to understand a little bit about <strong>trigonometry</strong>, the mathematics of triangles. Learning some trig will give you new tools to generate patterns and create new motion behaviors in a p5.js sketch. You’ll learn to harness angular velocity and acceleration to spin objects as they move. You’ll be able to use the sine and cosine functions to model nice ease-in, ease-out wave patterns. You’ll also learn to calculate the more complex forces at play in situations that involve angles, such as a pendulum swinging or a box sliding down an incline.</p>
|
||||
<p>I’ll start with the basics of working with angles in p5.js, then cover several aspects of trigonometry. In the end, I’ll connect trigonometry with what you learned about forces in <a href="/forces#">Chapter 2</a>. This chapter’s content will pave the way for more sophisticated examples that require trig later in this book.</p>
|
||||
<h2 id="angles">Angles</h2>
|
||||
<p>Before going any further, I need to make sure you understand how the concept of an <strong>angle</strong> fits into creative coding in p5.js. If you have experience with p5.js, you’ve undoubtedly encountered this issue while using the <code>rotate()</code> function to rotate and spin objects.</p>
|
||||
<p>Before going any further, I need to make sure you understand how the concept of an <strong>angle</strong> fits into creative coding in p5.js. If you have experience with p5.js, you’ve undoubtedly encountered this issue while using the <code>rotate()</code> function to rotate and spin objects. You’re most likely to be familiar with the concept of an angle as measured in <strong>degrees</strong> (see Figure 3.1).</p>
|
||||
<figure>
|
||||
<img src="images/03_oscillation/03_oscillation_2.png" alt="Figure 3.1: Angles measured in degrees">
|
||||
<img src="images/03_oscillation/03_oscillation_2.jpg" alt="Figure 3.1: Angles measured in degrees">
|
||||
<figcaption>Figure 3.1: Angles measured in degrees</figcaption>
|
||||
</figure>
|
||||
<div class="half-width-right">
|
||||
|
@ -31,7 +31,7 @@
|
|||
<figcaption>Figure 3.2: A square rotated by 45 degrees</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<p>You’re most likely to be familiar with the concept of an angle as measured in <strong>degrees</strong> (see Figure 3.1). A full rotation goes from 0 to 360 degrees, and 90 degrees (a right angle) is one-fourth of 360, shown in Figure 3.1 as two perpendicular lines.</p>
|
||||
<p>A full rotation goes from 0 to 360 degrees, and 90 degrees (a right angle) is one-fourth of 360, shown in Figure 3.1 as two perpendicular lines.</p>
|
||||
<p>Angles are commonly used in computer graphics to specify a rotation for a shape. For example, the square in Figure 3.2 is rotated 45 degrees around its center.</p>
|
||||
<div class="half-width-right">
|
||||
<figure>
|
||||
|
|
BIN
content/images/03_oscillation/03_oscillation_2.jpg
Normal file
BIN
content/images/03_oscillation/03_oscillation_2.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
Before Width: | Height: | Size: 131 KiB |
Loading…
Reference in a new issue