Skip to content

Instantly share code, notes, and snippets.

@mpj

mpj/afternoon.html

Last active October 25, 2019 13:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mpj/d93a4bdcce7b31f7a70ae66bdb34a9f9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mpj/d93a4bdcce7b31f7a70ae66bdb34a9f9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mpj revised this gist Aug 22, 2019. 1 changed file with 7 additions and 2 deletions.
    9 changes: 7 additions & 2 deletions afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,11 +31,16 @@
    let trainedWeights = initialWeights

    const trainingSetSize = 20000
    const noiseProbability = 0.01
    for(const dragon of generateDragons(trainingSetSize)) {
    const correctClassification = powerClassification(dragon)
    let trainOnClassification = correctClassification
    if(Math.random() < noiseProbability) {
    trainOnClassification *= -1
    }
    trainedWeights = train(
    trainedWeights, dragon, powerClassification(dragon))
    trainedWeights, dragon, trainOnClassification)
    }
    console.log('trainedWeights', trainedWeights)

    function train (weights, dragon, actualPowerClassification) {
    const guessResult = guessPowerClassification(weights, dragon)
  2. mpj revised this gist Aug 22, 2019. 1 changed file with 9 additions and 25 deletions.
    34 changes: 9 additions & 25 deletions afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,35 +30,19 @@

    let trainedWeights = initialWeights

    const fluffykins = {
    scariness: 10,
    power: 1000
    const trainingSetSize = 20000
    for(const dragon of generateDragons(trainingSetSize)) {
    trainedWeights = train(
    trainedWeights, dragon, powerClassification(dragon))
    }

    const smaug = {
    scariness: 900,
    power: 700
    }

    const minimoo = {
    scariness: 25,
    power: 30
    }

    // Legend
    // 1 = more powerful than it looks
    // -1 = less powerful than it looks

    trainedWeights = train(trainedWeights, fluffykins, 1)
    trainedWeights = train(trainedWeights, smaug, -1)
    trainedWeights = train(trainedWeights, minimoo, 1)
    console.log('trainedWeights', trainedWeights)

    function train (weights, dragon, actualPowerClassification) {
    const guessResult = guessPowerClassification(weights, dragon)
    const error = actualPowerClassification - guessResult
    return {
    scariness: weights.scariness + error * dragon.scariness,
    power: weights.power + error * dragon.power
    scariness: weights.scariness + error * dragon.scariness,
    power: weights.power + error * dragon.power
    }
    }

    @@ -92,8 +76,8 @@

    function guessPowerClassification(weights, dragon) {
    const someMathGarble =
    dragon.power * weights.power +
    dragon.scariness * weights.scariness
    dragon.power * weights.power +
    dragon.scariness * weights.scariness
    return someMathGarble >= 0 ? 1 : -1
    }

  3. mpj revised this gist Aug 22, 2019. 1 changed file with 26 additions and 13 deletions.
    39 changes: 26 additions & 13 deletions afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,14 +9,18 @@
    <canvas id="mycanvas" width="1000" height="1000"></canvas>

    <script>
    const numberOfDragonsToGenerate = 500
    let someDragons = []
    for (let i = 0; i < numberOfDragonsToGenerate; i++) {
    const dragon = {
    scariness: randomNumber(0, 1000),
    power: randomNumber(0, 1000)
    const someDragons = generateDragons(500)

    function generateDragons(numberOfDragonsToGenerate) {
    let dragons = []
    for (let i = 0; i < numberOfDragonsToGenerate; i++) {
    const dragon = {
    scariness: randomNumber(0, 1000),
    power: randomNumber(0, 1000)
    }
    dragons.push(dragon)
    }
    someDragons.push(dragon)
    return dragons
    }

    const initialWeights = {
    @@ -35,33 +39,42 @@
    scariness: 900,
    power: 700
    }

    const minimoo = {
    scariness: 25,
    power: 30
    }

    // Legend
    // 1 = more powerful than it looks
    // -1 = less powerful than it looks

    trainedWeights = train(trainedWeights, fluffykins, 1)
    trainedWeights = train(trainedWeights, smaug, -1)
    trainedWeights = train(trainedWeights, minimoo, 1)

    function train (weights, dragon, actualPowerClassification) {
    const guessResult = guessPowerClassification(weights, dragon)
    const error = actualPowerClassification - guessResult
    console.log(
    'weights', weights,
    'dragon', dragon,
    'guessResult', guessResult,
    'error', error)
    return {
    scariness: weights.scariness + error * dragon.scariness,
    power: weights.power + error * dragon.power
    }
    }


    const canvas = document.getElementById('mycanvas')
    const context = canvas.getContext('2d')
    context.beginPath()
    context.moveTo(0, 0)
    context.lineTo(1000, 1000)
    context.stroke()
    for (const dragon of someDragons) {
    const x = dragon.scariness
    const y = dragon.power
    const rectangleHeight = 5
    const rectangleWidth = 5
    if (guessPowerClassification(initialWeights, dragon) === 1) {
    if (guessPowerClassification(trainedWeights, dragon) === 1) {
    context.fillStyle = 'black'
    } else {
    context.fillStyle = 'hotpink'
  4. mpj revised this gist Aug 22, 2019. 1 changed file with 30 additions and 0 deletions.
    30 changes: 30 additions & 0 deletions afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,6 +23,36 @@
    scariness: randomNumber(-1, 1),
    power: randomNumber(-1, 1),
    }

    let trainedWeights = initialWeights

    const fluffykins = {
    scariness: 10,
    power: 1000
    }

    const smaug = {
    scariness: 900,
    power: 700
    }

    // Legend
    // 1 = more powerful than it looks
    // -1 = less powerful than it looks

    trainedWeights = train(trainedWeights, fluffykins, 1)
    trainedWeights = train(trainedWeights, smaug, -1)

    function train (weights, dragon, actualPowerClassification) {
    const guessResult = guessPowerClassification(weights, dragon)
    const error = actualPowerClassification - guessResult
    console.log(
    'weights', weights,
    'dragon', dragon,
    'guessResult', guessResult,
    'error', error)
    }


    const canvas = document.getElementById('mycanvas')
    const context = canvas.getContext('2d')
  5. mpj revised this gist Aug 22, 2019. 1 changed file with 11 additions and 3 deletions.
    14 changes: 11 additions & 3 deletions afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,14 +19,19 @@
    someDragons.push(dragon)
    }

    const initialWeights = {
    scariness: randomNumber(-1, 1),
    power: randomNumber(-1, 1),
    }

    const canvas = document.getElementById('mycanvas')
    const context = canvas.getContext('2d')
    for (const dragon of someDragons) {
    const x = dragon.scariness
    const y = dragon.power
    const rectangleHeight = 5
    const rectangleWidth = 5
    if (guessPowerClassification(dragon) === 1) {
    if (guessPowerClassification(initialWeights, dragon) === 1) {
    context.fillStyle = 'black'
    } else {
    context.fillStyle = 'hotpink'
    @@ -42,8 +47,11 @@
    return (dragon.power > dragon.scariness) ? 1 : -1
    }

    function guessPowerClassification(dragon) {
    return Math.round(randomNumber(-1, 1))
    function guessPowerClassification(weights, dragon) {
    const someMathGarble =
    dragon.power * weights.power +
    dragon.scariness * weights.scariness
    return someMathGarble >= 0 ? 1 : -1
    }

    function randomNumber(lower, higher) {
  6. mpj revised this gist Aug 22, 2019. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@
    const y = dragon.power
    const rectangleHeight = 5
    const rectangleWidth = 5
    if (powerClassification(dragon) === 1) {
    if (guessPowerClassification(dragon) === 1) {
    context.fillStyle = 'black'
    } else {
    context.fillStyle = 'hotpink'
    @@ -42,6 +42,10 @@
    return (dragon.power > dragon.scariness) ? 1 : -1
    }

    function guessPowerClassification(dragon) {
    return Math.round(randomNumber(-1, 1))
    }

    function randomNumber(lower, higher) {
    return Math.random() * (higher - lower) + lower
    }
  7. mpj revised this gist Aug 22, 2019. 1 changed file with 11 additions and 4 deletions.
    15 changes: 11 additions & 4 deletions afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,13 +26,20 @@
    const y = dragon.power
    const rectangleHeight = 5
    const rectangleWidth = 5
    context.fillStyle =
    isMorePowerfulThanItLooks(dragon) ? 'black' : 'hotpink'
    if (powerClassification(dragon) === 1) {
    context.fillStyle = 'black'
    } else {
    context.fillStyle = 'hotpink'
    }
    context.fillRect(x, y, rectangleWidth, rectangleHeight)
    }

    function isMorePowerfulThanItLooks(dragon) {
    return dragon.power > dragon.scariness
    // Legend
    // 1 = more powerful than it looks
    // -1 = less powerful than it looks

    function powerClassification(dragon) {
    return (dragon.power > dragon.scariness) ? 1 : -1
    }

    function randomNumber(lower, higher) {
  8. mpj revised this gist Aug 22, 2019. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,9 +26,15 @@
    const y = dragon.power
    const rectangleHeight = 5
    const rectangleWidth = 5
    context.fillStyle =
    isMorePowerfulThanItLooks(dragon) ? 'black' : 'hotpink'
    context.fillRect(x, y, rectangleWidth, rectangleHeight)
    }

    function isMorePowerfulThanItLooks(dragon) {
    return dragon.power > dragon.scariness
    }

    function randomNumber(lower, higher) {
    return Math.random() * (higher - lower) + lower
    }
  9. mpj revised this gist Aug 22, 2019. 1 changed file with 14 additions and 2 deletions.
    16 changes: 14 additions & 2 deletions afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,8 +4,10 @@
    <link href="style.css" rel="stylesheet" />
    </head>
    <body>
    <canvas id="mycanvas"></canvas>

    <div class="legend legendX">Scariness</div>
    <div class="legend legendY">Actual power</div>
    <canvas id="mycanvas" width="1000" height="1000"></canvas>

    <script>
    const numberOfDragonsToGenerate = 500
    let someDragons = []
    @@ -17,6 +19,16 @@
    someDragons.push(dragon)
    }

    const canvas = document.getElementById('mycanvas')
    const context = canvas.getContext('2d')
    for (const dragon of someDragons) {
    const x = dragon.scariness
    const y = dragon.power
    const rectangleHeight = 5
    const rectangleWidth = 5
    context.fillRect(x, y, rectangleWidth, rectangleHeight)
    }

    function randomNumber(lower, higher) {
    return Math.random() * (higher - lower) + lower
    }
  10. mpj revised this gist Aug 22, 2019. 1 changed file with 17 additions and 1 deletion.
    18 changes: 17 additions & 1 deletion afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,26 @@

    <html>
    <!-- http://bit.ly/vanillaneural -->
    <head>
    <link href="style.css" rel="stylesheet" />
    </head>
    <body>
    <canvas id="mycanvas"></canvas>

    <script>
    const numberOfDragonsToGenerate = 500
    let someDragons = []
    for (let i = 0; i < numberOfDragonsToGenerate; i++) {
    const dragon = {
    scariness: randomNumber(0, 1000),
    power: randomNumber(0, 1000)
    }
    someDragons.push(dragon)
    }

    function randomNumber(lower, higher) {
    return Math.random() * (higher - lower) + lower
    }

    </script>
    </body>
    </html>
  11. mpj revised this gist Aug 22, 2019. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions afternoon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@

    <html>
    <!-- http://bit.ly/vanillaneural -->
    <head>
    <link href="style.css" rel="stylesheet" />
    </head>
    <body>

    </body>
    </html>
  12. mpj created this gist Aug 22, 2019.
    25 changes: 25 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    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;
    }
    canvas {
    float: left;
    margin-bottom: 2rem;
    }