P5.js and processing.js are really for educational and artistic doodling, not for commercial web design. There aren't many applications where d3 or raw js wouldn't be a more performant solution for commercial graphics. Hello, I have a question about accelerationX, accelerationY, accelerationZ and rotationX, rotationY, rotationZ. For a class project, I made a sketch on p5.js that records both the acceleration and the rotation of the mobile device and connected this sketch with firebase so that the recorded values will be stored there. I asked a bunch of my friends to run this sketch and I was observing how. How to use the JavaScript Console with P5.js. This builds upon the 'Hello World in P5.js' sketch. Processing is a free graphical library and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context.
Hello there! If you've landed here, that probably means you're interested in building your first ml5.js project. If so, wonderful! We invite you to read on.
ml5.js is being developed to make machine learning more accessible to a wider audience. Along with supporting education and critical engagement with machine learning, the ml5 team is working actively to wrap exciting machine learning functionality in a friendlier and easier-to-use way. The following example introduces you ml5.js through a classic application of machine learning: image classification.
This example showcases how you can use a pre-trained model called MobileNet -- a machine learning model trained to recognize the content of certain images -- in ml5.js. The example aims to highlight a general pattern for how ml5.js projects are setup.
ml5.js is growing every day, so be sure to see some of the other applications of ml5 in the reference section and their accompanying examples for the latest offerings.
Setup
If you've arrived here, we assume you've checked out our quickstart page to get a simple ml5.js project set up. To get this to run, you'll need:
- 📝 A text editor (e.g. Atom, VSCode, Sublimetext)
- 💻 Your web browser: Chrome & Firefox preferred
- 🖼 An image to run your classification on
P5.js Hello World
Your project directory should look something like this:
Where:
📂/hello-ml5: is the root project folder
- 📂/images: is a folder that contains your image
- 🖼 bird.png: is a .png image of a bird (it can also be something else!)
- 🗒index.html: is an .html file that has your html markup and library references
- 🗒sketch.js: is where you'll be writing your javascript
Demo
This example is built with p5.js. You can also find the same example without p5.js here.
Code
Your index.html
Here you can see that we read in the javascript libraries. This includes our ml5.js version as well as p5.js. You can copy and paste this into your index.html file or for good practice you can type it all out. Make sure to save the file and refresh your browser after saving.
Your sketch.js
Inside your sketch.js file you can type out (or copy and paste) the following code. Notice in this example we have a reference to 'images/bird.png'. You'll replace this with the name of your image.
Our sketch.js explained in 4 steps
Step 1: Define your variables
Here we define our variables that we will assign our classifier and image to.
Step 2: Load your imageClassifier and image
Use p5's preload() function to load our imageClassifier model and our bird image before running the rest of our code. Since machine learning models can be large, it can take time to load. We use preload() in this case to make sure our imageClassifier and image are ready to go before we can apply the image classification in the next step.
Step 3: Setup, classify, and display
In p5.js we use the setup() function for everything in our program that just runs once. In our program, we use the setup() function to:
- create a canvas to render our image
- call .classify() on our classifier to classify our image
- render the image to the canvas
You will notice that the .classify() function takes two parameters: 1. the image you want to classify, and 2. a callback function called gotResult. Let's look at what gotResult does.
Step 4: Define the gotResult() callback function
The gotResult() function takes two parameters: 1. error, and 2. results. These get passed along to gotResult() when the .classify() function finishes classifying the image. If there is an error, then an error will be logged. If our classifier manages to recognize the content of the image, then a result will be returned.
P5 Js Code
In the case of our program, we create a div that displays the label and the confidence of the content of the image that has been classified. The nf() function is a p5 function that formats our number to a nicer string.
And voila!
You've just made a simple machine learning powered program that:
- takes an image,
- classifies the content of that image, and
- displays the results all in your web browser!
Not all of our examples are structured exactly like this, but this provides a taste into how ml5.js is trying to make machine learning more approachable. Try using different images and seeing what kinds of things get returned.
P5 Js Editor Download
Some guiding questions you might start to think about are:
- When classifying an image with MobileNet, does the computer see people? If not, why do you think that is?
- Do you notice that MobileNet is better at classifying some animals over others? Why do you think that is?
Source
Comments are closed.