Week 3.2 functions exercise

2025-03-10 14:24:07 +09:00 · 2025-03-10 14:24:07 +09:00 · 270d7c5bfe
commit 270d7c5bfe
parent 36ab0e4bfc
2 changed files with 78 additions and 0 deletions
--- a/w3_2_functions/index.html
+++ b/w3_2_functions/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../libs/js/p5.js"></script>
+    <script src="../libs/js/p5.dom.min.js"></script>
+    <script src="../libs/js/p5.sound.min.js"></script>
+
+    <meta charset="utf-8" />
+    <style>
+      /* Center the canvas */
+      canvas {
+        display: block;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
+
+  <script defer src="./sketch.js"></script>
+
+  <body></body>
+</html>
--- a/w3_2_functions/sketch.js
+++ b/w3_2_functions/sketch.js
@ -0,0 +1,57 @@
+// Main
+const N = 10;
+let strips = [];
+
+function setup() {
+  createCanvas(400, 300);
+  strips = createStrips(N);
+}
+
+function draw() {
+  background(0);
+  noStroke();
+  const stripHeight = height / strips.length;
+  for (let i = 0; i < strips.length; i++) {
+    // draw the strips
+    // const r = ...
+  }
+}
+
+// HELPERS
+
+/**
+ *
+ * @typedef {{red:number, green:number, blue:number}}  Color
+ */
+
+/**
+ * createRndColorStrip
+ * @returns Color
+ */
+function createRndColorStrip() {
+  return {
+    red: Math.floor(Math.random() * 255),
+    green: Math.floor(Math.random() * 255),
+    blue: Math.floor(Math.random() * 255),
+  };
+}
+
+/**
+ * getLuminance -- get luminance given an array of Color
+ * @param {Color} strip
+ * @returns number
+ */
+function getLuminance(strip) {
+  // PLACEHOLDER - return the luminance of the strip
+  return 0;
+}
+
+/**
+ * createStrips -- create an array of random colors
+ * @param {number} n
+ * @returns Color[]
+ */
+function createStrips(n) {
+  // PLACEHOLDER - return an arrray of strips of colors
+  return [];
+}