Johnishere
  • NEW!
    NEW!  Connect Ideas Across Notes
    Save time and share insights. With Paragraph Citation, you can quote others’ work with source info built in. If someone cites your note, you’ll see a card showing where it’s used—bringing notes closer together.
    Got it
      • Create new note
      • Create a note from template
        • Sharing URL Link copied
        • /edit
        • View mode
          • Edit mode
          • View mode
          • Book mode
          • Slide mode
          Edit mode View mode Book mode Slide mode
        • Customize slides
        • Note Permission
        • Read
          • Only me
          • Signed-in users
          • Everyone
          Only me Signed-in users Everyone
        • Write
          • Only me
          • Signed-in users
          • Everyone
          Only me Signed-in users Everyone
        • Engagement control Commenting, Suggest edit, Emoji Reply
      • Invite by email
        Invitee

        This note has no invitees

      • Publish Note

        Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note No publishing access yet

        Your note will be visible on your profile and discoverable by anyone.
        Your note is now live.
        This note is visible on your profile and discoverable online.
        Everyone on the web can find and read all notes of this public team.

        Your account was recently created. Publishing will be available soon, allowing you to share notes on your public page and in search results.

        Your team account was recently created. Publishing will be available soon, allowing you to share notes on your public page and in search results.

        Explore these features while you wait
        Complete general settings
        Bookmark and like published notes
        Write a few more notes
        Complete general settings
        Write a few more notes
        See published notes
        Unpublish note
        Please check the box to agree to the Community Guidelines.
        View profile
      • Commenting
        Permission
        Disabled Forbidden Owners Signed-in users Everyone
      • Enable
      • Permission
        • Forbidden
        • Owners
        • Signed-in users
        • Everyone
      • Suggest edit
        Permission
        Disabled Forbidden Owners Signed-in users Everyone
      • Enable
      • Permission
        • Forbidden
        • Owners
        • Signed-in users
      • Emoji Reply
      • Enable
      • Versions and GitHub Sync
      • Note settings
      • Note Insights New
      • Engagement control
      • Make a copy
      • Transfer ownership
      • Delete this note
      • Save as template
      • Insert from template
      • Import from
        • Dropbox
        • Google Drive
        • Gist
        • Clipboard
      • Export to
        • Dropbox
        • Google Drive
        • Gist
      • Download
        • Markdown
        • HTML
        • Raw HTML
    Menu Note settings Note Insights Versions and GitHub Sync Sharing URL Create Help
    Create Create new note Create a note from template
    Menu
    Options
    Engagement control Make a copy Transfer ownership Delete this note
    Import from
    Dropbox Google Drive Gist Clipboard
    Export to
    Dropbox Google Drive Gist
    Download
    Markdown HTML Raw HTML
    Back
    Sharing URL Link copied
    /edit
    View mode
    • Edit mode
    • View mode
    • Book mode
    • Slide mode
    Edit mode View mode Book mode Slide mode
    Customize slides
    Note Permission
    Read
    Only me
    • Only me
    • Signed-in users
    • Everyone
    Only me Signed-in users Everyone
    Write
    Only me
    • Only me
    • Signed-in users
    • Everyone
    Only me Signed-in users Everyone
    Engagement control Commenting, Suggest edit, Emoji Reply
  • Invite by email
    Invitee

    This note has no invitees

  • Publish Note

    Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note No publishing access yet

    Your note will be visible on your profile and discoverable by anyone.
    Your note is now live.
    This note is visible on your profile and discoverable online.
    Everyone on the web can find and read all notes of this public team.

    Your account was recently created. Publishing will be available soon, allowing you to share notes on your public page and in search results.

    Your team account was recently created. Publishing will be available soon, allowing you to share notes on your public page and in search results.

    Explore these features while you wait
    Complete general settings
    Bookmark and like published notes
    Write a few more notes
    Complete general settings
    Write a few more notes
    See published notes
    Unpublish note
    Please check the box to agree to the Community Guidelines.
    View profile
    Engagement control
    Commenting
    Permission
    Disabled Forbidden Owners Signed-in users Everyone
    Enable
    Permission
    • Forbidden
    • Owners
    • Signed-in users
    • Everyone
    Suggest edit
    Permission
    Disabled Forbidden Owners Signed-in users Everyone
    Enable
    Permission
    • Forbidden
    • Owners
    • Signed-in users
    Emoji Reply
    Enable
    Import from Dropbox Google Drive Gist Clipboard
       Owned this note    Owned this note      
    Published Linked with GitHub
    • Any changes
      Be notified of any changes
    • Mention me
      Be notified of mention me
    • Unsubscribe
    # Staging Interaction \*\***Crystal/yongshan chong**\*\* In the original stage production of Peter Pan, Tinker Bell was represented by a darting light created by a small handheld mirror off-stage, reflecting a little circle of light from a powerful lamp. Tinkerbell communicates her presence through this light to the other characters. See more info [here](https://en.wikipedia.org/wiki/Tinker_Bell). There is no actor that plays Tinkerbell--her existence in the play comes from the interactions that the other characters have with her. For lab this week, we draw on this and other inspirations from theatre to stage interactions with a device where the main mode of display/output for the interactive device you are designing is lighting. You will plot the interaction with a storyboard, and use your computer and a smartphone to experiment with what the interactions will look and feel like. _Make sure you read all the instructions and understand the whole of the laboratory activity before starting!_ ## Prep ### To start the semester, you will need: 1. Read about Git [here](https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F). 2. Set up your own Github "Lab Hub" repository to keep all you work in record by [following these instructions](https://github.com/FAR-Lab/Developing-and-Designing-Interactive-Devices/blob/2021Fall/readings/Submitting%20Labs.md). 3. Set up the README.md for your Hub repository (for instance, so that it has your name and points to your own Lab 1) and [learn how to](https://guides.github.com/features/mastering-markdown/) organize and post links to your submissions on your README.md so we can find them easily. ### For this lab, you will need: 1. Paper 2. Markers/ Pens 3. Scissors 4. Smart Phone -- The main required feature is that the phone needs to have a browser and display a webpage. 5. Computer -- We will use your computer to host a webpage which also features controls. 6. Found objects and materials -- You will have to costume your phone so that it looks like some other devices. These materials can include doll clothes, a paper lantern, a bottle, human clothes, a pillow case, etc. Be creative! ### Deliverables for this lab are: 1. 7 Storyboards 1. 3 Sketches/photos of costumed devices 1. Any reflections you have on the process 1. Video sketch of 3 prototyped interactions 1. Submit the items above in the lab1 folder of your class [Github page], either as links or uploaded files. Each group member should post their own copy of the work to their own Lab Hub, even if some of the work is the same from each person in the group. ### The Report This README.md page in your own repository should be edited to include the work you have done (the deliverables mentioned above). Following the format below, you can delete everything but the headers and the sections between the **stars**. Write the answers to the questions under the starred sentences. Include any material that explains what you did in this lab hub folder, and link it in your README.md for the lab. ## Lab Overview For this assignment, you are going to: A) [Plan](#part-a-plan) B) [Act out the interaction](#part-b-act-out-the-interaction) C) [Prototype the device](#part-c-prototype-the-device) D) [Wizard the device](#part-d-wizard-the-device) E) [Costume the device](#part-e-costume-the-device) F) [Record the interaction](#part-f-record) Labs are due on Mondays. Make sure this page is linked to on your main class hub page. ## Part A. Plan # Introducing the Pet Companion Device: Your Furry Friend's Perfect Pal Welcome to a groundbreaking addition for every household – the **Pet Companion Device**. Engineered to seamlessly fit into bustling city apartments or tranquil countryside abodes, this revolutionary device is always on standby, day or night. A loyal companion that remains by your pet's side, even when you're away. ![](https://hackmd.io/_uploads/B1ifz1iph.jpg) \*\***Describe your setting, players, activity and goals here.**\*\* ### Tailored for Every Member of the Family Catering to pet owners, children, and their cherished animal companions, this device offers an array of dynamic interactions. Picture your pet cat engrossed in playful engagement with the device, igniting its screen with a symphony of vibrant colors that mirror its every move: - When your cat emits a soft meow, witness the screen morph into a soothing Blue hue. - A gentle lick from your furry companion douses the screen in a playful Purple glow. - Inquisitive paws dancing across the device conjure a cheerful Purple and Black radiance. - Energetic punches and swats paint the screen in gleaming Black and White brilliance. - When your pet cat finds repose on the device, the screen softly transitions to a tranquil Green, reflecting its serene moment of rest. - As you draw near home, the screen emanates a warm Yellow, indicating your approach. - Should unfamiliar faces approach, the screen bathes the surroundings in a calming Red and angry aura. ### Bridging the Gap for Pet Owners For pet owners, the primary objective revolves around nurturing an unbreakable bond and soothing their pets' solitude. Through the Pet Companion Device, they seamlessly provide unending entertainment and companionship, alleviating their pets' loneliness and ensuring their well-being, regardless of their physical absence. ### A World of Interaction for Pets Conversely, the device opens up a world of interaction for pets, satisfying their innate curiosity and thirst for engagement. With playful barks, licks, taps, or swipes, pets set off captivating color changes and delightful sounds, bestowing a wellspring of amusement and a semblance of interaction – akin to spending quality time with their human caregivers. \*\***Include pictures of your storyboards here**\*\* ![](https://hackmd.io/_uploads/B14mz1jTn.jpg) ![](https://hackmd.io/_uploads/Bk2QM1jTh.jpg) ![](https://hackmd.io/_uploads/rJcDHko62.jpg) ![](https://hackmd.io/_uploads/H107Hyo62.jpg) ![](https://hackmd.io/_uploads/SkMrr1ian.jpg) ![](https://hackmd.io/_uploads/SJ9IH1o6h.jpg) \*\***Summarize feedback you got here.**\*\* ## Part B. Act out the Interaction Initially, we envisioned our device as a camera-like toy positioned atop the feeding machine, assuming it would effectively capture pet behavior. However, we came to recognize that this approach might limit the device's capabilities and hinder its ability to comprehensively gather the wide spectrum of information pets convey. This is especially crucial given that pets predominantly interact with the feeding machine when they're hungry. Our goal is to ensure our bot can gather a diverse array of data to truly grasp and cater to our lonely pets' needs. \*\***Are there new ideas that occur to you or your collaborators that come up from the acting?**\*\* During the implementation phase, a novel concept emerged in response to emergency scenarios, such as break-ins, fires, or floods. We considered the possibility of the device seamlessly transitioning between red and white colors while emitting a warning noise, effectively alerting both occupants and pets within the household to potential dangers. This innovative addition would significantly enhance the device's utility, expanding its role from a pet companion to a vital safety feature in the home. ## Part C. Prototype the device \*\***Give us feedback on Tinkerbelle.**\*\* There were some issue connecting the device with a public wifi. But was definitly a great tool, we were also able to utilize the sound input box function. Thank you for designing this!!! ## Part D. Wizard the device \*\***Include your first attempts at recording the set-up video here.**\*\* https://youtube.com/shorts/9iTrWCWAa60?si=6_9f6S8R_mHE0Dvx Now, hange the goal within the same setting, and update the interaction with the paper prototype. \*\***Show the follow-up work here.**\*\* ## Part E. Costume the device \*\***Include sketches of what your devices might look like here.**\*\* Minimalist design: For a device that seamlessly blends into modern interiors, envision a sleek, compact form resembling a polished stone. Its smooth, rounded edges and matte finish would not only be visually appealing but also practical, preventing overheating concerns. ![](https://hackmd.io/_uploads/B192-kjp2.jpg) Sporty Design: resembles a resilient rubber ball. This design would be resilient to accidental drops and impacts, and it could incorporate a water-resistant seal to safeguard against potential spills. ![](https://hackmd.io/_uploads/SJS_Q1jTh.jpg) Pet-Friendly Companion Buddy Design: we craft the device to resemble a small, plush animal friend, akin to a soft toy. The exterior could be covered in a gentle, pet-friendly fabric that's comfortable to touch and cuddle. Incorporate embroidered features like eyes, a nose, and a smiling mouth to give the device a friendly expression. The overall size should be compact and lightweight for easy handling by your pet. ![](https://hackmd.io/_uploads/B1oRkJs62.jpg) \*\***What concerns or opportunitities are influencing the way you've designed the device to look?**\*\* Circular Form: The circular shape not only carries a symbolism of continuity and balance but also aligns with our safety considerations. By avoiding sharp corners, we're actively mitigating potential risks associated with accidental collisions involving pets or children. This approach serves to create a safe and understated presence in your home. Materials: To adhere to the safety guidelines around pets and kids, we'll carefully select materials that are both pet-friendly and child-safe. We'll prioritize non-toxic options that are also durable and easy to clean, given the device's proximity to these important members of your household. Thoughtful Interactions: We'll discreetly design touch-sensitive areas on the device's surface. These areas will respond to interactions from pets and children, triggering delicate reactions such as subtle vibrations or faint chimes. This approach fosters curiosity and engagement without causing any discomfort. In this design, our focus is on seamlessly incorporating the circular shape and employing unobtrusive design elements. ## Part F. Record \*\***Take a video of your prototyped interaction.**\*\* https://youtube.com/shorts/9iTrWCWAa60?si=6_9f6S8R_mHE0Dvx \*\***Please indicate anyone you collaborated with on this Lab.**\*\* We were inspired by the # Staging Interaction, Part 2 This describes the second week's work for this lab activity. ## Prep (to be done before Lab on Wednesday) You will be assigned three partners from another group. Go to their github pages, view their videos, and provide them with reactions, suggestions & feedback: explain to them what you saw happening in their video. Guess the scene and the goals of the character. Ask them about anything that wasn’t clear. \*\***Summarize feedback from your partners here.**\*\* ## Make it your own Do last week’s assignment again, but this time: 1) It doesn’t have to (just) use light, 2) You can use any modality (e.g., vibration, sound) to prototype the behaviors! Again, be creative! Feel free to fork and modify the tinkerbell code! 3) We will be grading with an emphasis on creativity. \*\***Document everything here. (Particularly, we would like to see the storyboard and video, although photos of the prototype are also great.)**\*\* Assisted by GPT for wording and grammar refinement.

    Import from clipboard

    Paste your markdown or webpage here...

    Advanced permission required

    Your current role can only read. Ask the system administrator to acquire write and comment permission.

    This team is disabled

    Sorry, this team is disabled. You can't edit this note.

    This note is locked

    Sorry, only owner can edit this note.

    Reach the limit

    Sorry, you've reached the max length this note can be.
    Please reduce the content or divide it to more notes, thank you!

    Import from Gist

    Import from Snippet

    or

    Export to Snippet

    Are you sure?

    Do you really want to delete this note?
    All users will lose their connection.

    Create a note from template

    Create a note from template

    Oops...
    This template has been removed or transferred.
    Upgrade
    All
    • All
    • Team
    No template.

    Create a template

    Upgrade

    Delete template

    Do you really want to delete this template?
    Turn this template into a regular note and keep its content, versions, and comments.

    This page need refresh

    You have an incompatible client version.
    Refresh to update.
    New version available!
    See releases notes here
    Refresh to enjoy new features.
    Your user state has changed.
    Refresh to load new user state.

    Sign in

    Forgot password
    or
    Sign in via Google Sign in via Facebook Sign in via X(Twitter) Sign in via GitHub Sign in via Dropbox Sign in with Wallet
    Wallet ( )
    Connect another wallet

    New to HackMD? Sign up

    By signing in, you agree to our terms of service.

    Help

    • English
    • 中文
    • Français
    • Deutsch
    • 日本語
    • Español
    • Català
    • Ελληνικά
    • Português
    • italiano
    • Türkçe
    • Русский
    • Nederlands
    • hrvatski jezik
    • język polski
    • Українська
    • हिन्दी
    • svenska
    • Esperanto
    • dansk

    Documents

    Help & Tutorial

    How to use Book mode

    Slide Example

    API Docs

    Edit in VSCode

    Install browser extension

    Contacts

    Feedback

    Discord

    Send us email

    Resources

    Releases

    Pricing

    Blog

    Policy

    Terms

    Privacy

    Cheatsheet

    Syntax Example Reference
    # Header Header 基本排版
    - Unordered List
    • Unordered List
    1. Ordered List
    1. Ordered List
    - [ ] Todo List
    • Todo List
    > Blockquote
    Blockquote
    **Bold font** Bold font
    *Italics font* Italics font
    ~~Strikethrough~~ Strikethrough
    19^th^ 19th
    H~2~O H2O
    ++Inserted text++ Inserted text
    ==Marked text== Marked text
    [link text](https:// "title") Link
    ![image alt](https:// "title") Image
    `Code` Code 在筆記中貼入程式碼
    ```javascript
    var i = 0;
    ```
    var i = 0;
    :smile: :smile: Emoji list
    {%youtube youtube_id %} Externals
    $L^aT_eX$ LaTeX
    :::info
    This is a alert area.
    :::

    This is a alert area.

    Versions and GitHub Sync
    Get Full History Access

    • Edit version name
    • Delete

    revision author avatar     named on  

    More Less

    Note content is identical to the latest version.
    Compare
      Choose a version
      No search result
      Version not found
    Sign in to link this note to GitHub
    Learn more
    This note is not linked with GitHub
     

    Feedback

    Submission failed, please try again

    Thanks for your support.

    On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

    Please give us some advice and help us improve HackMD.

     

    Thanks for your feedback

    Remove version name

    Do you want to remove this version name and description?

    Transfer ownership

    Transfer to
      Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

        Link with GitHub

        Please authorize HackMD on GitHub
        • Please sign in to GitHub and install the HackMD app on your GitHub repo.
        • HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.
        Learn more  Sign in to GitHub

        Push the note to GitHub Push to GitHub Pull a file from GitHub

          Authorize again
         

        Choose which file to push to

        Select repo
        Refresh Authorize more repos
        Select branch
        Select file
        Select branch
        Choose version(s) to push
        • Save a new version and push
        • Choose from existing versions
        Include title and tags
        Available push count

        Pull from GitHub

         
        File from GitHub
        File from HackMD

        GitHub Link Settings

        File linked

        Linked by
        File path
        Last synced branch
        Available push count

        Danger Zone

        Unlink
        You will no longer receive notification when GitHub file changes after unlink.

        Syncing

        Push failed

        Push successfully