samherrmann
diff --git a/‎index.html‎
Lines changed: 3 additions & 0 deletions b/‎index.html‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎script.js‎
Lines changed: 34 additions & 12 deletions b/‎script.js‎
Lines changed: 34 additions & 12 deletions
@@ -7,12 +7,15 @@
  <script src="libs/jquery-2.2.1.min.js"></script>
  <script src="script.js"></script>
  <script src="libs/quicksettings.min.js"></script>
+ <script src="libs/particle.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
  <h1>
  Physical Computing for Web Devs
  </h1>
+
+ <canvas></canvas>
  </body>
 
 </html>
@@ -5,20 +5,42 @@ var board = new five.Board({
  port: "/dev/ttyUSB0"
 });
 
-board.on("ready", function() {
- console.log("I can see the board!");
+var particles = [];
 
- var pin = 13;
+window.addEventListener("DOMContentLoaded", function() {
+ var canvas = document.getElementsByTagName("canvas")[0];
+ var context = canvas.getContext("2d");
 
- var led = new five.Led();
- led.on();
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
 
- var proximity = new five.Proximity({
- controller: "2Y0A21",
- pin: "A0"
- });
+ board.on("ready", function() {
+ console.log("I can see the board!");
+
+ var led = new five.Led();
+ led.on();
+
+ var proximity = new five.Proximity({
+ controller: "2Y0A21",
+ pin: "A0"
+ });
+
+ proximity.within([8, 65], "cm", function() {
+ console.log(this.cm);
 
- proximity.within([8, 65], "cm", function() {
- console.log(this.cm);
+ for (var i = 0; i < 5; i++) {
+ var particle = new Particle({
+ x: canvas.width/2,
+ y: canvas.height/2,
+ radius: 5,
+ speed: 10,
+ color: "#ffffff"
+ });
+
+ particles.push(particle);
+ }
+ });
  });
-});
+ Particle.startRendering(context, particles);
+});
+