Spaces:

mrm8488
/

FlappyBirds

Running

App Files Files Community

mrm8488 commited on Jan 11, 2022

Commit

b34b125

1 Parent(s): 04b84ba

First commit

Browse files

Files changed (10) hide show

background.png +0 -0
bird.js +77 -0
ga.js +37 -0
index.html +17 -22
nn.js +85 -0
pipe.js +40 -0
screenshots/nn.png +0 -0
screenshots/sc1.png +0 -0
screenshots/sc2.png +0 -0
sketch.js +101 -0

background.png ADDED Viewed

bird.js ADDED Viewed

	@@ -0,0 +1,77 @@

+// Neuro-Evolution Flappy Bird with TensorFlow.js
+// http://thecodingtrain.com
+// https://youtu.be/cdUNkwXx-I4
+class Bird {
+  constructor(brain) {
+    this.y = height / 2;
+    this.x = 64;
+    this.gravity = 0.8;
+    this.lift = -12;
+    this.velocity = 0;
+    this.score = 0;
+    this.fitness = 0;
+    if (brain) {
+      this.brain = brain.copy();
+    } else {
+      this.brain = new NeuralNetwork(5, 8, 2);
+    }
+  }
+  dispose() {
+    this.brain.dispose();
+  }
+  show() {
+    stroke(255);
+    fill(251, 236, 93);
+    ellipse(this.x, this.y, 32, 32);
+  }
+  up() {
+    this.velocity += this.lift;
+  }
+  mutate() {
+    this.brain.mutate(0.1);
+  }
+  think(pipes) {
+    // Find the closest pipe
+    let closest = null;
+    let closestD = Infinity;
+    for (let i = 0; i < pipes.length; i++) {
+      let d = pipes[i].x + pipes[i].w - this.x;
+      if (d < closestD && d > 0) {
+        closest = pipes[i];
+        closestD = d;
+      }
+    }
+    let inputs = [];
+    inputs[0] = this.y / height;
+    inputs[1] = closest.top / height;
+    inputs[2] = closest.bottom / height;
+    inputs[3] = closest.x / width;
+    inputs[4] = this.velocity / 10;
+    let output = this.brain.predict(inputs);
+    //if (output[0] > output[1] && this.velocity >= 0) {
+    if (output[0] > output[1]) {
+      this.up();
+    }
+  }
+  offScreen() {
+    return this.y > height || this.y < 0;
+  }
+  update() {
+    this.score++;
+    this.velocity += this.gravity;
+    //this.velocity *= 0.9;
+    this.y += this.velocity;
+  }
+}

ga.js ADDED Viewed

	@@ -0,0 +1,37 @@

+// Neuro-Evolution Flappy Bird
+function nextGeneration() {
+  console.log("next generation");
+  calculateFitness();
+  for (let i = 0; i < TOTAL; i++) {
+    birds[i] = pickOne();
+  }
+  for (let i = 0; i < TOTAL; i++) {
+    savedBirds[i].dispose();
+  }
+  savedBirds = [];
+}
+function pickOne() {
+  let index = 0;
+  let r = random(1);
+  while (r > 0) {
+    r = r - savedBirds[index].fitness;
+    index++;
+  }
+  index--;
+  let bird = savedBirds[index];
+  let child = new Bird(bird.brain);
+  child.mutate();
+  return child;
+}
+function calculateFitness() {
+  let sum = 0;
+  for (let bird of savedBirds) {
+    sum += bird.score;
+  }
+  for (let bird of savedBirds) {
+    bird.fitness = bird.score / sum;
+  }
+}

index.html CHANGED Viewed

@@ -1,24 +1,19 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>
-				You can modify this app directly by editing <i>index.html</i> in the
-				Files and versions tab.
-			</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank"
-					>Spaces documentation</a
-				>.
-			</p>
-		</div>
-	</body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.4/dist/tf.min.js"></script>
+    <title>NeuroEvolution with tf.js</title>
+  </head>
+  <body>
+    <script src="nn.js"></script>
+    <script src="bird.js"></script>
+    <script src="pipe.js"></script>
+    <script src="ga.js"></script>
+    <script src="sketch.js"></script>
+  </body>
 </html>

nn.js ADDED Viewed

	@@ -0,0 +1,85 @@

