Interlude

Interlude

Interlude

With Interlude, we explore the realm of interactive art, allowing users to make personalized visualizations using their voice.

With Interlude, we explore the realm of interactive art, allowing users to make personalized visualizations using their voice.

With Interlude, we explore the realm of interactive art, allowing users to make personalized visualizations using their voice.

HackGTX@GT2023

HackGTX@GT2023

Jump To

Final Demo . Problem . Motivation . Opportunities and Ideation . Prototyping Phase I . Prototyping Phase II . Prototyping Phase III . Prototyping Phase IV . Putting it all together . Poster . Challenges and Takeaways

MY ROLE


Creative Coding: I used p5.js to incorporate the speech input and map the volume and frequency to the color and thickness of the generated art to introduce emotion-based variance.


Design and Strategy: Through ideation, I helped find the value proposition for our idea - personalized postcards - by leveraging the Hackathon theme and the technical and design skills of the team.


Synthesis: I played a pivotal role in synthesizing the front-end and back-end code through Python to ensure real-time generation of postcards based on speech input.

PROJECT SCOPE

36 hour Design Sprint
12 - 19 Nov '23

Tulika Banerjee
Upasana B.
Ramyani Ghosh
Siwan Yang

TOOLS/SKILLS


p5.js, JavaScript, Python, NLP, matplotlib, google-speech-to-text-api, Figma

MY ROLE
Creative Coding: I used p5.js to incorporate the speech input and map the volume and frequency to the color and thickness of the generated art to introduce emotion-based variance.


Design and Strategy: Through ideation, I helped find the value proposition for our idea - personalized postcards - by leveraging the Hackathon theme and the technical and design skills of the team.


Synthesis: I played a pivotal role in synthesizing the front-end and back-end code through Python to ensure real-time generation of postcards based on speech input.

PROJECT SCOPE
48-hour Design Sprint
Nov '23

Tulika Banerjee
Upasana B
Ramyani Ghosh
Siwan Yang

TOOLS/SKILLS

p5.js, JavaScript, Python, NLP, matplotlib, google-speech-to-text-api, Figma

Jump To

Final Demo . Problem . Motivation . Opportunities and Ideation . Prototyping Phase I . Prototyping Phase II . Prototyping Phase III . Prototyping Phase IV . Putting it all together . Poster . Challenges and Takeaways

MY ROLE


Creative Coding: I used p5.js to incorporate the speech input and map the volume and frequency to the color and thickness of the generated art to introduce emotion-based variance.


Design and Strategy: Through ideation, I helped find the value proposition for our idea - personalized postcards - by leveraging the Hackathon theme and the technical and design skills of the team.


Synthesis: I played a pivotal role in synthesizing the front-end and back-end code through Python to ensure real-time generation of postcards based on speech input.


PROJECT SCOPE

36 hour Design Sprint
12 - 19 Nov '23

Tulika Banerjee
Upasana B.
Ramyani Ghosh
Siwan Yang

TOOLS/SKILLS


p5.js, JavaScript, Python, NLP, matplotlib, google-speech-to-text-api, Figma

Context


Context


The tenth installation of HackGT, a biannual Hackathon, was held at Georgia Tech in November 2023 in collaboration with Major League Hacking (MLH).


The theme was ‘a journal of memories.' and the track we chose was 'digital art'.

It was a 36-hour hackathon with teams of 4 with students participating from all over the country.

The tenth installation of HackGT, a biannual Hackathon, was held at Georgia Tech in November 2023 in collaboration with Major League Hacking (MLH).


The theme was ‘a journal of memories.' and the track we chose was 'digital art'.

It was a 36-hour hackathon with teams of 4 with students participating from all over the country.

Check out the Final Demo!

Check out the Final Demo!

Check out the Final Demo!

Problem


Problem


How do we leverage interactive, generative art in a meaningful way such that it isn't just a fleeting novelty i.e why should people care?


Motivation

Motivation

Interactive and generative art has a lot of potential given the novel and exciting nature of the technology. Given the Digital Art track of HackGT and our background as creative coders and designers, this was the perfect route to explore.


Interactive and generative art has a lot of potential given the novel and exciting nature of the technology. Given the Digital Art track of HackGT and our background as creative coders and designers, this was the perfect route to explore.


