HUMAN COMPUTER INTERACTION / TASK 01 Progress Logs

Jump Link - Progress Log

• Progress Log #1
• Progress Log #2

Progress Log #1

22/09/25 Week 01

• Briefing and Understanding HCI
• Brainstormed ideas and consulted with the lecturer
• Started to code using p5.js (Basic Coding only)
• Research on the camera and field of view

Lecture Feedback:

• The idea is workable. 
• Use Processing (p5.js) to develop and explore it this week. Consider the camera’s field of view and ensure the content sc.

Figure 1.1 Brief Starting with p5js

29/09/25 Week 02

• Explored the mini-game content in more detail (expanding the idea).
• Tested hand-gesture interaction using p5.js (grabbing and moving a circle) as a simple prototype.
• Tested the UI bar (progress bar changes color from blue to green when it reaches 100).
• Planned the complete user experience (finalizing the idea).

Lecture Feedback

• The tic-tac-toe concept is not very suitable with the theme it is a little random.
• Consider a new idea—perhaps something like grabbing objects to light up the environment, or another concept that better fits the background and overall setting.

Figure 1.2 Testing on grabbing circle

Figure 1.3 Testing on grabbing circle with progress bar

Progress Log #2

06/10/2025 Week 03

Presented the lecture on:

• The moving circle
• The moving UI bar

To Do This Week / What I Have Done

• Gain a deeper understanding of the code
• Experiment with random placement of fireflies
• Try creating glowing fireflies (that can move / Replace with gif)
• Research the L-System for the forest background
• Sketch and plan the visuals

Lecture Feedback

• For the random placement idea, refer to Nature of Code – Randomness
• For the fireflies, check OpenProcessing to see existing examples
• Fireflies can be created in different ways:
• By adding layers using code
• Or by layering PNG images together to achieve the glowing effect and background
• You can start with simple circle assets or use your own assets — both approaches are fine

 if want to do 3d in blender (download a plug in (3D printing Plug In)

Figure 3.1 Planning on user flow

Figure 3.2 User Flow 

Figure 3.3 Visual Reference for Forest Background

Video 3.1 p5.js Progress

13/10/2025 Week 04

Presented the lecture on:

• Visual Background for the Forest (Art Direction)
• User Flow
• p5.js Progress (GIF, Random Movement, Random Appearance)

Lecture Feedback:

• How big is your project scale? (You could consider expanding it.)
• Check the camera distance for your laptop.
• What kind of visual feedback will be used to motivate users? (For example, When the jar of fireflies is moved, users can see animals appearing in the dark)
• You could conduct user testing on both the hand gestures and the visual feedback that appears after the fireflies are caught.
• Consider adding visual feedback to indicate when the fireflies are successfully caught, as currently users cannot tell whether they’ve caught the fireflies or not.
• The user flow/journey can be updated to make it clearer and to include the visual feedback elements.

Figure 4.1 Updated User Journey

User Testing on Hand Gesture

• User Test 1
• The fireflies are too small, making it difficult to see whether they are being caught or not.
• The hand gesture interaction works but is not very accurate.
• After placing the fireflies into the jar, the system immediately grabs the jar, which feels inconvenient for the user.

• User Test 2
• The finger color should be changed for better visibility.
• It is hard to identify whether the fireflies have been successfully caught or not.

19/10/2025 Week 05 - Public Holiday

27/10/2025 Week 06

Presented the lecture on:

• With the updated p5.js 
• Hand gesture 
• User Test

Lecture Feedback 

• The view of camera (Interaction Space)
• Find More User Test 
• The Jar and Fireflies Hand Gesture can be update 

What to do 

• Check the width and length for the camera to determine how far the user can be. interaction (Width and Length )
• Collect more user data.
• Change the hand gesture from the pump to the center of the five fingers — use the centroid.
• For the jar: after the fireflies are released, the jar should no longer be catchable. Currently, it immediately catches the jar; change it so that it only interacts with other released items.
• Finalize the user flow.
• The jar glow as more fireflies are released in the jar, apply visual feedback when the fireflies are caught.
• fireflies glow effect
• Conduct user testing - this is the most important step.
• Check Why is it legging 

Camera far

max 56 feet

width 38