Kicking Off Development with p5.js

-

Week 8

This week marked the beginning of the development phase for the NeuroMap app using p5.js. Based on the storyboard and user flow shaped in previous weeks, I started with building the core interactive puzzle feature.

Progress This Week:

  • Built the puzzle framework using p5.js: Build a puzzle function framework in p5.js: This week's key breakthrough is to realize the function that the system can automatically cut the photos uploaded by users into puzzle pieces. In this process, I tried different cutting algorithms. The first two successful attempts failed to correctly reassemble the puzzle due to coordinate misalignment and image blur. Finally, the third attempt achieved accurate cutting and restoration of puzzle pieces.




  • Developed drag-and-drop interaction: I implemented a basic dragging mechanism and added interactive feedback effects (such as mouse hover highlight) to puzzle pieces. This helps improve visual recognition and operation feedback for elderly users. In order to achieve stable performance, I tested the dragging sensitivity of puzzle pieces on different screen sizes and made preliminary optimizations.


  • Repeated debugging for image loading: While developing the photo upload feature, I encountered issues where the image hadn’t fully loaded before being sliced, causing the puzzle to fail. I resolved this by adding a delay mechanism and error handling in loadImage() to ensure stable functionality.


Updated Project Timeline:

To ensure a structured development cycle, I created a visual project roadmap outlining the weekly goals from Week 8 to Week 13.


Next Steps:

Moving forward, I will continue enhancing the core modules using p5.js:

  • Puzzle Completion Detection: I plan to design a system that can automatically detect and give feedback (such as pop-up prompts or animations) when the user successfully completes the puzzle, and save the photo in the "Memory Library"

  • Memory Map Feature: After completing the puzzle, users can "pin" the memory on an interactive map. Allow users to drag and drop photos on the map, and support zooming for future review.

Comments

Post a Comment

Popular posts from this blog

Initial App Wireframe

-
Image
Week 3 This week, my main task was to start designing the user interface (UI) for the app based on the core concept and target users established in the previous two weeks. To create a more structured and user-friendly flow, I used Figma to complete the initial wireframe of the app interface. UI Design Goals and Philosophy: In the UI design process, I focused on the following key aspects: Simple and intuitive layout : The interface features large icons, large font sizes, and high-contrast colors to ensure Alzheimer’s patients don’t feel confused during use. Warm and friendly aesthetic : The color palette includes soft pinks, blues, and yellows combined with visual elements of puzzles and memory, creating a comforting and emotional experience. Clear module separation and ease of use : The core functions are organized into five main pages: Start Page, Login Page, Home Page, Memory Map Page, and Achievements Page. This ensures that each step in the user journey is logical and e...
Read more

Clarifying the Purpose

-
Image
Week 2 After receiving feedback from my instructor, I began to rethink the significance and purpose of this app. The core question was: Why would users want to play this puzzle game? Since not everyone would play a puzzle game for no reason, the app must offer more value than just entertainment. Therefore, I redefined the app’s target audience as elderly users with Alzheimer's disease , and repositioned the project as a memory-aid tool . Clarifying the Purpose and Audience: This week, I conducted further research on the cognitive needs of Alzheimer’s patients. I learned that patients often struggle with memory loss, emotional detachment, and difficulty recalling everyday experiences. Compared to ordinary puzzle games, a tool that aids in memory recall and emotional connection would be more meaningful to this group. Thus, my app, which combines jigsaw puzzles with personal photo memories and map-based location cues , could serve as a way to both stimulate cognitive functions ...
Read more

Video Shooting Begins

-
Image
Week 6 This week marked a major milestone — the video shooting phase officially began for the promotional video of the Memory Puzzle app. With the storyboard and script finalized in Week 5, I proceeded to organize the filming sessions, capturing the emotional narrative and key app interactions. Progress This Week: Filming Completed : All scenes from the four-part script have been filmed, including: The emotional opening where the grandmother gazes out the window. Moments of interaction with the NeuroMap  app. The final scene featuring emotional taglines and app branding. Footage Overview : A wide range of clips was captured across different settings, including both indoor scenes and app close-ups. Visual materials include .MP4 and .MOV formats, with each clip focused on natural expressions and smooth transitions that align with the emotional tone of the story. App Demonstration : A dedicated screen recording of the app prototype was also included to clearly show t...
Read more