SlideShare a Scribd company logo
1 of 29
HOW TO UNITE
ART WITH JAVA,
JS AND GRAPHS
The story behind Estonian
Republic 100 anniversary
theatrical performance
EV 100
CONCEPTION
• 22 theatres
• Own interpretation of Estonian History
• Russian Theatre got the topic about the
future
• Hundreds of children described their
vision of future
TENDENCIES
• Some possible future scenarios
• IT, Multicultural, Ecological, Cosmical
etc.
• Future is not predefined
• It depends on the choices we make
NON-LINEAR PLOT
• Potential future scenarios were divided
into short stories
• United by the story of the main
characters
• Events take place in the year 2118
• Characters fall into the different versions
of the future Estonia
YES, THIS IS A
MOCKUP
• The idea for the stage set is a
construction toy
• Can take any shape and function in the
hands of children
• It’s also shaped like a graph
ALL THAT
COMPLEXITY
REQUIRED A GRAPH
• Utopia often leads to dystopia
• The road to Hell is paved with good
intentions
• We have a lot of storylines
• It’s very important not to repeat the
scenes that were already chosen and
played
HOW IT LOOKS LIKE
48 possible ways to the final
A LOT OF
CHALLENGES
• Stage lighting
• Complex controllers systems that drive
hundreds of LEDs
• Costumes for each version of the future
• Voting system driving the storyline, built
upon a graph model
ENTERING THE
PERFORMANCE
We are in the
multicultural line
of the story
All languages
and genders are
mixed together
Everything is
accepted
NEWS BLOCK
https://youtu.be/cqnvd7KJalo
MULTICULTURAL
UTOPIA
• In the multicultural future everything is
fun
• Semenovs have a family night
• Their daughter brings her boyfriend to
meet the parents. He wears arabic
clothes and a ballet tutu
MULTICULTURAL
UTOPIA
• Afterwards, everybody go to a party
• At the end of the scene, audience voting
is opened
• Will the future of Estonia be like this?
• And if the audience says yes ...
MULTICULTURAL
DYSTOPIA
• Utopia becomes dystopia
• All the freedoms are limited
• New restrictions are intoduced
MULTICULTURAL
DYSTOPIA
• Special forces close the party
• They sort people
• Part of them are welcomed
• Another part take their party clothes off
• Their destiny is decided by an execution
machine
ABOUT THE
TECHNICAL
SOLUTION
• The system should collect votes, show ongoing
results and make decisions based on the final result
• The system should select storylines depending on
voting results, open new votes or switch storyline
• The system should communicate with the public
using natural language
• The system should have an option to be controlled by
the assistant director behind the scene and should
display full statistics about ongoing states and votes
• The system is called EMA (“mother” in Estonian) and
essentially is another actor
MOBILE CLIENT
• 600 people should be able to vote within a minute
• People should be able to vote from their phones
• Nobody is going to download an app
• Web application
• Two languages supported
ADMIN
APPLICATION
• Controlling the system
• Start/Stop
• Activating voting rounds
• Monitoring ongoing voting status
SUPERCURTAIN
PART
• Coordinating interaction of EMA with the
audience
• Displays information related to voting
• Opens/Closes voting
• Signals switching states
• Dynamic audio
SUMMARY
We have a
complex
graph
Voting
system
3 Frontend
systems
LET’S START WITH
A GRAPH
• Data need to be stored somewhere
• Relational Databases won’t fit
• The obvious technology choice was
Neo4j
• We modelled the scenarios as a graph
on Neo4j
• Neo4j gives us flexibility and absence of
a fixed schema
SERVER PART
• Python vs Java?
• Java was chosen
• Spring Boot
• Integration with Neo4j
• Speed
• Hard to break
OVERALL
ARCHITECTURE
• Neo4j
• Spring Boot
• VueJS
• Why?
NON-TRIVIAL PART OF THE TASK
• Two control centers
• Dynamic audio
• EMA should talk with the audience
• Duration of each audio file is different
• Synchronization is important
TWO
CONTROL
CENTERS
Server – stores the state,
provides statistics, handles
user registration, collectes
votes, makes sure that
each person can give only
one vote
<<Super>> - turns voting
on and off, shows the
ongongin progress and
results, switches states
SUPER CURTAIN
EMA PART
• Implemented in VueJS
• 110 pieces of audio
• Audio playback and command calls are
chained on top of each other
• We did not depend on the fact that
audio files are of various lengths
• Universal solution
ISSUES WITH MOBILE
CLIENT
• Tons of phone models
• OS versions
• Browser types and options
• VueJS created problems
• Was rewritten on VanillaJS
WORK IN
PROGRESS
https://youtu.be/fnQ2yKJOTdI
PIECE OF LIVE
DEMO
https://youtu.be/VCKhhiwBJps
FINAL RELEASE
• 146 mb JAR file
• More than 5000 lines of code
• Some funny stories during the first
performances
• President attended the premiere

