challenge 121 logo code (#829)

shiffman · web-flow · commit 9fe186f297de · 2018-10-30T11:47:57.000-04:00
* challenge 121 logo code

* adding repo for challenge 121

* moving to P5 subdirectory as per @nilsweb

* fixing starting Logo commands
diff --git a/CodingChallenges/CC_121_Logo/P5/index.html b/CodingChallenges/CC_121_Logo/P5/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Logo</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
+  <script src="turtle.js"></script>
+  <script src="sketch.js"></script>
+</head>
+
+<body>
+  <textarea id="code" cols="40" rows="5">
+fd 60 rt 120 fd 60 rt 120 fd 60 rt 120 
+  </textarea>
+</body>
+
+</html>
diff --git a/CodingChallenges/CC_121_Logo/P5/sketch.js b/CodingChallenges/CC_121_Logo/P5/sketch.js
@@ -0,0 +1,40 @@
+// Daniel Shiffman
+// http://youtube.com/thecodingtrain
+// http://codingtra.in
+
+// Coding Challenge 121: Logo
+// https://youtu.be/i-k04yzfMpw
+
+let editor;
+let turtle;
+
+function setup() {
+  createCanvas(200, 200);
+  angleMode(DEGREES);
+  background(0);
+  turtle = new Turtle(100, 100, 0);
+  editor = select('#code');
+  editor.input(goTurtle);
+  goTurtle();
+}
+
+function goTurtle() {
+  background(0);
+  push();
+  turtle.reset();
+  let code = editor.value();
+  let tokens = code.split(' ');
+  let index = 0;
+  while (index < tokens.length) {
+    let token = tokens[index];
+    if (commands[token]) {
+      if (token.charAt(0) === 'p') {
+        commands[token]();
+      } else {
+        commands[token](tokens[++index]);
+      }
+    }
+    index++;
+  }
+  pop();
+}
diff --git a/CodingChallenges/CC_121_Logo/P5/turtle.js b/CodingChallenges/CC_121_Logo/P5/turtle.js
@@ -0,0 +1,56 @@
+// Daniel Shiffman
+// http://youtube.com/thecodingtrain
+// http://codingtra.in
+
+// Coding Challenge 121: Logo
+// https://youtu.be/i-k04yzfMpw
+
+const commands = {
+  fd: function(amt) {
+    turtle.forward(amt);
+  },
+  bd: function(amt) {
+    turtle.forward(-amt);
+  },
+  rt: function(angle) {
+    turtle.right(angle);
+  },
+  lt: function(angle) {
+    turtle.right(-angle);
+  },
+  pu: function() {
+    turtle.pen = false;
+  },
+  pd: function() {
+    turtle.pen = true;
+  }
+};
+
+class Turtle {
+  constructor(x, y, angle) {
+    this.x = x;
+    this.y = y;
+    this.dir = angle;
+  }
+
+  reset() {
+    console.log(this.x, this.y, this.dir);
+    translate(this.x, this.y);
+    rotate(this.dir);
+    this.pen = true;
+  }
+
+  forward(amt) {
+    amt = parseInt(amt);
+    if (this.pen) {
+      stroke(255);
+      strokeWeight(2);
+      line(0, 0, amt, 0);
+    }
+    translate(amt, 0);
+  }
+
+  right(angle) {
+    rotate(angle);
+  }
+}
diff --git a/_CodingChallenges/121-logo-interpreter.md b/_CodingChallenges/121-logo-interpreter.md
@@ -2,6 +2,7 @@
 title: "Logo Interpreter"
 video_number: 121
 date: 2018-10-30
+repository: CC_121_Logo
 video_id: i-k04yzfMpw
 
 links:
