The Joy of AI: Let’s build a Perceptron part 2
Introduction
If you have never coded before or never used p5.js then if you follow the link below to part 1 you can download a free eBook (pdf) that will gently introduce you to this wonderful coding language.
Sketch 1 starting sketch
We need to get coding so here is our starting sketch
function setup()
{
createCanvas(400, 400)
}
function draw()
{
background(220)
}Sketch 2 perceptron class
We are going to create a perceptron class with a constructor function that takes in an array for the weights.
We add the following code
class Perceptron
{
constructor()
{
this.weights = []
}
}To give you:
function setup()
{
createCanvas(400, 400)
}
function draw()
{
background(220)
}
class Perceptron
{
constructor()
{
this.weights = []
}
}Sketch 3 inputs and weights
We have three inputs x, y, and bias which we will give as a variable n, this will be an argument in the constructor(). The weights are randomly generated. By using a variable we can ensure that the array of weights has the same numbers inputs.
Add these lines of code:
constructor(n) for (let i = 0; i < n; i++)
{
this.weights[i] = random(-1, 1)
}To give you:
function setup()
{
createCanvas(400, 400)
}
function draw()
{
background(220)
}
class Perceptron
{
constructor(n)
{
this.weights = []
for (let i = 0; i < n; i++)
{
this.weights[i] = random(-1, 1)
}
}
}Sketch 4 feedForward and activate
We need to create two functions inside the perceptron. Firstly a function to multiply the inputs by their weights and then add them all together, we will call this feedForward(). The second is the activation function which is the sum of all the inputs and weights from the feedforward() function and decides whether it is going to output +1 or -1, we will call this activate()
We add these lines of code:
feedForward()
{
}
activate()
{
}To give you:
function setup()
{
createCanvas(400, 400)
}
function draw()
{
background(220)
}
class Perceptron
{
constructor(n)
{
this.weights = []
for (let i = 0; i < n; i++)
{
this.weights[i] = random(-1, 1)
}
}
feedForward()
{
}
activate()
{
}
}Sketch 5 feedForward
The feedForward() function takes the inputs and the weights and multiplies them, then adds them all together to return a variable we will call sum. We haven’t given it any inputs yet but we are just building the. at this stage. The length of the array for weights this.weights is the same as the inputs, so we use this for managing the length of the feedForward() function.
Add these lines of code:
let sum = 0 feedForward(inputs)
{
for (let i = 0; i < this.weights.length; i++)
{
sum += inputs[i] * this.weights[i]
}
}To give you:
let sum = 0
function setup()
{
createCanvas(400, 400)
}
function draw()
{
background(220)
}
class Perceptron
{
constructor(n)
{
this.weights = []
for (let i = 0; i < n; i++)
{
this.weights[i] = random(-1, 1)
}
}
feedForward(inputs)
{
for (let i = 0; i < this.weights.length; i++)
{
sum += inputs[i] * this.weights[i]
}
}
activate()
{
}
}Sketch 6 activation function
Now let us have a look at the activation function in activate(). The function returns +1 if the sum is positive and -1 if the sum is negative.
Add these lines of code:
activate(sum)
{
if (sum > 0)
{
return 1
}
else
{
return -1
}
}To give you:
let sum = 0
function setup()
{
createCanvas(400, 400)
}
function draw()
{
background(220)
}
class Perceptron
{
constructor(n)
{
this.weights = []
for (let i = 0; i < n; i++)
{
this.weights[i] = random(-1, 1)
}
}
feedForward(inputs)
{
for (let i = 0; i < this.weights.length; i++)
{
sum += inputs[i] * this.weights[i]
}
}
activate(sum)
{
if (sum > 0)
{
return 1
}
else
{
return -1
}
}
}Sketch 7 making a guess
We are going to get what we have to make a guess. So we need to give it some data. This is where the inputs variable comes in. Remember this is only for illustration to see what would happen.
Add these lines of code:
let inputs = [10, 350, 1]
let perceptron perceptron = new Perceptron(3) let guess = perceptron.feedForward(inputs)
console.log(guess)
noLoop()To give you:
let sum = 0
let inputs = [10, 350, 1]
let perceptron
function setup()
{
createCanvas(400, 400)
perceptron = new Perceptron(3)
}
function draw()
{
background(220)
let guess = perceptron.feedForward(inputs)
console.log(guess)
noLoop()
}
class Perceptron
{
constructor(n)
{
this.weights = []
for (let i = 0; i < n; i++)
{
this.weights[i] = random(-1, 1)
}
}
feedForward(inputs)
{
for (let i = 0; i < this.weights.length; i++)
{
sum += inputs[i] * this.weights[i]
}
return this.activate(sum)
}
activate(sum)
{
if (sum > 0)
{
return 1
}
else
{
return -1
}
}
}The console log will return either 1 or -1, just keep refreshing the page. This is because the random weights will affect the output