+// Neuro-Evolution Flappy Bird with TensorFlow.js
+class NeuralNetwork {
+  constructor(a, b, c, d) {
+    if (a instanceof tf.Sequential) {
+      this.model = a;
+      this.input_nodes = b;
+      this.hidden_nodes = c;
+      this.output_nodes = d;
+    } else {
+      this.input_nodes = a;
+      this.hidden_nodes = b;
+      this.output_nodes = c;
+      this.model = this.createModel();
+    }
+  }
+  copy() {
+    return tf.tidy(() => {
+      const modelCopy = this.createModel();
+      const weights = this.model.getWeights();
+      const weightCopies = [];
+      for (let i = 0; i < weights.length; i++) {
+        weightCopies[i] = weights[i].clone();
+      }
+      modelCopy.setWeights(weightCopies);
+      return new NeuralNetwork(
+        modelCopy,
+        this.input_nodes,
+        this.hidden_nodes,
+        this.output_nodes
+      );
+    });
+  }
+  mutate(rate) {
+    tf.tidy(() => {
+      const weights = this.model.getWeights();
+      const mutatedWeights = [];
+      for (let i = 0; i < weights.length; i++) {
+        let tensor = weights[i];
+        let shape = weights[i].shape;
+        let values = tensor.dataSync().slice();
+        for (let j = 0; j < values.length; j++) {
+          if (random(1) < rate) {
+            let w = values[j];
+            values[j] = w + randomGaussian();
+          }
+        }
+        let newTensor = tf.tensor(values, shape);
+        mutatedWeights[i] = newTensor;
+      }
+      this.model.setWeights(mutatedWeights);
+    });
+  }
+  dispose() {
+    this.model.dispose();
+  }
+  predict(inputs) {
+    return tf.tidy(() => {
+      const xs = tf.tensor2d([inputs]);
+      const ys = this.model.predict(xs);
+      const outputs = ys.dataSync();
+      return outputs;
+    });
+  }
+  createModel() {
+    const model = tf.sequential();
+    const hidden = tf.layers.dense({
+      units: this.hidden_nodes,
+      inputShape: [this.input_nodes],
+      activation: "sigmoid"
+    });
+    model.add(hidden);
+    const output = tf.layers.dense({
+      units: this.output_nodes,
+      activation: "softmax"
+    });
+    model.add(output);
+    return model;
+  }
+}

pipe.js ADDED Viewed

	@@ -0,0 +1,40 @@

+// Neuro-Evolution Flappy Bird with TensorFlow.js
+class Pipe {
+  constructor() {
+    this.spacing = 125;
+    this.top = random(height / 6, (3 / 4) * height);
+    this.bottom = height - (this.top + this.spacing);
+    this.x = width;
+    this.w = 80;
+    this.speed = 6;
+  }
+  hits(bird) {
+    if (bird.y < this.top || bird.y > height - this.bottom) {
+      if (bird.x > this.x && bird.x < this.x + this.w) {
+        return true;
+      }
+    }
+    return false;
+  }
+  show() {
+    fill(75, 127, 83);
+    rectMode(CORNER);
+    rect(this.x, 0, this.w, this.top);
+    rect(this.x, height - this.bottom, this.w, this.bottom);
+  }
+  update() {
+    this.x -= this.speed;
+  }
+  offscreen() {
+    if (this.x < -this.w) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+}

screenshots/nn.png ADDED Viewed

screenshots/sc1.png ADDED Viewed

screenshots/sc2.png ADDED Viewed

sketch.js ADDED Viewed

	@@ -0,0 +1,101 @@

+// Daniel Shiffman & Manuel Romero
+// Neuro-Evolution Flappy Bird with TensorFlow.js
+// http://thecodingtrain.com
+// https://youtu.be/cdUNkwXx-I4
+const TOTAL = 250;
+let birds = [];
+let savedBirds = [];
+let pipes = [];
+let counter = 0;
+let bg;
+let slider;
+let displayGeneration;
+let displaySpeed;
+let generationNumber = 1;
+function keyPressed() {
+  if (key === "S" || key === "s") {
+    let bird = birds[0];
+    saveJSON(bird.brain, "bird.json");
+  }
+}
+function setup() {
+  bg = loadImage("background.png");
+  createCanvas(640, 480);
+  displayGeneration = createP("Generation");
+  displaySpeed = createP("Speed");
+  slider = createSlider(1, 10, 1);
+  for (let i = 0; i < TOTAL; i++) {
+    birds[i] = new Bird();
+  }
+  tf.setBackend('cpu');
+}
+function draw() {
+  for (let n = 0; n < slider.value(); n++) {
+    if (counter % 75 == 0) {
+      pipes.push(new Pipe());
+    }
+    counter++;
+    for (let i = pipes.length - 1; i >= 0; i--) {
+      pipes[i].update();
+      for (let j = birds.length - 1; j >= 0; j--) {
+        if (pipes[i].hits(birds[j])) {
+          savedBirds.push(birds.splice(j, 1)[0]);
+        }
+      }
+      if (pipes[i].offscreen()) {
+        pipes.splice(i, 1);
+      }
+    }
+    for (let i = birds.length - 1; i >= 0; i--) {
+      if (birds[i].offScreen()) {
+        savedBirds.push(birds.splice(i, 1)[0]);
+      }
+    }
+    for (let bird of birds) {
+      bird.think(pipes);
+      bird.update();
+    }
+    if (birds.length === 0) {
+      counter = 0;
+      generationNumber++;
+      nextGeneration();
+      pipes = [];
+    }
+  }
+  // All the drawing stuff
+  background(bg);
+  displayGeneration.html(
+    `Generation Number: <strong>${generationNumber}</strong>`
+  );
+  displaySpeed.html(`Speed:`);
+  for (let bird of birds) {
+    bird.show();
+  }
+  for (let pipe of pipes) {
+    pipe.show();
+  }
+}
+// function keyPressed() {
+//   if (key == ' ') {
+//     bird.up();
+//     //console.log("SPACE");
+//   }
+// }