Merge pull request #5 from hannahilea/hr/world

Add Wonderful World sketch plus template for new sketches
hannahilea · Apr 2, 2024 · b0964be · b0964be
2 parents 20c84ac + 28bafa4
commit b0964be
Show file tree

Hide file tree

Showing 9 changed files with 251 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -65,31 +65,6 @@ <h5>DSP ENGINEER | MAKER </h5>
       </div>
     </div>
   </div>
-
-  <!-- <script>
-      (function (i, s, o, g, r, a, m) {
-        i["GoogleAnalyticsObject"] = r;
-        (i[r] =
-          i[r] ||
-          function () {
-            (i[r].q = i[r].q || []).push(arguments);
-          }),
-          (i[r].l = 1 * new Date());
-        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m);
-      })(
-        window,
-        document,
-        "script",
-        "https://www.google-analytics.com/analytics.js",
-        "ga"
-      );
-
-      ga("create", "UA-TODO-1", "auto");
-      ga("send", "pageview");
-    </script> -->
 </body>
 
 </html>
diff --git a/projects.html b/projects.html
@@ -29,22 +29,32 @@ <h1><a href="./index.html">@hannahilea</a>'s projects</h1>
     </div>
 
     <div>
-      <!-- <h3>Gallery</h3> -->
       (SITE IS UNDER ACTIVE DEVELOPMENT; ADDITIONAL PROJECTS COMING SOON)
       <ul>
+        <!-- Add new project here -->
+        <li><a href="./projects/wonderful-world">
+            <h3>Sketch: Wonderful world</h3>
+          </a>
+          <p>Adapated from a creative coding excercise (prompt: <i>What a wonderful world</i>),
+            co-created with David Brooks while at the <a href="www.recurse.com">Recurse Center</a>.</p>
+        </li>
+        <li><a href="./projects/yellow-scream">
+            <h3>Yellow Scream (2024)</h3>
+          </a>
+          <p>An homage to <a href="https://walkerart.org/magazine/now-streaming-kim-beoms-yellow-scream-2012/">Kim
+              Beom's <i>Yellow Scream
+                (2012)</i></a></p>
+        </li>
         <li><a href="./projects/sound-ripple-sketch">
-          <h3>Sketch: Sound ripples</h3></a> 
+            <h3>Sketch: Sound ripples</h3>
+          </a>
           <p>A creative coding excercise (prompt: <i>Particles, lots of them</i>), co-created with <a
-            href="https://hendersonreed.github.io/">Henderson Reed Hummel</a>
-          while at the <a href="www.recurse.com">Recurse Center</a></p></li>
-          <li><a href="./projects/yellow-scream">
-            <h3>Yellow Scream (2024)</h3></a> 
-            <p>An homage to <a
-              href="https://walkerart.org/magazine/now-streaming-kim-beoms-yellow-scream-2012/">Kim Beom's <i>Yellow Scream
-                (2012)</i></a></p></li>
-        <!-- <li>...</li> -->
+              href="https://hendersonreed.github.io/">Henderson Reed Hummel</a>
+            while at the <a href="www.recurse.com">Recurse Center</a></p>
+        </li>
+
       </ul>
-      
+
     </div>
 
     <div class="row-2">

