{"id":698,"date":"2025-08-24T23:44:05","date_gmt":"2025-08-25T03:44:05","guid":{"rendered":"https:\/\/tabeertariq.com\/?page_id=698"},"modified":"2025-08-25T22:12:06","modified_gmt":"2025-08-26T02:12:06","slug":"coverscape","status":"publish","type":"page","link":"https:\/\/tabeertariq.com\/?page_id=698","title":{"rendered":"Coverscape"},"content":{"rendered":"\n
<\/div>\n\n\n\n
\n

Turning conversation tone into living visuals;<\/p>\n\n\n\n

See how it felt, not just how long it was.<\/p>\n<\/blockquote>\n\n\n\n

<\/div>\n\n\n\n

Abstract<\/h2>\n\n\n\n
\n

Research has uncovered the importance of hearing in how we understand each other’s emotions. Properties of sound such as frequency, pitch, volume, duration, and vocal bursts all help us understand how other people feel.<\/p>\n<\/blockquote>\n\n\n\n

\n
<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n

Narrative:<\/h2>\n\n\n\n
\n

ConverScape is a Ul platform that attempts to visualize the emotions and relationship between two people. We hope that by translating something as complex as conversation and emotion into a visual, there will be less miscommunications, people can fondly reflect on past interactions with family and friends, and potentially difficult conversations can become less daunting. Hence, you have a visual takeaways of your online conversation, one that adds to itself as your relationship continues, giving you a record of your talking time together.<\/p>\n<\/blockquote>\n\n\n\n

\n
\n
<\/div>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

We used Grasshopper to create a system that takes in the human voice and curates a visual representation based on the volume and the pitch of the voice.<\/p>\n<\/blockquote>\n\n\n\n

<\/blockquote>\n<\/div>\n<\/div>\n\n\n\n
\n

We used Grasshopper to create a system that takes in the human voice and curates a visual representation based on the volume and the pitch of the voice.<\/p>\n<\/blockquote>\n\n\n\n

\n

Design rule: runs passively during a call; review after; you own the data toggle.<\/p>\n<\/blockquote>\n\n\n\n

\n
\n

Matrix<\/em><\/h2>\n\n\n\n
    \n
  1. Input is a live mic feed from a sound sensor in Grasshopper.<\/li>\n\n\n\n
  2. We only keep derived signals: loudness, pitch, and noticeable bursts.<\/li>\n\n\n\n
  3. Simple mapping: volume lifts the mesh, pitch tightens or loosens it, bursts nudge it.<\/li>\n\n\n\n
  4. Kangaroo keeps the mesh stable with basic damping so it doesn\u2019t explode.<\/li>\n\n\n\n
  5. Artifacts must read clearly on dark backgrounds and work at contact-card size.<\/li>\n\n\n\n
  6. Privacy is user-controlled; raw audio isn\u2019t stored.<\/li>\n<\/ol>\n<\/div>\n\n\n\n
    \n

    Features<\/em><\/h2>\n\n\n\n
      \n
    1. Real-time, audio-reactive mesh driven by Kangaroo2 which changes color and line weight.<\/li>\n\n\n\n
    2. After each call, a clean snapshot plus basic stats: average pitch, average loudness, burst count, call length.<\/li>\n\n\n\n
    3. A growing gallery per contact so relationships build over time.<\/li>\n\n\n\n
    4. Simple sensitivity slider to suit different voices.<\/li>\n\n\n\n
    5. One-tap export of stills or short clips.<\/li>\n\n\n\n
    6. Works in a dark-mode iOS concept UI with quick drill-downs.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n
      \n

      Started with simple line traces, iterated into a restrained mesh with physics for clarity and stability. Each pass tightened the mapping so \u201cwhat you see\u201d cleanly matches \u201cwhat you heard.\u201d
      This flow reflects the incremental logic added over multiple iterations.<\/p>\n<\/blockquote>\n\n\n\n

      Iterative process<\/em>:<\/h2>\n\n\n\n
      <\/div>\n\n\n\n
      \n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n<\/div>\n\n\n\n
      <\/div>\n\n\n\n
      <\/blockquote>\n\n\n\n
      <\/blockquote>\n\n\n\n
      \n
      \n
      \n
      \n
      \n
      \n
      \"\"<\/figure>\n<\/div>\n\n\n\n
      <\/div>\n<\/div>\n\n\n\n
      <\/div>\n<\/div>\n\n\n\n
      <\/div>\n<\/div>\n\n\n\n
      \n
      \n
      \n
      \n
      \"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
      \n
      \n
      \n
      \"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
      <\/div>\n<\/div>\n\n\n\n
      <\/div>\n<\/div>\n\n\n\n

      Grasshopper Script<\/em><\/h2>\n\n\n\n
      \n

      How the script is built:<\/p>\n<\/blockquote>\n\n\n\n

      \n
        \n
      1. Capture<\/strong>\u00a0\u2013\u00a0Time Period<\/em>\u00a0+\u00a0Start\/Stop sound capture<\/em>\u00a0nodes stream mic data.<\/li>\n\n\n\n
      2. \u00a0Smoothed Average samples\/ Moving Avg<\/em>\u00a0to reduce spikes; short windows for responsiveness.<\/li>\n\n\n\n
      3. Feature extraction<\/strong>:<\/li>\n\n\n\n
      4. Loudness (peak)<\/strong><\/li>\n\n\n\n
      5. Pitch<\/strong> light peak<\/li>\n\n\n\n
      6. Normalize<\/strong>: map features to 0\u20131 using\u00a0Bounds<\/em>\u00a0\u2192\u00a0Remap<\/em>\u00a0(yellow panels show ranges).<\/li>\n\n\n\n
      7. Base mesh<\/strong>: build a grid with\u00a0Surface \u2192 Mesh<\/em>\u00a0(U\/V counts),\u00a0Weld<\/em>\u00a0+\u00a0Mesh Angle<\/em>\u00a0for clean edges.<\/li>\n\n\n\n
      8. Kangaroo setup<\/strong>: <\/li>\n\n\n\n
      9. Springs from lines<\/strong>: stiffness\/rest length respond to\u00a0pitch<\/strong>.<\/li>\n\n\n\n
      10. Unary Force<\/strong>: vertical impulse scaled by\u00a0loudness<\/strong>.<\/li>\n\n\n\n
      11. Anchors<\/strong>\u00a0at the frame to keep the form legible.<\/li>\n\n\n\n
      12. Solver (K2)<\/strong>\u00a0with damping + reset button for stability.<\/li>\n\n\n\n
      13. Color & thickness<\/strong>:\u00a0Gradient<\/em>\u00a0+\u00a0Remap<\/em>\u00a0tie\u00a0intensity<\/strong>\u00a0to color\/line weight; time sweeps hue for readability in thumbnails.<\/li>\n\n\n\n
      14. UI hooks<\/strong>: package the latest frame as the contact-card hero; store the clip + stats into the person\u2019s gallery.<\/li>\n<\/ol>\n<\/blockquote>\n\n\n\n
        \n
        <\/div>\n\n\n\n
        \n
        \n
        \n
        \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
        <\/div>\n<\/div>\n<\/div>\n\n\n\n
        \n
        \n

        Solution<\/h2>\n\n\n\n