diff --git a/docs/README.md b/docs/README.md index 371b130..38c75ea 100644 --- a/docs/README.md +++ b/docs/README.md @@ -21,7 +21,6 @@ We will using a p5.js sketch running on the [p5.js web editor](https://editor.p5 Once you have the p5.js web editor open, unfold the project directory by clicking the arrow `>` at the top left corner. -
screenshot of sketch files on the p5 web editor interface
@@ -36,9 +35,27 @@ Now, let's switch to the `index.html` file and copy and paste the following CDN screenshot of importing ml5 library in index.html file +We can check if the ml5.js library has been imported successfully by using the `console.log()` method. Use the project directory to switch back to the `sketch.js` file and include this line of code inside the `setup()` function: + +```js +console.log("ml5 version:", ml5.version); +``` + +Press the run button on the top left corner of the editor to run the sketch. + +
+ screenshot of adding console.log method to p5 sketch +
+ +If everything loaded properly, you should see the version number of the ml5.js library show up in the console. + +
+ screenshot of p5 console showing ml5 version +
+ ## Load pretrained ml5.js model {docsify-ignore} -Use the project directory to switch back to the `sketch.js` file. We will define a variable called `classifier` to hold the image classifier model. +In the `sketch.js` file, we will define a variable called `classifier` to hold the image classifier model. ```js let classifier; @@ -59,7 +76,7 @@ function preload() { Let's unfold the project directory again by clicking the arrow `>` at the top left corner of the p5.js editor.
- screenshot of sketch files on the p5 web editor interface + screenshot of opening sketch files on the p5 web editor interface
Select the `+` to create a new folder called `images`. diff --git a/docs/assets/gettingstarted-create_folder_alpha.png b/docs/assets/gettingstarted-create_folder_alpha.png index 3c11137..104e0c2 100644 Binary files a/docs/assets/gettingstarted-create_folder_alpha.png and b/docs/assets/gettingstarted-create_folder_alpha.png differ diff --git a/docs/assets/gettingstarted-import-lib-alpha.png b/docs/assets/gettingstarted-import-lib-alpha.png index 4468527..d9c1252 100644 Binary files a/docs/assets/gettingstarted-import-lib-alpha.png and b/docs/assets/gettingstarted-import-lib-alpha.png differ diff --git a/docs/assets/gettingstarted-ml5-version-console.png b/docs/assets/gettingstarted-ml5-version-console.png new file mode 100644 index 0000000..7fe4d8e Binary files /dev/null and b/docs/assets/gettingstarted-ml5-version-console.png differ diff --git a/docs/assets/gettingstarted-ml5-version-run.png b/docs/assets/gettingstarted-ml5-version-run.png new file mode 100644 index 0000000..7441d5f Binary files /dev/null and b/docs/assets/gettingstarted-ml5-version-run.png differ diff --git a/docs/assets/gettingstarted-run-sketch-alpha.png b/docs/assets/gettingstarted-run-sketch-alpha.png index fb7ca99..fb558b0 100644 Binary files a/docs/assets/gettingstarted-run-sketch-alpha.png and b/docs/assets/gettingstarted-run-sketch-alpha.png differ diff --git a/docs/assets/gettingstarted-sketch-folder-alpha.png b/docs/assets/gettingstarted-sketch-folder-alpha.png index 921ec85..58aa147 100644 Binary files a/docs/assets/gettingstarted-sketch-folder-alpha.png and b/docs/assets/gettingstarted-sketch-folder-alpha.png differ diff --git a/docs/assets/gettingstarted-upload-file-alpha.png b/docs/assets/gettingstarted-upload-file-alpha.png index 390cbdd..d14cbc0 100644 Binary files a/docs/assets/gettingstarted-upload-file-alpha.png and b/docs/assets/gettingstarted-upload-file-alpha.png differ