Skip to content

Instantly share code, notes, and snippets.

@hmschreiner
Forked from mpj/hello.html
Created August 22, 2019 20:40
Show Gist options
  • Save hmschreiner/e1daac3878cff8f0963cc83fa984a14e to your computer and use it in GitHub Desktop.
Save hmschreiner/e1daac3878cff8f0963cc83fa984a14e to your computer and use it in GitHub Desktop.
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h3>Graph: Dragons</h3>
<div class="legend legendX"><div>Scariness ️→</div></div>
<div class="legend legendY"><div>Actual Power →</div></div>
<!-- http://bit.ly/neuralvanilla -->
<canvas id="wowacanvas" width="1000" height="1000"></canvas>
<script>
const someDragons = generateDragons(500)
function generateDragons(numberOfDragonsToGenerate) {
let dragons = []
for (let i = 0; i < numberOfDragonsToGenerate; i++) {
// A dragon is just an object literal with two properties,
// scariness and power, each of which is assigned
// a random integer between 1 and 1000.
const dragon = {
scariness: randomNumber(0, 1000),
power: randomNumber(0, 1000)
}
dragons.push(dragon)
}
return dragons
}
const initialWeights = {
scariness: randomNumber(-1, 1),
power: randomNumber(-1, 1)
}
let trainedWeights = initialWeights
/*
const fluffykins = {
scariness: 10,
power: 1000
}
const smaug = {
scariness: 900,
power: 700
}
const minmoo = {
scariness: 25,
power: 30
}
trainedWeights = train(trainedWeights, fluffykins, 1)
trainedWeights = train(trainedWeights, smaug, -1)
trainedWeights = train(trainedWeights, minmoo, 1)*/
const trainingSetSize = 1250000
const noiseProbability = 0.01
for(const dragon of generateDragons(trainingSetSize)) {
const correctClassification = powerClassification(dragon)
let trainOnClassification = correctClassification
if (Math.random() < noiseProbability) {
if (correctClassification === -1) {
trainOnClassification = 1
} else {
trainOnClassification = -1
}
}
trainedWeights = train(
trainedWeights, dragon, trainOnClassification)
}
function train(weights, dragon, actualPowerClassification) {
const guessResult = guessPowerClassification(weights, dragon)
const error = actualPowerClassification - guessResult
const learningRate = 0.5
return {
scariness: weights.scariness + error * dragon.scariness * learningRate,
power: weights.power + error * dragon.power * learningRate
}
}
const canvas = document.getElementById("wowacanvas")
const ctx = canvas.getContext("2d")
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(1000, 1000)
ctx.stroke()
for (const dragon of someDragons) {
const x = dragon.scariness
const y = dragon.power
const rectangleHeight = 5
const rectangleWidth = 5
if (guessPowerClassification(trainedWeights, dragon) === 1) {
ctx.fillStyle = "black"
} else if(guessPowerClassification(trainedWeights, dragon) === -1) {
ctx.fillStyle = "hotpink"
}
ctx.fillRect(x, y, rectangleWidth, rectangleHeight)
}
function powerClassification(dragon) {
return dragon.power > dragon.scariness ? 1 : -1
}
function guessPowerClassification(weights, dragon) {
const someMathGarble =
dragon.power * weights.power +
dragon.scariness * weights.scariness
return someMathGarble >= 0 ? 1 : -1
}
// randomNumber - generate number in a certain range.
function randomNumber (lower, higher) {
return Math.random() * (higher - lower) + lower
}
</script>
</body>
</html>
body {
font-family: Helvetica;
padding: 1rem;
}
.legend {
background-color: black;
color: white;
font-weight: bold;
}
.legendX {
padding-left: 30px;
width: 1000px;
height: 20px;
}
.legendY {
writing-mode: vertical-rl;
text-orientation: mixed;
float: left;
height: 1000px;
padding-top: 10px;
}
.description {
width: 1000px;
clear: both;
}
canvas {
float: left;
margin-bottom: 2rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment