pull new commits

index.html

@@ -22,7 +22,10 @@
       <button type="button" class="tab-btn" data-target="tab3" data-sketch="sk3" role="tab">HWK 4. B</button>
       <button type="button" class="tab-btn" data-target="tab4" data-sketch="sk4" role="tab">HWK 4. C</button>
 
-      <!-- Examples -->
+      <!-- Homework 5 -->
+      <button type="button" class="tab-btn" data-target="tab5" data-sketch="sk5" role="tab">HWK 5. Narrative Image</button>
+
+      <!-- Examples
       <button type="button" class="tab-btn" data-target="tab5" data-sketch="sk5" role="tab">Ex 1</button>
       <button type="button" class="tab-btn" data-target="tab6" data-sketch="sk6" role="tab">Ex 2</button>
       <button type="button" class="tab-btn" data-target="tab7" data-sketch="sk7" role="tab">Ex 3</button>
@@ -32,7 +35,7 @@
       <button type="button" class="tab-btn" data-target="tab11" data-sketch="sk11" role="tab">Ex 7</button>
       <button type="button" class="tab-btn" data-target="tab12" data-sketch="sk12" role="tab">Ex 8</button>
       <button type="button" class="tab-btn" data-target="tab13" data-sketch="sk13" role="tab">Ex 9</button>
-      <button type="button" class="tab-btn" data-target="tab14" data-sketch="sk14" role="tab">Ex 10</button>
+      <button type="button" class="tab-btn" data-target="tab14" data-sketch="sk14" role="tab">Ex 10</button> -->
     </nav>
 
     <!-- Lab 1: Homepage -->
@@ -54,57 +57,140 @@
       <div id="sketch-drawing-sk2" class="sketch-evolution">
         <!-- Project narrative template: replace the text below with your own narrative -->
         <div class="sketch-narrative" aria-labelledby="sk2-narrative-title">
-          <h3 id="sk2-narrative-title">Sketch narrative (replace this and add to the other two sketches!)</h3>
-          <p class="small-note">Replace this entire block with your own text when submitting.</p>
+          <h3 id="sk2-narrative-title">Sketch explanations on the ambient clock </h3>
           <p>
-            Context: Briefly describe the situation or user need this sketch addresses. For example,
-            "This sketch visualizes sunrise/sunset behavior for a simple teaching demo on coordinate
-            systems and interaction." Keep it short — 1–2 sentences.
+            Context: By the sketch I drew, it's an ambient color clock used under the study setting. This clock visualizes
+            the color of every time period during a day, it could help students understand and notice
+            how long they have studied by seeing the color first.
           <ul>
-            <li><strong>Context:</strong> Who is this for? In what context will it be used? (e.g., mountain, pomodoro,
-              running, cooking, breathing?)</li>
-            <li><strong>Design decisions:</strong> Explain 2–3 key choices you made (layout, color, interaction) and why
-              you made them. Use plain language and reference any constraints (time, accessibility,
-              or target device).</li>
-            <li><strong>Future work:</strong> 1–2 ideas for improvements or extensions.</li>
+            <li><strong>Context:</strong> It's used in study setting.</li>
+            <li><strong>Design decisions:</strong> 
+              1. I made the ambient color choices as the background color can be changed along with different periods of time. 
+              2. I set the color to change every hour, in the night with darker color, then moves to midnight and early morning changes to lighter color,
+              while in the noon and afternoon changes to warmer color.
+              3. I choose the digital clock font style as my time, because I think it can show the modern style,
+              and give the sense of digital time.
+              It can be used under any circumstance with any device.
+              </li>
+            <li><strong>Future work:</strong> 1. Could add the dynamic effects: adding the flowing effects,
+            or sunlight reflecting effects, to make it become much more vivid and beautiful.
+            2. Could add more interactivity, like adding the daily tasks as the purpose under the study setting.</li>
           </ul>
           </p>
         </div>
 
-        <h3>Sketch evolution</h3>
-        <p class="small-note">Replace <b>these images</b> with your own sketch evolution images.</p>
+        <h3>Sketch evolution (annotations of changes are on the pictures!)</h3>
         <figure>