diff --git a/projects/__template/index.html b/projects/__template/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Sketch: {{ PROJECT_NAME }}</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+  <script>
+    var GUI = lil.GUI;
+  </script>
+  <link rel="stylesheet" type="text/css" href="../../css/main.css" />
+  <style>
+    canvas {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 10;
+    }
+
+  </style>
+</head>
+
+<body>
+  <nav class="navbar" role="navigation"></nav>
+  <div class="underline">
+    <h4><a href="../../index.html">@hannahilea</a> > <a href="../../projects.html">projects</a> > Sketch: {{ PROJECT_NAME }}
+    </h4>
+  </div>
+  </nav>
+  <details>
+    <summary>Details</summary>
+    <p>A creative coding excercise (prompt: <i>TODO</i>), co-created with <a
+        href="https://TODO.github.io/">TODO</a>
+      while at the <a href="www.recurse.com">Recurse Center</a></p>
+    <p><i>Usage:</i> When prompted, grant microphone access, then TODO.</p>
+  </details>
+
+  <script src="./sketch.js"></script>
+
+</body>
+
+</html>
diff --git a/projects/__template/sketch.js b/projects/__template/sketch.js
@@ -0,0 +1,33 @@
+// TODO: edit this blurb!
+// Original p5 sketch {{ co-created with FOO+link}}
+// as a creative coding project while at the 
+// Recurse Center (www.recurse.com/)
+
+let mic;
+
+const params = {
+  micSensitivity: 4.0,
+};
+
+const gui = new GUI();
+gui.add(params, 'micSensitivity', 0.01, 30, 2);
+
+function setup() {
+  createCanvas(windowWidth, windowHeight)
+
+  // Create an Audio input
+  mic = new p5.AudioIn();
+
+  // start the Audio Input.
+  // By default, it does not .connect() (to the computer speakers)
+  mic.start();
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
+
+function draw() {
+  // https://stackoverflow.com/questions/55026293/google-chrome-javascript-issue-in-getting-user-audio-the-audiocontext-was-not
+  getAudioContext().resume();
+}
diff --git a/projects/wonderful-world/earth.jpg b/projects/wonderful-world/earth.jpg
diff --git a/projects/wonderful-world/index.html b/projects/wonderful-world/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Sketch: Wonderful world</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+  <script>
+    var GUI = lil.GUI;
+  </script>
+  <link rel="stylesheet" type="text/css" href="../../css/main.css" />
+  <style>
+    canvas {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 10;
+    }
+
+  </style>
+</head>
+
+<body>
+  <nav class="navbar" role="navigation"></nav>
+  <div class="underline">
+    <h4><a href="../../index.html">@hannahilea</a> > <a href="../../projects.html">projects</a> > Sketch: Wonderful
+      world
+    </h4>
+  </div>
+  </nav>
+  <details>
+    <summary>Details</summary>
+    <p>Adapated from <a href="https://editor.p5js.org/hannahilea/sketches/AWA1W-c3H">a creative coding excercise</a>
+      (prompt:
+      <i>What a wonderful world</i>)
+      co-created with David Brooks while at the <a href="www.recurse.com">Recurse Center</a>.
+      Image <a
+        href="https://visibleearth.nasa.gov/images/73826/october-blue-marble-next-generation-w-topography-and-bathymetry">via
+        NASA</a>. UX consult by Alex Ferguson.
+    </p>
+    <p><i>Usage:</i> Click anywhere on the Earth to play/pause the audio. Move the mouse around your screen during
+      playback. May not work on phone.</p>
+  </details>
+
+  <script src="./sketch.js"></script>
+
+</body>
+
+</html>
diff --git a/projects/wonderful-world/sketch.js b/projects/wonderful-world/sketch.js
@@ -0,0 +1,70 @@
+// Initial p5 sketch for this project was co-created with David Brooks
+// as a creative coding project while at the 
+// Recurse Center (www.recurse.com/)
+// https://editor.p5js.org/hannahilea/sketches/AWA1W-c3H
+
+let angle = 0;
+let earthImg;
+
+let mySound;
+function preload() {
+  soundFormats('mp3');
+  mySound = loadSound('world.mp3');
+  earthImg = loadImage('earth.jpg');
+}
+
+function setup() {
+  let c = createCanvas(windowWidth, windowHeight, WEBGL);
+  c.mousePressed(playPauseSong);
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
+
+function playPauseSong() {
+  if (mySound.isPlaying()) {
+    mySound.pause();
+  } else {
+    mySound.play();
+  }
+}
+
+function draw() {
+  // Get our values!
+  rate = map(mouseY, 0, height, 0.5, 2);
+  let spinAmt;
+  if (!mySound.isPlaying()) {
+    spinAmt = 0;
+  } else if (mouseY < height / 2) {
+    spinAmt = map(mouseY, 0, height, 0.001, 0.03, true)
+  } else {
+    spinAmt = map(mouseY - height / 2, 0, height, 0.02, 0.3);
+  }
+  pan = map(mouseX, 0, width, -1., 1.);
+
+  // Draw background gradient
+  c1 = color(300);
+  let c2 = color(map(pan, -1, 1, 212, 251),
+    map(pan, -1, 1, 20, 176),
+    map(pan, -1, 1, 90, 51));
+  for (let y = -windowHeight / 2; y < windowHeight / 2; y++) {
+    n = map(y, -windowHeight / 2, windowHeight / 2, 0, 1);
+    let newc = lerpColor(c1, c2, n);
+    stroke(newc);
+    line(-windowWidth / 2, y, windowWidth / 2, y);
+  }
+
+  // Draw stuff
+  rotateY(angle);
+  lights();
+  fill(200);
+  noStroke();
+  angle += spinAmt;
+  texture(earthImg);
+  sphere(windowHeight * .35);
+
+  // Update audio
+  mySound.rate(rate);
+  mySound.pan(pan);
+}
diff --git a/projects/wonderful-world/world.mp3 b/projects/wonderful-world/world.mp3
diff --git a/utilities.jl b/utilities.jl
@@ -0,0 +1,34 @@
+const NEW_PROJ_COMMENT = "<!-- Add new project here -->"
+
+# Some quick and brittle Julia utilities for adding new projects
+# Doesn't handle nested, only does new js projects
+# Will fail if dir already exists
+# Future: functions to add different types of projects
+# Future: validate git state isn't dirty before starting
+function new_js_project()
+    project_name = lstrip(rstrip(Base.prompt("Enter project name: ")))
+    dir_name = lstrip(rstrip(Base.prompt("Enter project url name: ")))
+    dir = joinpath("projects", dir_name)
+
+    @info "Creating new project directory" project_name dir_name
+    cp(joinpath("projects", "__template"), dir)
+    for file in readdir(dir; join=true)
+        @info "Updating $file..."
+        str = read(file, String)
+        str = replace(str, "{{ PROJECT_NAME }}" => project_name)
+        str = replace(str, "{{ DIR_NAME }}" => dir_name)
+        write(file, str)
+    end
+
+    @info "Adding new project to project index"
+    let
+        projects_file = "projects.html"
+        new_blob = """\n        <li><a href="./projects/$(dir_name)">\n            <h3>$(project_name)</h3>\n          </a>\n          <p>TODO-description</p>\n        </li>"""
+        str = read(projects_file, String)
+        i = findfirst(NEW_PROJ_COMMENT, file)
+        isnothing(i) && throw(ArgumentError("Oh no, $(NEW_PROJ_COMMENT) not found in projects.html!"))
+        str = str[1:last(i)] * new_blob * str[last(i)+1:end]
+        write(projects_file, str)
+    end
+    @info "Do ctrl+f TODO to find regions to update for newly added project!"
+end