Feat: Add save to yellow scream (#46)

* update details

* add save option

projects/yellow-scream/index.html

@@ -25,19 +25,23 @@
     </nav>
 
     <h3 class="project-title">Yellow Scream (2024)</h3>
+    <button onclick="saveMasterpiece()">Save your masterpiece</button>
+    <button onclick="resetCanvas()">Clear your canvas</button>
     <details class="projects-details">
       <summary>Details</summary>
-      <p>Created while at the <a href="www.recurse.com">Recurse Center</a>, <i>Yellow Scream (2024)</i> is an homage to
+      <p><i>Yellow Scream (2024)</i> is 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>:</br>
         <iframe width="373" height="210" src="https://www.youtube-nocookie.com/embed/xesGkxslveo?si=cmL72QznsANbtTVq"
           title="YouTube video player" frameborder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
       </p>
+      <a href='http://www.recurse.com' title='Made with love at the Recurse Center'><img src='https://cloud.githubusercontent.com/assets/2883345/11322973/9e557144-910b-11e5-959a-8fdaaa4a88c5.png' height='12px'/></a>
       <p><strong>Usage:</strong> When prompted, grant microphone access, then yell.
-        If you are uninterested in yelling (?!?!?!?!), play the above video through your computer speakers.</p>
+        If you are uninterested in yelling (?!?!?!?!), play the above video through your computer speakers. To make the microphone more or less sensitive, adust <strong>screamThreshold</strong> in the dropdown <strong>Parameters</strong> window.</p>
     </details>
+
 
     <div id="gui-container"></div>
     <noscript>

projects/yellow-scream/sketch.js

@@ -61,7 +61,7 @@ function draw() {
   // console.log(vol);
   if (vol > params.screamThreshold && !isPainting) {
     // Start a stroke
-    x = random(width);
+    x = random(windowWidth);
     y = random(height);
     yellowColor = color(255, 204 + random(-10, 100), 0);
     isPainting = true;
@@ -82,3 +82,24 @@ function draw() {
     square(x, y, currentbrushWidth, 0);
   }
 }
+
+function saveMasterpiece() {
+  let cnv = document.getElementById("p5-canvas");
+  let date = new Date().toISOString().split("T")[0];
+  let filename = 'YellowScream-' + date + ".png";
+  saveCanvas(cnv, filename, 'png' );
+}
+
+function getCanvasHeight() {
+  return 1 + windowHeight - document.getElementById("project-body").offsetTop;
+}
+
+function resetCanvas() {
+  let cnv = document.getElementById("p5-canvas");
+
+  let details = document.getElementsByClassName("projects-details")[0];
+  details.open = false;
+
+  resizeCanvas(windowWidth, getCanvasHeight(), cnv);
+  background("#E8E7D7");
+}