diff --git a/content/10_nn.html b/content/10_nn.html index 5189ff81..9e1f4198 100644 --- a/content/10_nn.html +++ b/content/10_nn.html @@ -543,7 +543,7 @@

Putting the “Network” in Neur

Machine Learning with ml5.js

That friend is ml5.js. This machine learning library can manage the details of complex processes like backpropagation so you and I don’t have to worry about them. As I mentioned earlier in the chapter, ml5.js aims to provide a friendly entry point for those who are new to machine learning and neural networks, while still harnessing the power of Google’s TensorFlow.js behind the scenes.

To use ml5.js in a sketch, you must import it via a <script> element in your index.html file, much as you did with Matter.js and Toxiclibs.js in Chapter 6:

-
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
+
<script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script>

My goal for the rest of this chapter is to introduce ml5.js by developing a system that can recognize mouse gestures. This will prepare you for Chapter 11, where I’ll add a neural network “brain” to an autonomous steering agent and tie machine learning back into the story of the book. First, however, I’d like to talk more generally through the steps of training a multilayered neural network model using supervised learning. Outlining these steps will highlight important decisions you’ll have to make before developing a learning model, introduce the syntax of the ml5.js library, and provide you with the context you’ll need before training your own machine learning models.

The Machine Learning Life Cycle

The life cycle of a machine learning model is typically broken into seven steps:

diff --git a/content/examples/06_libraries/6_5_compound_bodies_error/lollipop.js b/content/examples/06_libraries/6_5_compound_bodies_error/lollipop.js index d2ea762f..756c87e6 100644 --- a/content/examples/06_libraries/6_5_compound_bodies_error/lollipop.js +++ b/content/examples/06_libraries/6_5_compound_bodies_error/lollipop.js @@ -25,48 +25,48 @@ class Lollipop { // Drawing the lollipop show() { - // if (mouseIsPressed) { - // // The angle comes from the compound body - // let angle = this.body.angle; + if (mouseIsPressed) { + // The angle comes from the compound body + let angle = this.body.angle; - // //{!2} Get the position for each part - // let position1 = this.part1.position; - // let position2 = this.part2.position; + //{!2} Get the position for each part + let position1 = this.part1.position; + let position2 = this.part2.position; - // fill(127); - // stroke(0); - // strokeWeight(1); + fill(127); + stroke(0); + strokeWeight(1); - // // Translate and rotate the rectangle (part1) - // push(); - // translate(position1.x, position1.y); - // rotate(angle); - // rectMode(CENTER); - // rect(0, 0, this.w, this.h); - // pop(); + // Translate and rotate the rectangle (part1) + push(); + translate(position1.x, position1.y); + rotate(angle); + rectMode(CENTER); + rect(0, 0, this.w, this.h); + pop(); - // // Translate and rotate the circle (part2) - // push(); - // translate(position2.x, position2.y); - // rotate(angle); - // fill(200); - // circle(0, 0, this.r * 2); - // pop(); - // } else { - let position = this.body.position; - let angle = this.body.angle; - rectMode(CENTER); - fill(127); - stroke(0); - strokeWeight(1); - push(); - translate(position.x, position.y); - rotate(angle); - rect(0, 0, this.w, this.h); - fill(200); - circle(this.w / 2, 0, this.r * 2); - pop(); - // } + // Translate and rotate the circle (part2) + push(); + translate(position2.x, position2.y); + rotate(angle); + fill(200); + circle(0, 0, this.r * 2); + pop(); + } else { + let position = this.body.position; + let angle = this.body.angle; + rectMode(CENTER); + fill(127); + stroke(0); + strokeWeight(1); + push(); + translate(position.x, position.y); + rotate(angle); + rect(0, 0, this.w, this.h); + fill(200); + circle(this.w / 2, 0, this.r * 2); + pop(); + } } checkEdge() { diff --git a/content/images/06_libraries/06_libraries_6.png b/content/images/06_libraries/06_libraries_6.png index acc57006..e26384f4 100644 Binary files a/content/images/06_libraries/06_libraries_6.png and b/content/images/06_libraries/06_libraries_6.png differ diff --git a/content/images/07_ca/07_ca_11.png b/content/images/07_ca/07_ca_11.png index 89987683..867e922c 100644 Binary files a/content/images/07_ca/07_ca_11.png and b/content/images/07_ca/07_ca_11.png differ