-          <!-- <img src="images/sk2-evolution-1.png" alt="Sketch #A - step 1" /> -->
+          <img src="images/sk2-evolution-1.png" alt="Sketch #A - step 1" />
           <figcaption>Step 1 — initial layout and annotated design decisions</figcaption>
         </figure>
         <figure>
-          <!-- <img src="images/sk2-evolution-2.png" alt="Sketch #A - step 2" /> -->
+          <img src="images/sk2-evolution-2.png" alt="Sketch #A - step 2" width = "500"/>
           <figcaption>Step 2 — second layout after peer feedback</figcaption>
         </figure>
         <figure>
-          <!-- <img src="images/sk2-evolution-3.png" alt="Sketch #A - step 3" /> -->
+          <img src="images/sk2-evolution-3.png" alt="Sketch #A - step 3" width = "850"/>
           <figcaption>Step 3 — refined visuals and annotations</figcaption>
         </figure>
       </div>
     </section>
 
-    <!-- Homework 4: Sketch 1 -->
+    <!-- Homework 4: Sketch 2 -->
     <section id="tab3" class="tab-content" role="tabpanel">
       <div id="sketch-container-sk3" class="sketch-container"></div>
+      <div id="sketch-drawing-sk3" class="sketch-evolution">
+        <!-- Project narrative template: replace the text below with your own narrative -->
+        <div class="sketch-narrative" aria-labelledby="sk3-narrative-title">
+          <h3 id="sk3-narrative-title">Sketch explanations on the book clock</h3>
+          <p>
+            Context: By the sketch I drew, it's a book clock with good visualizations on visualizing the hour as chapter,
+            minute as page, and second as every number appears on the book. It's suitable under the 
+            study setting and clear for audience to look by finding the highlight number.
+          <ul>
+            <li><strong>Context:</strong> It's used under the study setting.</li>
+            <li><strong>Design decisions:</strong> 
+              1. I used the book as the clock representation because it's under the study setting,
+              and it can be cleared and easy to look for students.
+              2. I choose the highlight color as baby blue, because it's a calm color and can help students
+              focus on their study.
+              3. I set the hour as chapter, minute as page, and second as every number appears on the book,
+              because it's easy to understand, also really related for students who are doing the homework
+              or reading.
+              There is no specific constraint, I think it can be used under every circumstance.</li>
+            <li><strong>Future work:</strong> 1. Add interaction: audience can diy the fighting words on the top-right.
+            2. add the process line to show the process of time in every minute to improve the clarity
+          and readablity, have planned for v3.</li>
+          </ul>
+          </p>
+        </div>
+
+        <h3>Sketch evolution (annotations of changes are on the pictures!)</h3>
+        <figure>
+          <img src="images/sk3-evolution-1.png" alt="Sketch #B - step 1" width = "850"/>
+          <figcaption>Step 1 — initial layout and annotated design decisions</figcaption>
+        </figure>
+        <figure>
+          <img src="images/sk3-evolution-2.png" alt="Sketch #B - step 2" width = "850"/>
+          <figcaption>Step 2 — second layout after peer feedback</figcaption>
+        </figure>
+        <figure>
+          <img src="images/sk3-evolution-3.png" alt="Sketch #B - step 3" width = "850"/>
+          <figcaption>Step 3 — refined visuals and annotations</figcaption>
+        </figure>
+      </div>
     </section>
 
-    <!-- Homework 4: Sketch 1 -->
+    <!-- Homework 4: Sketch 3 -->
     <section id="tab4" class="tab-content" role="tabpanel">
       <div id="sketch-container-sk4" class="sketch-container"></div>
