add in the first 5 exercises

sdras · May 1, 2016 · 12d3be2 · 12d3be2
1 parent 568c4b5
commit 12d3be2
Show file tree

Hide file tree

Showing 17 changed files with 317 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
diff --git a/1-chapter-1-1-nature-of-code-in-js-svg/css/normalize.css b/1-chapter-1-1-nature-of-code-in-js-svg/css/normalize.css
diff --git a/1-chapter-1-1-nature-of-code-in-js-svg/index.html b/1-chapter-1-1-nature-of-code-in-js-svg/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html >
+  <head>
+    <meta charset="UTF-8">
+    <title>Chapter 1.1 of The Nature of Code, in JS</title>
+    <link rel="stylesheet" href="css/normalize.css">
+    <style>
+      .ball {
+        width: 30px;
+        height: 30px;
+        background: grey;
+        position: absolute;
+        border-radius: 50%;
+        border: 2px solid black;
+      }
+    </style>
+  </head>
+  <body>
+
+  <script src='http://s.cdpn.io/3/reqAnimFramePolyfill.js'></script>
+  <script src="js/index.js"></script>
+
+  </body>
+</html>
diff --git a/1-chapter-1-1-nature-of-code-in-js-svg/js/index.js b/1-chapter-1-1-nature-of-code-in-js-svg/js/index.js
@@ -0,0 +1,33 @@
+// rewritten from Processing to JS from https://github.com/shiffman/The-Nature-of-Code-Examples/blob/master/chp01_vectors/NOC_1_1_bouncingball_novectors/NOC_1_1_bouncingball_novectors.pde
+// live demo at http://codepen.io/sdras/pen/d953d844fb3bed2c053fb83874844f64
+
+var ball = document.createElement("ball");
+
+document.body.appendChild(ball);
+document.body.style.background = '#222';
+
+ball.setAttribute("class", "ball");
+
+var x = 100,
+    y = 100,
+    xspeed = 2,
+    yspeed = 2.5,
+    width = window.innerWidth,
+    height = window.innerHeight,
+    globalId;
+
+function repeatOften() {
+  x = x + xspeed;
+  y = y + yspeed;
+
+  if ((x > width) || (x < 0)) {
+    xspeed = xspeed * -1;
+  }
+  if ((y > height) || (y < 0)) {
+    yspeed = yspeed * -1;
+  }
+  ball.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
+
+  globalID = requestAnimationFrame(repeatOften);
+}
+globalID = requestAnimationFrame(repeatOften);
diff --git a/2-chapter-1-3-nature-of-code-in-js-svg/css/normalize.css b/2-chapter-1-3-nature-of-code-in-js-svg/css/normalize.css
diff --git a/2-chapter-1-3-nature-of-code-in-js-svg/index.html b/2-chapter-1-3-nature-of-code-in-js-svg/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html >
+  <head>
+    <meta charset="UTF-8">
+    <title>Chapter 1.3 of The Nature of Code, in JS</title>
+    <link rel="stylesheet" href="css/normalize.css">
+    <style>
+      svg polyline {
+        stroke: #666;
+        stroke-width: 3px;
+      }
+    </style>
+    </head>
+    <body>
+
+    <script src='http://s.cdpn.io/3/reqAnimFramePolyfill.js'></script>
+    <script src="js/index.js"></script>
+
+  </body>
+</html>
diff --git a/2-chapter-1-3-nature-of-code-in-js-svg/js/index.js b/2-chapter-1-3-nature-of-code-in-js-svg/js/index.js
@@ -0,0 +1,42 @@
+// rewritten from Processing to JS from https://github.com/shiffman/The-Nature-of-Code-Examples/blob/master/chp01_vectors/NOC_1_3_vector_subtraction/NOC_1_3_vector_subtraction.pde
+// live demo at http://codepen.io/sdras/pen/5ef8dc81f804d7bd5004e11f7f1902ef
+
+
+var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
+    svgNS = svg.namespaceURI,
+    poL = document.createElementNS(svgNS, "viewBox"),
+    poL = document.createElementNS(svgNS, "polyline");
+
+    svg.appendChild(poL);
+    document.body.appendChild(svg);
+    document.body.style.background = '#222';
+    svg.setAttribute("class", "ball");
+    svg.setAttribute("viewBox", "0 0 800 600");
+    svg.setAttribute("width", "800");
+    svg.setAttribute("height", "600");
+
+document.onmousemove = handleMouseMove;
+
+function handleMouseMove(event) {
+  var dot, eventDoc, doc, body, pageX, pageY;
+
+  event = event || window.event; // IE-ism
+
+  if (event.pageX == null && event.clientX != null) {
+    eventDoc = (event.target && event.target.ownerDocument) || document;
+    doc = eventDoc.documentElement;
+    body = eventDoc.body;
+
+    event.pageX = event.clientX +
+      (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
+      (doc && doc.clientLeft || body && body.clientLeft || 0);
+    event.pageY = event.clientY +
+      (doc && doc.scrollTop || body && body.scrollTop || 0) -
+      (doc && doc.clientTop || body && body.clientTop || 0);
+  }
+
+  var polCoor = event.pageX + " " + event.pageY;
+
+  var poLstring = "500 150 " + polCoor;
+  poL.setAttribute('points', poLstring);
+}
diff --git a/3-chapter-1-5-nature-of-code-in-js-svg/css/normalize.css b/3-chapter-1-5-nature-of-code-in-js-svg/css/normalize.css
diff --git a/3-chapter-1-5-nature-of-code-in-js-svg/index.html b/3-chapter-1-5-nature-of-code-in-js-svg/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html >
+  <head>
+    <meta charset="UTF-8">
+    <title>Chapter 1.5 of The Nature of Code, in JS</title>
+    <link rel="stylesheet" href="css/normalize.css">
+    <style>
+      svg polyline {
+        stroke: #666;
+        stroke-width: 3px;
+      }
+
+      svg rect {
+        fill: #666;
+      }
+    </style>
+  </head>
+  <body>
+
+  <script src='http://s.cdpn.io/3/reqAnimFramePolyfill.js'></script>
+  <script src="js/index.js"></script>
+
+  </body>
+</html>
diff --git a/3-chapter-1-5-nature-of-code-in-js-svg/js/index.js b/3-chapter-1-5-nature-of-code-in-js-svg/js/index.js
@@ -0,0 +1,45 @@
+// rewritten from Processing to JS from https://github.com/shiffman/The-Nature-of-Code-Examples/blob/master/chp01_vectors/NOC_1_5_vector_magnitude/NOC_1_5_vector_magnitude.pde
+// live demo at http://codepen.io/sdras/pen/13bfbe6ec5bfc9e17e61fac39030c6e8
+
+var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
+    svgNS = svg.namespaceURI,
+    vbx = document.createElementNS(svgNS, "viewBox"),
+    poL = document.createElementNS(svgNS, "polyline"),
+    rct = document.createElementNS(svgNS, "rect");
+
+    svg.appendChild(poL);
+    svg.appendChild(rct);
+    document.body.appendChild(svg);
+    document.body.style.background = '#222';
+    svg.setAttribute("viewBox", "0 0 1000 600");
+    svg.setAttribute("width", "1000");
+    svg.setAttribute("height", "600");
+    rct.setAttribute("height", "8");
+
+document.onmousemove = handleMouseMove;
+
+function handleMouseMove(event) {
+  var dot, eventDoc, doc, body, pageX, pageY;
+
+  event = event || window.event; // IE-ism
+
+  if (event.pageX == null && event.clientX != null) {
+    eventDoc = (event.target && event.target.ownerDocument) || document;
+    doc = eventDoc.documentElement;
+    body = eventDoc.body;
+
+    event.pageX = event.clientX +
+      (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
+      (doc && doc.clientLeft || body && body.clientLeft || 0);
+    event.pageY = event.clientY +
+      (doc && doc.scrollTop || body && body.scrollTop || 0) -
+      (doc && doc.clientTop || body && body.clientTop || 0);
+  }
+
+  var polCoor = event.pageX + " " + event.pageY;
+
+  var poLstring = "500 150 " + polCoor;
+  poL.setAttribute('points', poLstring);
+
+  rct.setAttribute('width', event.pageX);
+}
diff --git a/4-hack-physics-and-js-nocanvas-svg-1/css/normalize.css b/4-hack-physics-and-js-nocanvas-svg-1/css/normalize.css
diff --git a/4-hack-physics-and-js-nocanvas-svg-1/index.html b/4-hack-physics-and-js-nocanvas-svg-1/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html >
+  <head>
+    <meta charset="UTF-8">
+    <title>Hack Physics and JS, SVG  no Canvas version part 1</title>
+    <link rel="stylesheet" href="css/normalize.css">
+  </head>
+  <body>
+
+  <script src='http://s.cdpn.io/3/reqAnimFramePolyfill.js'></script>
+  <script src="js/index.js"></script>
+
+  </body>
+</html>
diff --git a/4-hack-physics-and-js-nocanvas-svg-1/js/index.js b/4-hack-physics-and-js-nocanvas-svg-1/js/index.js
@@ -0,0 +1,32 @@
+// rewritten from Canvas to SVG and Vanilla JS from this post http://codepen.io/rachsmith/post/hack-physics-and-javascript-1
+// live demo at http://codepen.io/sdras/pen/b2ed94b0b4eaf55b4b6e2d4a92c318ed
+
+var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
+    svgNS = svg.namespaceURI,
+    vbx = document.createElementNS(svgNS, "viewBox"),
+    circ = document.createElementNS(svgNS, "circle"),
+    coord = 20,
+    width = window.innerWidth,
+    height = window.innerHeight;
+
+    document.body.appendChild(svg);
+    document.body.style.background = '#222';
+    svg.setAttribute("viewBox", "0 0 " + width + " " + height);
+    svg.setAttribute("width", width);
+    svg.setAttribute("height", height);
+    svg.appendChild(circ);
+    circ.setAttribute("r", "10");
+    circ.setAttribute("fill", "orangered");
+
+function repeatOften() {
+  coord += 2;
+  circ.setAttribute("cx", coord);
+  circ.setAttribute("cy", coord);
+
+  if (coord > height) {
+    coord = 0;
+  }
+
+  requestAnimationFrame(repeatOften);
+}
+requestAnimationFrame(repeatOften);
diff --git a/5-hack-physics-and-js-nocanvas-svg-2/css/normalize.css b/5-hack-physics-and-js-nocanvas-svg-2/css/normalize.css
diff --git a/5-hack-physics-and-js-nocanvas-svg-2/index.html b/5-hack-physics-and-js-nocanvas-svg-2/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html >
+  <head>
+    <meta charset="UTF-8">
+    <title>Hack Physics and JS, SVG  no Canvas version part 2</title>
+    <link rel="stylesheet" href="css/normalize.css">
+  </head>
+  <body>
+
+  <script src='http://s.cdpn.io/3/reqAnimFramePolyfill.js'></script>
+  <script src="js/index.js"></script>
+
+  </body>
+</html>