You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: projects/build-a-k-nearest-neighbor-model-with-p5js/build-a-k-nearest-neighbor-model-with-p5js.mdx
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -98,7 +98,7 @@ Let's begin by creating a `class` to represent our points. Each point will have:
98
98
- A random class (either red or green).
99
99
- A function to draw itself on the canvas:
100
100
101
-
```javascript
101
+
```js
102
102
classPoint {
103
103
constructor() {
104
104
this.x=Math.random() * width; // A random value along the x axis
@@ -125,7 +125,7 @@ class Point {
125
125
126
126
If you'd like to test creating and displaying a point, you can do so in the `setup()` function:
127
127
128
-
```javascript
128
+
```js
129
129
functionsetup() {
130
130
createCanvas(300, 300);
131
131
test_point =newPoint();
@@ -139,21 +139,21 @@ Feel free to run your code a few times. Each time you run your code, your point
139
139
140
140
Rather than just creating and displaying a single point, let's create a whole set of points. At the very top of your code, outside of any functions, create an empty array named `points`.
141
141
142
-
```javascript
142
+
```js
143
143
var points = [];
144
144
```
145
145
146
146
Then, inside of `setup()` use a `for` loop to create 20 `Points` (feel free to delete your code that created `test_point` from the last step):
147
147
148
-
```javascript
148
+
```js
149
149
for (var i =0; i <20; i++) {
150
150
points.push(newPoint());
151
151
}
152
152
```
153
153
154
154
Finally, in the `draw()` function, loop through your list and call `.display()` on each point.
155
155
156
-
```javascript
156
+
```js
157
157
functiondraw() {
158
158
background(255);
159
159
@@ -180,7 +180,7 @@ Let's get started!
180
180
181
181
We need to find the distance between our mouse pointer and each `Point` in our dataset. We'll put each distance in an array. Let's begin by creating an empty array and setting up our `for` loop:
182
182
183
-
```javascript
183
+
```js
184
184
functionclassifyMouse() {
185
185
let distances = [];
186
186
@@ -192,13 +192,13 @@ function classifyMouse() {
192
192
193
193
Next, we can use the `dist()` function to find the distance between our mouse and each point. Use this code inside your `for` loop:
194
194
195
-
```javascript
195
+
```js
196
196
let distance =dist(points[i].x, points[i].y, mouseX, mouseY);
197
197
```
198
198
199
199
Finally, we don't want to simply add the distance to our list. We need to add the distance **AND** the `class` of the `Point` associated with that distance. Inside your food loop, write the following line of code:
200
200
201
-
```javascript
201
+
```js
202
202
distances.push([distance, points[i].class]);
203
203
```
204
204
@@ -210,15 +210,15 @@ This sort function is slightly complicated, because `distances` isn't simply a l
210
210
211
211
The following line of code will sort your list correctly. This should be put outside the `for` loop, but inside your `classifyMouse()` function:
212
212
213
-
```javascript
213
+
```js
214
214
distances.sort((a, b) => a[0] - b[0]);
215
215
```
216
216
217
217
### Step 3.3: Count the Class of the 3 Nearest Neighbors
218
218
219
219
Let's now loop through the first 3 items in the list and count the number of times class `1` and class `0` show up:
220
220
221
-
```javascript
221
+
```js
222
222
let numZero =0;
223
223
let numOne =0;
224
224
@@ -236,7 +236,7 @@ for (var i = 0; i < 3; i++) {
236
236
237
237
We now know whether the mouse should be classified as red or green. Let's draw a small circle at the location of the mouse with the correct color. This should be the end of your `classifyMouse()` function, outside of all loops:
0 commit comments