Training Data

Making training data

Let's setup a visualization of what our perceptron is doing. We'll get into the p5 library, but it's so easy and will help with visualization so much, just go with it for now.

In index.js:

class Point {
  constructor(x, y, label) {
    this.x = x
    this.y = y
    this.label = (x > y) ? 1 : -1
  }

  show() {
    stroke(0)
    label == 1 ? fill(255) : fill(0)
    ellipse(x, y, 8, 8)
  }
}

Now in the setup function, let's create something that will plot our points.

const randomNum = (min, max) => {
  return Math.floor(Math.random() * max + min)
}


function simplePaint() {
  if (mouseIsPressed) {
    fill(255, 0, 0)
    stroke(255, 0, 0)
    ellipse(mouseX, mouseY, 10, 10)
  }
}

let points = []
function plotPoints() {
  for (let i = 0; i < 100; i++) {
    let x = randomNum(1, width)
    let y = randomNum(1, height)
    let p = new Point(x, y)
    points.push(p)
  }
}

function setup() {
  createCanvas(500, 500)
  background(100)
  stroke(0)
  strokeWeight(1)
  line(0, 0, width, height)
  plotPoints()
}

function draw() {
  points.forEach(p => p.show())
}

Now we have a graph with black points below the line and white points above the line. But because the correct answer is solvable using math, naming is this point's y greater than x, we have the training data we can use on our perceptron.