Basic drawing example. By drawing an ellipse where the mouse is every frame we can draw on the canvas:

 ellipse(mouseX, mouseY, 20, 20);

The reason this works is that we are not clearing the frame for each draw with background(0);

However, this makes for a very dotted drawing app. To get a continuous line we need to draw a line between the last position of the mouse (pmouseX/Y) and the current position (mouseX/Y) like so:

line(pmouseX, pmouseY, mouseX, mouseY);

More info about line, pmouseX and mouseX. 

This app is a good starting point for experimenting things you can do: Change the color of the line, combine it with the change color below, combine it with the pose app further down and add randomness to make more interesting things.

Use dist() to calculate the distance between two points. Combine this with an if statement and you can change the color when the distance to the mouse is within the circle size.

  if (dist(mouseX, mouseY, 240, 240) < 150 / 2) {

    fill(255, 0, 0, 150);

  } else {

    fill(209, 157, 44, 70);

  }

https://p5js.org/reference/#/p5/if-else 

https://p5js.org/reference/#/p5/dist 

Another programmer mistake is to not be mindful of the fonts they are using. It is common to just use the default font or a random font.  A good place to start is to look at googles fonts and see if you can find one that matches your concept. This example uses two fonts loaded directly from googles font library. To use this do the following:

• Find the name and type of the font (e.g. Sans or Serif).

• Load the font in setup: loadGoogleFont( 'Droid Sans');

• Set the font before writing text: textFont('Droid Sans');

Picking the right font for your project is a science in itself read more here.

https://p5js.org/reference/#/p5/textFont 

This is a pretty advanced example, but it illustrates how you can simulate physics. Try to play with the parameters at the top to see how it changes the behaviour:

let numBalls = 20;

let spring = 0.05;

let gravity = 0.03;

let friction = -0.9;

The reason the balls have light trails is that the background is semi transparent. Based on code from Keith Peters. Multiple-object collision.

This is a simple pong examle. It moves a ball around on the canvas. If the ball is within the area of the square the balls direction is reversed on the axis that collided.

Object detection libraries have ben taught to recognize object through a hupe library of images of different objects - the cocossd method has the following syntax:

for (let i = 0; i < detections.length; i++) {

    let object = detections[i];

    rect(object.x, object.y, object.width, object.height);

    text(object.label, object.x + 10, object.y + 24);

}

The for loop run through the objects detected in the array detections. For each object, it draws a rectangle around the object and adds a text label.

Be aware that the library takes a while to load.

Speech to text will listen to the audio input and convert it into text. It is not precise, but surprisingly good. You can then try to detect words and use them to do things. Right now it is responding to "kage". The small text is interim results and the large text is the final result.

This example plays a string of text. This way you can make interactions that are based on voice-based language instead of visuals etc.  To have the voice say "Husk at spise fisk" you would need to write:

playText("Husk at spise fisk");

This is a combined sketch which allows you to listen to  voices and return a string based on keyword matches.

In this example you record different kinds of poses and through machine learning it will recognize which poses you are in. 

• Start the program.

• Press add pose as many times as you want poses

• Go into the physical pose in front of the camera and press the pose that should match.

• Do this with all the poses

• Then you can get the best match through findBestMatch().id

• If you want to keep the learned poses - press download and you will get a file that you can reupload. Set the variable classifierName to the name of the file in the top of the program.

This example uses the teachable machine toturial from google. 

• Go to the webpage and press get started. 

• Chose image classification.

• Name the two classes. E.g Cup and noCup.

• Record a bunch of images with either a cup or no cup.

• Ask it to train your classifier.

• When done press export model. 

• Press the upload model button.

• Copy paste the sharable link ind to the example sketch for the "imageModelURL" at the top of the sketch.

• Run your code.

Their pose classification system is not really working for p5JS at the moment so use the example above for that

https://ffd8.github.io/oscillation-sandbox/?fbclid=IwAR0yb0-DALHTJI2f_8w0cPSgyLNQMmf6zpJUNco03YOr0gjfKXP0-sDAUr8

PIE CHART

https://editor.p5js.org/codingtrain/sketches/UtOWCSYYF

Linear regression