Tutorials References Exercises Videos Pro NEW Menu
Paid Courses Website NEW

Pattern Recognition

Neural Networks are used in applications like Facial Recognition.

These applications use Pattern Recognition.

This type of Classification can be done with a Perceptron.

Pattern Classification

Imagine a strait line (a linear graph) in a space with scattered x y points.

How can you classify the points over and under the line?

A perceptron can be trained to recognize the points over the line, without knowing the formula for the line.


A Perceptron is often used to classify data into two parts.

A Perceptron is also known as a Linear Binary Classifier.

How to Program a Perceptron

To learn more about how to program a perceptron, we will create a very simple JavaScript program that will:

  1. Create a simple plotter
  2. Create 500 random x y points
  3. Display the x y points
  4. Create a line function: f(x)
  5. Display the line
  6. Compute the desired answers
  7. Display the desired answers

Create a Simple Plotter

Use the simple plotter object described in the AI Plotter Chapter.


const plotter = new XYPlotter("myCanvas");

const xMax = plotter.xMax;
const yMax = plotter.yMax;
const xMin = plotter.xMin;
const yMin = plotter.yMin;

Create Random X Y Points

Create as many xy points as wanted.

Let the x values be random, between 0 and maximum.

Let the y values be random, between 0 and maximum.

Display the points in the plotter:


const numPoints = 500;
const xPoints = [];
const yPoints = [];
for (let i = 0; i < numPoints; i++) {
  xPoints[i] = Math.random() * xMax;
  yPoints[i] = Math.random() * yMax;

Try it Yourself »

Create a Line Function

Display the line in the plotter:


function f(x) {
  return x * 1.2 + 50;

Try it Yourself »

Compute Desired Answers

Compute the desired answers based on the line function:

y = x * 1.2 + 50.

The desired answer is 1 if y is over the line and 0 if y is under the line.

Store the desired answers in an array (desired[]).


let desired = [];
for (let i = 0; i < numPoints; i++) {
  desired[i] = 0;
  if (yPoints[i] > f(xPoints[i])) {desired[i] = 1;}

Display the Desired Answers

For each point, if desired[i] = 1 display a black point, else display a blue point.


for (let i = 0; i < numPoints; i++) {
  let color = "blue";
  if (desired[i]) color = "black";
  plotter.plotPoint(xPoints[i], yPoints[i], color);

Try it Yourself »

How to Train a Perceptron

In the next chapters, you will learn more about how to Train the Perceptron