davidvandenbor · April 28, 2020 01:48 · Apr 28, 2020 · Apr 28, 2020 · Apr 28, 2020 · Apr 28, 2020
diff --git a/Drawing-tiny-houses-with-P5.js.md b/Drawing-tiny-houses-with-P5.js.md
@@ -1,4 +1,4 @@
-## Drawing tiny houses with P5.js
+## Drawing tiny houses with P5.js and javascript nested loops
 
 Using P5.js in combination with nested javascript loops to draw a grid of tiny houses. **Preview:** [at bl.ocks.org](https://bl.ocks.org/David-van-den-Bor/31ea0b06ad81401fa371230b0dfbff3d)
 

diff --git a/index.html b/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
 
 <head>
-<meta name="description" content="Huisjes tekenen met P5.js">
+  <meta name="description" content="Huisjes tekenen met P5.js">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Huisjes maken met p5.js</title>
+  <title>Drawing houses with p5.js</title>
 
   <!-- Links to P5.js libraries -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js" crossorigin=""></script>

diff --git a/Drawing-tiny-houses-with-P5.js.md b/Drawing-tiny-houses-with-P5.js.md
@@ -2,6 +2,5 @@
 
 Using P5.js in combination with nested javascript loops to draw a grid of tiny houses. **Preview:** [at bl.ocks.org](https://bl.ocks.org/David-van-den-Bor/31ea0b06ad81401fa371230b0dfbff3d)
 
-
 Edit / Play around with it for yourself in **Plunker**! > See link below:
 https://plnkr.co/edit/gist:31ea0b06ad81401fa371230b0dfbff3d
diff --git a/Drawing-tiny-houses-with-P5.js.md b/Drawing-tiny-houses-with-P5.js.md
@@ -1,9 +1,7 @@
 ## Drawing tiny houses with P5.js
 
-Using P5.js in combination with nested javascript loops to draw a grid of tiny houses.
+Using P5.js in combination with nested javascript loops to draw a grid of tiny houses. **Preview:** [at bl.ocks.org](https://bl.ocks.org/David-van-den-Bor/31ea0b06ad81401fa371230b0dfbff3d)
 
-**Preview:** [at bl.ocks.org](https://bl.ocks.org/David-van-den-Bor/31ea0b06ad81401fa371230b0dfbff3d)
 
-### Edit:
 Edit / Play around with it for yourself in **Plunker**! > See link below:
 https://plnkr.co/edit/gist:31ea0b06ad81401fa371230b0dfbff3d
diff --git a/Drawing-tiny-houses-with-P5.js.md b/Drawing-tiny-houses-with-P5.js.md
@@ -1,7 +1,9 @@
-## Drawing a grid with tiny houses with P5.js
+## Drawing tiny houses with P5.js
 
-**Preview:** [at bl.ocks.org](https://bl.ocks.org/David-van-den-Bor/b98556c9eedd735e79a4af043835f909)
+Using P5.js in combination with nested javascript loops to draw a grid of tiny houses.
+
+**Preview:** [at bl.ocks.org](https://bl.ocks.org/David-van-den-Bor/31ea0b06ad81401fa371230b0dfbff3d)
 
 ### Edit:
 Edit / Play around with it for yourself in **Plunker**! > See link below:
-https://plnkr.co/edit/gist:b98556c9eedd735e79a4af043835f909
+https://plnkr.co/edit/gist:31ea0b06ad81401fa371230b0dfbff3d
diff --git a/Drawing-tiny-houses-with-P5.js.md b/Drawing-tiny-houses-with-P5.js.md
@@ -1,2 +1,7 @@
-## Huisjes tekenen met P5.js
-source bestanden op JSBin https://jsbin.com/dogiper/edit?html,js,output
+## Drawing a grid with tiny houses with P5.js
+
+**Preview:** [at bl.ocks.org](https://bl.ocks.org/David-van-den-Bor/b98556c9eedd735e79a4af043835f909)
+
+### Edit:
+Edit / Play around with it for yourself in **Plunker**! > See link below:
+https://plnkr.co/edit/gist:b98556c9eedd735e79a4af043835f909
diff --git a/Readme.md → Drawing-tiny-houses-with-P5.js.md b/Readme.md → Drawing-tiny-houses-with-P5.js.md
diff --git a/Readme.md b/Readme.md
@@ -1,2 +1,2 @@
 ## Huisjes tekenen met P5.js
-source https://jsbin.com/dogiper/edit?html,js,output
+source bestanden op JSBin https://jsbin.com/dogiper/edit?html,js,output
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,2 @@
+## Huisjes tekenen met P5.js
+source https://jsbin.com/dogiper/edit?html,js,output
diff --git a/index.html b/index.html
@@ -14,56 +14,7 @@
 </head>
 
 <body>
-<script id="jsbin-javascript">
-// The p5.js push() function allows you to create a new state and pop() function restores the state to the previous conditions. This allows you to have completely different settings applied to individual objects without worrying those settings to affect the shapes that come after as long as you do everything in between a push() and a pop() call. Here is how it works:
-
-function setup() {
-  createCanvas(900, 900);
-}
-
-function draw() {
-  background(240);
-  for (var x = 5; x < 600; x = x + 50) {
-    for (var y = 5; y < 600; y = y + 50) {
-      push();
-      translate(x, y);
-      drawHouse();
-      pop();
-    }
-  }
-}
-
-function drawHouse() {
-  triangle(15, 0, 0, 15, 30, 15);
-  rect(0, 15, 30, 25);
-  rect(12, 30, 10, 10);
-}
-</script>
-
-
-
-<script id="jsbin-source-javascript" type="text/javascript">// The p5.js push() function allows you to create a new state and pop() function restores the state to the previous conditions. This allows you to have completely different settings applied to individual objects without worrying those settings to affect the shapes that come after as long as you do everything in between a push() and a pop() call. Here is how it works:
-
-function setup() {
-  createCanvas(900, 900);
-}
-
-function draw() {
-  background(240);
-  for (var x = 5; x < 600; x = x + 50) {
-    for (var y = 5; y < 600; y = y + 50) {
-      push();
-      translate(x, y);
-      drawHouse();
-      pop();
-    }
-  }
-}
-
-function drawHouse() {
-  triangle(15, 0, 0, 15, 30, 15);
-  rect(0, 15, 30, 25);
-  rect(12, 30, 10, 10);
-}</script></body>
+  <script src="index.js"></script>
+</body>
 
 </html>
diff --git a/jsbin.dogiper.js → index.js b/jsbin.dogiper.js → index.js
diff --git a/index.html b/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<meta name="description" content="Huisjes tekenen met P5.js">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Huisjes maken met p5.js</title>
+
+  <!-- Links to P5.js libraries -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js" crossorigin=""></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js" crossorigin=""></script>
+</head>
+
+<body>
+<script id="jsbin-javascript">
+// The p5.js push() function allows you to create a new state and pop() function restores the state to the previous conditions. This allows you to have completely different settings applied to individual objects without worrying those settings to affect the shapes that come after as long as you do everything in between a push() and a pop() call. Here is how it works:
+
+function setup() {
+  createCanvas(900, 900);
+}
+
+function draw() {
+  background(240);
+  for (var x = 5; x < 600; x = x + 50) {
+    for (var y = 5; y < 600; y = y + 50) {
+      push();
+      translate(x, y);
+      drawHouse();
+      pop();
+    }
+  }
+}
+
+function drawHouse() {
+  triangle(15, 0, 0, 15, 30, 15);
+  rect(0, 15, 30, 25);
+  rect(12, 30, 10, 10);
+}
+</script>
+
+
+
+<script id="jsbin-source-javascript" type="text/javascript">// The p5.js push() function allows you to create a new state and pop() function restores the state to the previous conditions. This allows you to have completely different settings applied to individual objects without worrying those settings to affect the shapes that come after as long as you do everything in between a push() and a pop() call. Here is how it works:
+
+function setup() {
+  createCanvas(900, 900);
+}
+
+function draw() {
+  background(240);
+  for (var x = 5; x < 600; x = x + 50) {
+    for (var y = 5; y < 600; y = y + 50) {
+      push();
+      translate(x, y);
+      drawHouse();
+      pop();
+    }
+  }
+}
+
+function drawHouse() {
+  triangle(15, 0, 0, 15, 30, 15);
+  rect(0, 15, 30, 25);
+  rect(12, 30, 10, 10);
+}</script></body>
+
+</html>
diff --git a/jsbin.dogiper.js b/jsbin.dogiper.js
@@ -0,0 +1,23 @@
+// The p5.js push() function allows you to create a new state and pop() function restores the state to the previous conditions. This allows you to have completely different settings applied to individual objects without worrying those settings to affect the shapes that come after as long as you do everything in between a push() and a pop() call. Here is how it works:
+
+function setup() {
+  createCanvas(900, 900);
+}
+
+function draw() {
+  background(240);
+  for (var x = 5; x < 600; x = x + 50) {
+    for (var y = 5; y < 600; y = y + 50) {
+      push();
+      translate(x, y);
+      drawHouse();
+      pop();
+    }
+  }
+}
+
+function drawHouse() {
+  triangle(15, 0, 0, 15, 30, 15);
+  rect(0, 15, 30, 25);
+  rect(12, 30, 10, 10);
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		## Huisjes tekenen met P5.js
		source https://jsbin.com/dogiper/edit?html,js,output