Opportunities and Ideation - How do we create value?

?


Opportunities and Ideation


Personalized

Personalized

What if we could personalize the artwork by allowing users to control its generation. Co-creation is considered more positively by audiences.

According to our survey, the top source for event info is friends! How do we leverage this to streamline event tracking?

Unique

Unique

What control can users have that is unique to each of them?
This led us to using speech and voice modality as the basis for generation.

Emotional Design

Emotional Design

Emotional Design

How do we introduce an emotional connection?
We decided to use sentiment analysis to analyze the users' speech in addition to the physical attributes of their voice to allow for their underlying emotions to shine through.

Real-time

Real-time

Real-time

Patience is a rare commodity and in today's world, keeping a user's attention can be tricky. Thus, we wanted the final product to be processed in real-time to have a takeaway ready for users by the end of the experience.

The result of extensive brainstorming was the next gen of
PERSONALIZED POSTCARDS.

Using voice input to let users generate unique, personalized artwork to be paired with a word cloud derived using sentiment analysis of their speech and producing a personalized postcard in real time.

Prototyping Phase I
Art generation using p5.js

Prototyping Phase I
Art generation using p5.js

Prototyping Phase I
Art generation using p5.js

We used the p5.js library to generate these visuals

We used the p5.js library to generate these visuals

Increasing complexity of generated designs

Increasing complexity of generated designs

Prototyping Phase II
Mapping sound to art

Prototyping Phase II
Mapping sound to art

Prototyping Phase II
Mapping sound to art

STROKE WIDTH
For a personalized touch, the amplitude of the input sound (user's voice) was mapped to stroke width.
The louder the voice., the thicker the stroke and vice versa.

THRESHOLD
To avoid background noise impacting the art piece, a decibel threshold was set. If the input was less than the threshold, the art would stop generating.
This feature could also be utilized by users to add selective emphasis.

Prototyping Phase III
Sentiment analysis

Prototyping Phase III
Sentiment analysis

Prototyping Phase III
Sentiment analysis

Using nltk, Python and Google's speech-to-text-api to run sentiment analysis on the speech input, we were able to generate word clouds in real-time that captured the user's sentiment.

Word cloud generation

Color and Emotion

Positive

Neutral

Negative

Prototyping Phase IV
Postcard Design

Prototyping Phase IV
Postcard Design

Prototyping Phase IV
Postcard Design

The design was inspired by common postcards.
The front had the generated art and the back was divided into the word cloud on the left and a space for a written note on the right.

Prompt-based design

Prompt-based design

We decided to add three broad prompts to help users start talking / relaying a message for the word cloud generation.

The three prompts and the associated postcard messages were:

1) Recount a memory

"Remember when…"


2) Sing a song

"A song for you..."


3) Message to a loved one

"Psst did you know…"

Putting it all together

Putting it all together

The postcards were generated dynamically by replacing the generated art and word clouds after each run of the code.

Challenges & Takeaways

Challenges & Takeaways

'What's in it for me?' - Creating value

Not all that is novel is useful. While fun, aesthetic designs have inherent value, prolonging it is achieved by connecting with people's emotions and psychologies. In the making of Interlude, I learnt how to leverage market gaps, user psychologies and emotional design to create value in novel technology.

'What's in it for me?' - Creating value

Not all that is novel is useful. While fun, aesthetic designs have inherent value, prolonging it is achieved by connecting with people's emotions and psychologies. In the making of Interlude, I learnt how to leverage market gaps, user psychologies and emotional design to create value in novel technology.

Managing constraints

In many ways a Hackathon closely parallels design sprints, a big tech favorite. This was good hands-on experience for working in a fast-paced environment with limited resources (time, physical space, personnel) and delivering a minimum viable product (MVP) by a prescribed deadline.

Managing constraints

In many ways a Hackathon closely parallels design sprints, a big tech favorite. This was good hands-on experience for working in a fast-paced environment with limited resources (time, physical space, personnel) and delivering a minimum viable product (MVP) by a prescribed deadline.

©2024 Tulika Banerjee

©2024 Tulika Banerjee

©2024 Tulika Banerjee