More Related Content

Recently uploaded

Recently uploaded (20)

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 

Featured

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 

The Story Behind Creating an Interactive Theatre Production for the EV100 Celebrations

  • 1. HOW TO UNITE ART WITH JAVA, JS AND GRAPHS The story behind Estonian Republic 100 anniversary theatrical performance
  • 2. EV 100 CONCEPTION • 22 theatres • Own interpretation of Estonian History • Russian Theatre got the topic about the future • Hundreds of children described their vision of future
  • 3. TENDENCIES • Some possible future scenarios • IT, Multicultural, Ecological, Cosmical etc. • Future is not predefined • It depends on the choices we make
  • 4. NON-LINEAR PLOT • Potential future scenarios were divided into short stories • United by the story of the main characters • Events take place in the year 2118 • Characters fall into the different versions of the future Estonia
  • 5. YES, THIS IS A MOCKUP • The idea for the stage set is a construction toy • Can take any shape and function in the hands of children • It’s also shaped like a graph
  • 6. ALL THAT COMPLEXITY REQUIRED A GRAPH • Utopia often leads to dystopia • The road to Hell is paved with good intentions • We have a lot of storylines • It’s very important not to repeat the scenes that were already chosen and played
  • 7. HOW IT LOOKS LIKE 48 possible ways to the final
  • 8. A LOT OF CHALLENGES • Stage lighting • Complex controllers systems that drive hundreds of LEDs • Costumes for each version of the future • Voting system driving the storyline, built upon a graph model
  • 9. ENTERING THE PERFORMANCE We are in the multicultural line of the story All languages and genders are mixed together Everything is accepted
  • 11. MULTICULTURAL UTOPIA • In the multicultural future everything is fun • Semenovs have a family night • Their daughter brings her boyfriend to meet the parents. He wears arabic clothes and a ballet tutu
  • 12. MULTICULTURAL UTOPIA • Afterwards, everybody go to a party • At the end of the scene, audience voting is opened • Will the future of Estonia be like this? • And if the audience says yes ...
  • 13. MULTICULTURAL DYSTOPIA • Utopia becomes dystopia • All the freedoms are limited • New restrictions are intoduced
  • 14. MULTICULTURAL DYSTOPIA • Special forces close the party • They sort people • Part of them are welcomed • Another part take their party clothes off • Their destiny is decided by an execution machine
  • 15. ABOUT THE TECHNICAL SOLUTION • The system should collect votes, show ongoing results and make decisions based on the final result • The system should select storylines depending on voting results, open new votes or switch storyline • The system should communicate with the public using natural language • The system should have an option to be controlled by the assistant director behind the scene and should display full statistics about ongoing states and votes • The system is called EMA (“mother” in Estonian) and essentially is another actor
  • 16. MOBILE CLIENT • 600 people should be able to vote within a minute • People should be able to vote from their phones • Nobody is going to download an app • Web application • Two languages supported
  • 17. ADMIN APPLICATION • Controlling the system • Start/Stop • Activating voting rounds • Monitoring ongoing voting status
  • 18. SUPERCURTAIN PART • Coordinating interaction of EMA with the audience • Displays information related to voting • Opens/Closes voting • Signals switching states • Dynamic audio
  • 20. LET’S START WITH A GRAPH • Data need to be stored somewhere • Relational Databases won’t fit • The obvious technology choice was Neo4j • We modelled the scenarios as a graph on Neo4j • Neo4j gives us flexibility and absence of a fixed schema
  • 21. SERVER PART • Python vs Java? • Java was chosen • Spring Boot • Integration with Neo4j • Speed • Hard to break
  • 22. OVERALL ARCHITECTURE • Neo4j • Spring Boot • VueJS • Why?
  • 23. NON-TRIVIAL PART OF THE TASK • Two control centers • Dynamic audio • EMA should talk with the audience • Duration of each audio file is different • Synchronization is important
  • 24. TWO CONTROL CENTERS Server – stores the state, provides statistics, handles user registration, collectes votes, makes sure that each person can give only one vote <<Super>> - turns voting on and off, shows the ongongin progress and results, switches states
  • 25. SUPER CURTAIN EMA PART • Implemented in VueJS • 110 pieces of audio • Audio playback and command calls are chained on top of each other • We did not depend on the fact that audio files are of various lengths • Universal solution
  • 26. ISSUES WITH MOBILE CLIENT • Tons of phone models • OS versions • Browser types and options • VueJS created problems • Was rewritten on VanillaJS
  • 29. FINAL RELEASE • 146 mb JAR file • More than 5000 lines of code • Some funny stories during the first performances • President attended the premiere