next sketch

floodfx · Oct 28, 2019 · aaf0e68 · aaf0e68
1 parent 24de8b1
commit aaf0e68
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -2,4 +2,4 @@
 
 ## Commands
 
- * `npm run sketch -- path/to/file.js --open`
+ * `npm run parcel -- path/to/file`
diff --git a/src/sketches/learn/gd-book/ch-1/index.html b/src/sketches/learn/gd-book/ch-1/index.html
@@ -0,0 +1,7 @@
+<html>
+
+<body>
+  <script src="./p.1.1.1.ts"></script>
+</body>
+
+</html>
diff --git a/src/sketches/learn/gd-book/ch-1/p.1.0.ts b/src/sketches/learn/gd-book/ch-1/p.1.0.ts
@@ -20,4 +20,4 @@ function sketch(p: p5) {
   };
 }
 
-new p5(sketch);
+new p5(sketch);
diff --git a/src/sketches/learn/gd-book/ch-1/p.1.1.1.ts b/src/sketches/learn/gd-book/ch-1/p.1.1.1.ts
@@ -0,0 +1,28 @@
+import p5 from "p5";
+
+// Generative Design P.1.0
+function sketch(p: p5) {
+  let stepX: number, stepY: number;
+  const y = 100;
+
+  p.setup = () => {
+    p.createCanvas(800, 400);
+    p.background(0);
+  };
+
+  p.draw = () => {
+    p.colorMode("hsb", p.width, p.height, 100);
+
+    stepX = p.mouseX + 2;
+    stepY = p.mouseY + 2;
+
+    for (let gridY = 0; gridY < p.height; gridY += stepY) {
+      for (let gridX = 0; gridX < p.width; gridX += stepX) {
+        p.fill(gridX, p.height - gridY, 100);
+        p.rect(gridX, gridY, stepX, stepY);
+      }
+    }
+  }
+}
+
+new p5(sketch);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@

		## Commands

		* `npm run sketch -- path/to/file.js --open`
		* `npm run parcel -- path/to/file`
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,4 +20,4 @@ function sketch(p: p5) { @@
       };
     }
-    new p5(sketch);
+    new p5(sketch);