Week 3.2. exercise

2026-03-17 10:00:59 +09:00
parent 9a4b251976
commit 158a3d0784
3 changed files with 81 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 **/.DS_Store
 todo/**
 _*.js
-solution-*.js
+solution-*.js
+old/
--- a/w3_2_functions/index.html
+++ b/w3_2_functions/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.5/p5.min.js'
+    integrity='sha512-jOTg6ikYiHx1LvbSOucnvZi4shXbaovZ91+rfViIiUFLgAJK+k1oQtGEaLvDB8rsZwEfUksTgmhrxdvEDykuzQ=='
+    crossorigin='anonymous'></script>
+
+  <meta charset="utf-8" />
+  <style>
+    /* Center the canvas */
+    canvas {
+      display: block;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<script defer src="./sorting.js"></script>
+<!-- <script defer src="./solution-sorting.js"></script> -->
+
+<body></body>
+
+</html>
--- a/w3_2_functions/sorting.js
+++ b/w3_2_functions/sorting.js
@@ -0,0 +1,55 @@
+// Main
+const N = 10;
+let strips = [];
+
+function setup() {
+  createCanvas(400, 300);
+  strips = createStrips(N);
+
+  // TODO sort the strips by luminance
+}
+
+function draw() {
+  background(0);
+  noStroke();
+  const h = height / strips.length;
+
+  // TODO draw the strips
+}
+
+// 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) {
+  // TODO
+}
+
+/**
+ * createStrips -- create an array of random colors
+ * @param {number} n
+ * @returns Color[]
+ */
+function createStrips(n) {
+  // TODO
+}