-    </section>
-
+      <div id="sketch-drawing-sk4" class="sketch-evolution">
+        <!-- Project narrative template: replace the text below with your own narrative -->
+        <div class="sketch-narrative" aria-labelledby="sk4-narrative-title">
+          <h3 id="sk4-narrative-title">Sketch explanations on Pomodoro countdown clock (FINAL CLOCK!!)</h3>
+          <p>
+            Context: By the sketch I drew, this pomodoro countdown clock visualizes the countdown path while students
+            using this clock to help them focus and study. Also students can interact with the clock by clicking several buttons.
+          <ul>
+            <li><strong>Context:</strong> It's under the study setting and in a pomodoro mode for students want to
+            use the clock to focus in a period-focus study mode.</li>
+            <li><strong>Design decisions:</strong> 1. I choose the green color as my main showing color
+              because I take reference to the forest app; when I want to focus, green color is always considered
+              as the refreshing color that can help people focus. Besides, I use tree and burgeoning emojis on my clock to fit the vibe.
+              2. Design as a circle; along with the time passes, it'll show the processing path to illustrate
+              how long you've studied and how long is left.
+              3. Interaction! I added the start, reset, and pause button to help audience control the clock, increase
+            the interactivity.
+            There is no specific constraint for this clock being used.</li>
+            <li><strong>Future work:</strong> 1. Add tasks that audience want to do as the plan list, to increase
+            the interactivity. 2. Add the rest time, around 5 minutes, after every pomodoro cycle.
+          3. Users can modify the pomodoro countdown time. </li>
+          </ul>
+          </p>
+        </div>
 
+        <h3>Sketch evolution (annotations of changes are on the pictures!)</h3>
+        <figure>
+          <img src="images/sk4-evolution-1.png" alt="Sketch #C - step 1" width = "700"/>
+          <figcaption>Step 1 — initial layout and annotated design decisions</figcaption>
+        </figure>
+        <figure>
+          <img src="images/sk4-evolution-2.png" alt="Sketch #C - step 2" width = "700"/>
+          <figcaption>Step 2 — second layout after peer feedback</figcaption>
+        </figure>
+        <figure>
+          <img src="images/sk4-evolution-3.png" alt="Sketch #C - step 3" width = "700"/>
+          <figcaption>Step 3 — refined visuals and annotations</figcaption>
+        </figure>
+      </div>
+    </section>
 
-    <!-- Examples -->
+    <!-- Homework 5: Narrative Message -->
     <section id="tab5" class="tab-content" role="tabpanel">
       <div id="sketch-container-sk5" class="sketch-container"></div>
     </section>
 
+    <!-- Examples
+
     <section id="tab6" class="tab-content" role="tabpanel">
       <div id="sketch-container-sk6" class="sketch-container"></div>
     </section>
@@ -140,7 +226,7 @@ <h3>Sketch evolution</h3>
 
     <section id="tab14" class="tab-content" role="tabpanel">
       <div id="sketch-container-sk14" class="sketch-container"></div>
-    </section>
+    </section> -->
 
   </main>
 

sketches/sketch1.js

