Skip to content

Commit 7c7d26b

Browse files
committed
Update: javascript meta tag for code blocks
1 parent aaf1edc commit 7c7d26b

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

projects/build-a-k-nearest-neighbor-model-with-p5js/build-a-k-nearest-neighbor-model-with-p5js.mdx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ Let's begin by creating a `class` to represent our points. Each point will have:
9898
- A random class (either red or green).
9999
- A function to draw itself on the canvas:
100100

101-
```javascript
101+
```js
102102
class Point {
103103
constructor() {
104104
this.x = Math.random() * width; // A random value along the x axis
@@ -125,7 +125,7 @@ class Point {
125125

126126
If you'd like to test creating and displaying a point, you can do so in the `setup()` function:
127127

128-
```javascript
128+
```js
129129
function setup() {
130130
createCanvas(300, 300);
131131
test_point = new Point();
@@ -139,21 +139,21 @@ Feel free to run your code a few times. Each time you run your code, your point
139139

140140
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`.
141141

142-
```javascript
142+
```js
143143
var points = [];
144144
```
145145

146146
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):
147147

148-
```javascript
148+
```js
149149
for (var i = 0; i < 20; i++) {
150150
points.push(new Point());
151151
}
152152
```
153153

154154
Finally, in the `draw()` function, loop through your list and call `.display()` on each point.
155155

156-
```javascript
156+
```js
157157
function draw() {
158158
background(255);
159159

@@ -180,7 +180,7 @@ Let's get started!
180180

181181
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:
182182

183-
```javascript
183+
```js
184184
function classifyMouse() {
185185
let distances = [];
186186

@@ -192,13 +192,13 @@ function classifyMouse() {
192192

193193
Next, we can use the `dist()` function to find the distance between our mouse and each point. Use this code inside your `for` loop:
194194

195-
```javascript
195+
```js
196196
let distance = dist(points[i].x, points[i].y, mouseX, mouseY);
197197
```
198198

199199
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:
200200

201-
```javascript
201+
```js
202202
distances.push([distance, points[i].class]);
203203
```
204204

@@ -210,15 +210,15 @@ This sort function is slightly complicated, because `distances` isn't simply a l
210210

211211
The following line of code will sort your list correctly. This should be put outside the `for` loop, but inside your `classifyMouse()` function:
212212

213-
```javascript
213+
```js
214214
distances.sort((a, b) => a[0] - b[0]);
215215
```
216216

217217
### Step 3.3: Count the Class of the 3 Nearest Neighbors
218218

219219
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:
220220

221-
```javascript
221+
```js
222222
let numZero = 0;
223223
let numOne = 0;
224224

@@ -236,7 +236,7 @@ for (var i = 0; i < 3; i++) {
236236

237237
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:
238238

239-
```javascript
239+
```js
240240
noStroke();
241241

242242
if (numOne > numZero) {

0 commit comments

Comments
 (0)