Skip to content

Commit

Permalink
Notion - Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
shiffman authored Jul 7, 2023
1 parent 8c91394 commit f572ea8
Show file tree
Hide file tree
Showing 23 changed files with 762 additions and 75 deletions.
2 changes: 1 addition & 1 deletion content/01_vectors.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h2 id="the-point-of-vectors">The Point of Vectors</h2>
<h3 id="example-11-bouncing-ball-with-no-vectors">Example 1.1: Bouncing Ball with No Vectors</h3>
<figure>
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/oadKdOndU" data-example-path="examples/01_vectors/example_1_1_bouncing_ball_with_no_vectors"><img src="examples/01_vectors/example_1_1_bouncing_ball_with_no_vectors/screenshot.png"></div>
<figcaption>If you’re reading this book as a PDF or in print, this is the first example where the screenshot includes a trail to give a sense of the motion in the sketch. For more about how to draw tails, see the code examples linked from the website.</figcaption>
<figcaption>If you’re reading this book as a PDF or in print, this is the first example where the screenshot includes a trail to give a sense of the motion in the sketch. For more about how to draw trails, see the code examples linked from the website.</figcaption>
</figure>
</div>
<pre class="codesplit" data-code-language="javascript">// Variables for position and speed of ball.
Expand Down
127 changes: 65 additions & 62 deletions content/05_steering.html

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion content/06_libraries.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ <h1 id="chapter-6-physics-libraries">Chapter 6. Physics Libraries</h1>
<p>These activities have yielded a set of motion simulation examples, allowing you to creatively define the physics of the worlds you build (whether realistic or fantastical). Of course, we’re not the first to do this. The world of computer graphics and programming is full of source code dedicated to physics simulations. Just try searching “open-source physics engine” and you could spend the rest of your day pouring over rich and complex code. This begs the question: If a code library takes care of physics simulation, why should you bother learning how to write any of the algorithms yourself?</p>
<p>Here is where the philosophy behind this book comes into play. While many of the libraries out there provide “out of the box” physics (and super awesome sophisticate and robus physics at that), there are significant reasons for learning the fundamentals before diving into libraries. First, without an understanding of vectors, forces, and trigonometry, you’d likely be lost just reading the documentation of a library. Second, even though a library may take care of the math behind the scenes, it won’t necessarily simplify your code. There can be a great deal of overhead in understanding how a library works and what it expects from you code-wise. Finally, as wonderful as a physics engine might be, if you look deep down into your hearts, it’s likely that you seek to create worlds and visualizations that stretch the limits of imagination. A library is great, but it provides a limited set of features. It’s important to know both when to live within those limitations in the pursuit of a creative coding project and when those limits prove to be confining.</p>
<p>This chapter is dedicated to examining two open-source physics libraries for JavaScript—<a href="https://brm.io/matter-js/">matter.js</a> and the toxiclibs.js. This is not to say that these are the only libraries I specifically recommend for any and all creative coding projects that merit the use of a physics engine. Both, however, integrate nicely with p5.js and will allow me to demonstrate the fundamental concepts behind physics engines and how they relate to and build upon the material from the first five chapters of this book.</p>
<p>There are a multitude of other physics libraries worth exploring alongside these two case studies. Two that I would highly recommend are <a href="https://p5play.org/">p5.play</a> (created by Paolo Pedercini and developed by Quinton Ashley) and <a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a> (by Jasper Palfree). p5.play was specifically designed for game development and simplifies the creation of visual objects—known as “sprites”—and manages their interactions, or “collisions”. As noted in the name, it’s tailored to work seamlessly with p5.js. PhysicsJS also has a comprehensive set of features including collision detection and resolution, gravity, and friction among others. Each of these libraries has its own strengths, and may offer unique advantages for specific projects. The aim of this chapter isn't to limit you to matter.js and toxiclibs.js, but to provide you with a foundation in working with physics libraries. The skills you acquire here will enable you to navigate and understand documentation, opening the door to expanding your abilities with any library you choose. Check the book’s website for ports of the examples in this chapter to other libraries.</p>
<p>There are a multitude of other physics libraries worth exploring alongside these two case studies. One that I would highly recommend is <a href="https://p5play.org/">p5play</a>, a project that was initiated by Paolo Pedercini and currently led by Quinton Ashley. p5play was specifically designed for game development and simplifies the creation of visual objects—known as “sprites”—and manages their interactions, namely “collisions” and "overlaps". As you may have guessed from the name, it’s tailored to work seamlessly with p5.js. It uses Box2D for physics simulation, which I’ll discuss in the next section.</p>
<p>Each physics library has its own strengths, and may offer unique advantages for specific projects. The aim of this chapter isn't to limit you to matter.js and toxiclibs.js, but to provide you with a foundation in working with physics libraries. The skills you acquire here will enable you to navigate and understand documentation, opening the door to expanding your abilities with any library you choose. Check the book’s website for ports of the examples in this chapter to other libraries.</p>
<h2 id="what-is-matterjs">What is Matter.js?</h2>
<p>When I first began writing this book, matter.js did not exist! The physics engine I used to demonstrate the examples at the time was (and likely still is) the most well known of them all: Box2D. Box2D began as a set of physics tutorials written in C++ by Erin Catto for the Game Developer’s Conference in 2006. Since then it has evolved into a rich and elaborate open-source physics engine. It’s been used for countless projects, most notably highly successful games such as the award-winning Crayon Physics and the runaway hit Angry Birds.</p>
<p>One of the key things about Box2D is that it is a true physics engine. Box2D knows nothing about computer graphics and the world of pixels. All of Box2D’s measurements and calculations are real-world measurements (meters, kilograms, seconds)—only its “world” is a two-dimensional plane with top, bottom, left, and right edges. You tell it things like: “The gravity of the world is 9.81 newtons per kilogram, and a circle with a radius of four meters and a mass of fifty kilograms is located ten meters above the world’s bottom.” Box2D will then tell you things like: “One second later, the rectangle is at five meters from the bottom; two seconds later, it is ten meters below,” and so on. While this provides for an amazing and realistic physics engine, it also necessitates lots of complicated code in order to translate back and forth between the physics “world” (a key term in Box2D) and the world you want to draw — the “pixel” world of graphics canvas.</p>
Expand Down
20 changes: 10 additions & 10 deletions content/09_ga.html
Original file line number Diff line number Diff line change
Expand Up @@ -320,21 +320,21 @@ <h3 id="step-1-initialize-population">Step 1: Initialize Population</h3>
<p>What should go in the <code>DNA</code> class? For a typing monkey, its DNA would be the random phrase it types, a string of characters. However, using an array of characters (rather than a string object) provides a more generic template that can extend easily to other data types. For example, the DNA of a creature in a physics system could be an array of vectors—or for an image, an array of numbers (RGB pixel values). Any set of properties can be listed in an array, and even though a string is convenient for this particular scenario, an array will serve as a better foundation for future evolutionary examples.</p>
<p>The genetic algorithm specifies that I create a population of <span data-type="equation">N</span> elements, each with <em>randomly generated genes</em>. The DNA constructor therefore includes a loop to fill in each element of the <code>genes</code> array.</p>
<pre class="codesplit" data-code-language="javascript">class DNA {
constructor(length){
//{!1} The individual "genes" are stored in an array
this.genes = [];
// There are "length" genes
for (let i = 0; i &#x3C; length; i++) {
constructor(length){
//{!1} The individual "genes" are stored in an array
this.genes = [];
// There are "length" genes
for (let i = 0; i &#x3C; length; i++) {
// Each gene is a random character
this.genes[i] = randomCharacter();
}
}
this.genes[i] = randomCharacter();
}
}
}</pre>
<p>In order to randomly generate a character, I will write a helper function called <code>randomCharacter()</code> for each individual gene.</p>
<pre class="codesplit" data-code-language="javascript">// Return a random character (letter, number, symbol, space, etc)
function randomCharacter() {
let c = floor(random(32, 127));
return String.fromCharCode(c);
let c = floor(random(32, 127));
return String.fromCharCode(c);
}</pre>
<p>The random numbers picked correspond to a specific character according to a standard known as ASCII (American Standard Code for Information Interchange). <code>String.fromCharCode(c)</code> is a native JavaScript function that converts the number into its corresponding character based on that standard. Note that this function will also return numbers, punctuation marks, and special characters. A more modern approach might involve the “Unicode” standard, which includes emojis and characters from a wide variety of world languages.</p>
<p>Now that I have the constructor, I can return to <code>setup()</code> and initialize each <code>DNA</code> object in the population array.</p>
Expand Down
Loading

0 comments on commit f572ea8

Please sign in to comment.