Classify your Doodles with Code

Coding


Table of Contents

  1. Classify your Doodles using coding with Javascript
  2. The P5 coding environment
  3. Neural networks and machine learning
  4. Coding
  5. Challenges
  6. Reference

Doodle Classification with DoodleNet

DoodleNet is a neural network that has already been trained to recognise lots of different doodles (345 different classes, in fact). Let's try it out.

Click on this link:

Doodle Classifier

Start drawing some pictures.

Doodlenet

You can see a list of all the different classes of doodles that DoodleNet understands here:

DoodleNet Categories



What happens if you draw something that is not in the list of classes that DoodleNet understands?


Building our Own Doodle Classifier

DoodleNet is great, but what if we wanted it to recognised some new classes of doodles? For example, poodles, avocados and scooters! Let's do this! You can come up with your own classes, but I'll use poodles, avocados and scooters. Try to come up with classes that are quite distinct from each other. It might be difficult to make distinctive drawings of very similar classes. So pigeon, sparrow, blackbird might be a tricky one!

Index

To build our own doodle classifier we will:

Create Some Doodles

Click on the link below to open up the Doodle Creator code:

Doodle Creator

Duplicate the code (go to File->Duplicate). This will allow you to edit it.

Find these lines of code near the top of sketch.js:

let class1Name = "class1";
let class2Name = "class2";
let class3Name = "class3";

Change them to the names of the doodle classes you will be using. e.g:

let class1Name = "poodle";
let class2Name = "avocado";
let class3Name = "scooter";

Now run the program. You should see something like this:

Creator1

Draw an image and press the corresponding button.

Creator2

The image will be downloaded.

Draw a few more images, around 10 for each class.

Once you have done this you should have a collection of images in your downloads directory:

Creator4

You now have all the training data you will need to train the neural network.

Train a Neural Network using Teachable Machine

Teachable Machine is an online machine learning tool.

Start up Teachable Machine by clicking on this link:

Teachable Machine

Click on the Get Started button.

Getstarted

Create an Image Project.

Teachable1

You should see 2 classes. Create a third one and name all 3 according to your chosen classes:

Teachable2

Now click the Upload button and upload the images you created before under the correct class:

Teachable3

Once you have uploaded all 3 classes of image, click on the Train Model button:

Teachable4

The neural network will now be trained.

You can test the neural network by dragging your images into the preview window:

Teachable5

Or you could draw on a piece of paper and show the paper to your webcam.


If it doesn't seem to be working you may need to retrain your neural network with some more images or some different images


We will use this neural network model in some code we will be writing. To do that we need to export the model.

Click on the Export Model button. You will see an option to upload the model:

Teachable6

Click on the Upload my model button. You will get a shareable link:

Teachable7

Copy this link and save it somewhere. You will need it for the next bit of code.

Build our Classifier

Open up the classifier code:

Classifier Code

Duplicate the code (go to File->Duplicate).

Find the line of code that sets up the model:

let myModel = "https://teachablemachine.withgoogle.com/models/QTFGnTjTM/model.json"

Change this to the link you copied from Teachable Machine. Make sure you keep the /model.json at the end of the line.

Now run the program. Draw some pictures and check that it classifies the doodles correctly.

Classifier



Above what percentage do you think your neural network is confidently making good classifications?


That's it! You've trained a neural network and used it to create your own personal doodle classifier!

Table of Contents

  1. Classify your Doodles using coding with Javascript
  2. The P5 coding environment
  3. Neural networks and machine learning
  4. Coding
  5. Challenges
  6. Reference