@@ -21,7 +21,7 @@ registerSketch('sk1', function (p) {
     p.ellipse(p.width / 2, shapeHeight, 100, 100);
     p.textSize(20);
     p.fill('black');
-    p.text('Play with the sun!', currentWidth / 2, shapeHeight / 2);
+    p.text('Let us play with the sun!', currentWidth / 2, shapeHeight / 2);
 
     p.fill('sandybrown');
     p.rect(0, horizon, p.width, p.height);
@@ -33,3 +33,58 @@ registerSketch('sk1', function (p) {
   };
 });
 
+// Lab 1 code:
+// let shapeHeight;
+
+// let designWidth = 400;
+// let designHeight= 400;
+// let horizon ;
+// function setup() {
+//   createCanvas(windowWidth,windowHeight);
+//   horizon =height/2;
+// }
+
+// function draw() {
+
+//   //shape follows y-coordinate of mouse
+//   shapeHeight = mouseY;
+//   currentWidth = mouseX;
+
+//   //light blue background if the shape is above horizon
+
+//   //with if-else statement
+//   if (shapeHeight < horizon) {
+//     background("lightblue"); // blue if above horizon
+
+//   } else {
+//     background("pink"); // pink if below horizon
+//   }
+
+//   //sun
+//   fill("white");
+
+//   rect(width/4, shapeHeight, width/2);
+//   textSize(20);
+//   fill("black");
+//   text('Hi! My name is Lucia :)', currentWidth/2, shapeHeight/2);
+
+
+//   // draw line for horizon
+//   stroke('lavender');
+//   line(0,horizon,width,horizon);
+
+//   //grass
+
+//   fill("lavender");
+
+//   rect(0, horizon, width, height);
+
+// }
+
+// function windowResized() {
+//   resizeCanvas(windowWidth, windowHeight);
+//   horizon = height / 2; // recalc horizon after resize
+// }
+
+
+

sketches/sketch2.js

@@ -1,14 +1,90 @@
 // Instance-mode sketch for tab 2
 registerSketch('sk2', function (p) {
+  let myFont;
+
+  p.preload = function () {
+    myFont = p.loadFont('fonts/digital-7-mono.ttf');
+  }
+
   p.setup = function () {
-    p.createCanvas(p.windowWidth, p.windowHeight);
+    p.createCanvas(800, 800);
+    p.textAlign(p.CENTER, p.CENTER);
   };
+
+  // Change ambient color based on hour of the day
+  function ambientColorForHour(h) {
+    p.colorMode(p.HSB, 360, 100, 100); 
+    let c1, c2, t; 
+
+    if (h >= 0 && h < 6) {     
+      c1 = p.color(220, 35, 18); 
+      c2 = p.color(220, 25, 35);
+      t = (h - 0) / 5;
+    } else if (h >= 6 && h < 12) { 
+      c1 = p.color(210, 20, 60);  
+      c2 = p.color(200, 18, 95);
+      t = (h - 6) / 5;
+    } else if (h >= 12 && h < 18) {  
+      c1 = p.color(35, 40, 95); 
+      c2 = p.color(25, 60, 80);
+      t = (h - 12) / 5;
+    } else {                   
+      c1 = p.color(220, 25, 50);     
+      c2 = p.color(220, 35, 22);
+      t = (h - 18) / 5;
+    }
+    const c = p.lerpColor(c1, c2, t); 
+    p.colorMode(p.RGB, 255);                 
+    return c;             
+  }
+
+  // Choose text color (black/white) based on background brightness
+  function textColorFor(bg) {
+    const r = p.red(bg), g = p.green(bg), b = p.blue(bg); 
+    const L = 0.2126 * r + 0.7152 * g + 0.0722 * b;  
+    return (L > 160) ? p.color(0) : p.color(255);     
+  }
+
   p.draw = function () {
-    p.background(220);
-    p.fill(100, 150, 240);
-    p.textSize(32);
-    p.textAlign(p.CENTER, p.CENTER);
-    p.text('HWK #4. A', p.width / 2, p.height / 2);
+    p.background(255);
+    // show the current time in the rectangle clock
+    const h = p.hour();
+    const m = p.minute();
+    const s = p.second();
+
+    const rectColor = ambientColorForHour(h);
+    // // ambient background colors by different time ranges
+    // let r, g, b;
+    // if (h >= 6 && h < 12) { // morning range - sunrise - soft orange/yellow
+    //   r = 255; g = 235; b = 210;
+    // } else if (h >= 12 && h < 18) { // afternoon range - warm golden tones
+    //   r = 255; g = 210; b = 160;
+    // } else { // night & midnight — dark blue
+    //   r = 50; g = 60; b = 90;
+    // }
+    // create the rectangle shape + fit the ambient color of the clock
+    const rectW = 480;
+    const rectH = 330;
+    const x = (p.width - rectW) / 2;
+    const y = (p.height - rectH) / 2;
+
+    p.noStroke();
+    p.fill(rectColor); // fill the rectangle with the chosen color
+    p.rect(x, y, rectW, rectH, 10);
+
+    const timeString = p.nf(h, 2) + ':' + p.nf(m, 2) + ':' + p.nf(s, 2);
+
+    p.textFont(myFont);
+    p.textSize(115);
+    p.fill(textColorFor(rectColor)); // choose text color based on background brightness automatically
+    // if (h >= 6 && h < 18) {
+    //   p.fill(0); // black text for day
+    // }
+
+    p.push();
+    p.translate(p.width / 2 , p.height / 2 - 10);
+    p.scale(1, 1.2);
+    p.text(timeString, 0, 0);
+    p.pop();
   };
-  p.windowResized = function () { p.resizeCanvas(p.windowWidth, p.windowHeight); };
 });