From b7cc25ebd7053cea53b71f001af89ba312d25a05 Mon Sep 17 00:00:00 2001
From: Hannah Robertson <hannahilea@users.noreply.github.com>
Date: Wed, 6 Nov 2024 17:29:10 -0500
Subject: [PATCH] Feat: Add save to yellow scream (#46)

* update details

* add save option
---
 projects/yellow-scream/index.html |  8 ++++++--
 projects/yellow-scream/sketch.js  | 23 ++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/projects/yellow-scream/index.html b/projects/yellow-scream/index.html
index 6f348e5..f4b3bf8 100644
--- a/projects/yellow-scream/index.html
+++ b/projects/yellow-scream/index.html
@@ -25,9 +25,11 @@
     </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"
@@ -35,9 +37,11 @@ <h3 class="project-title">Yellow Scream (2024)</h3>
           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>
diff --git a/projects/yellow-scream/sketch.js b/projects/yellow-scream/sketch.js
index ce0c090..7e39fa2 100644
--- a/projects/yellow-scream/sketch.js
+++ b/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");
+}