SlideShare a Scribd company logo
1 of 21
Download to read offline
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
D’ IMATGE I GRÀFICS!
TECNOLOGIES!
http://gilab.udg.edu
E-cecilia:
implementation
of a music game
R. García1,5, I. Barbancho2, L. Tardón2,
J. Arambarri3, M. Magdics1,4, M. Sbert1
1University of Girona
2University of Malaga
3Virtualware
4Budapest University of Technology and Economics
5iMinds / University of Hasselt
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
•  Introduction
•  Game description
•  Architecture, client-server model
•  Server
•  Music composition & analysis
•  Client
•  Graphics, non-photorealistic rendering
•  Natural interaction
•  Immersive devices
Contents	
  
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Introduc-on	
  
•  Learning to sing requires long practising hours
•  The early stages use very simple songs → boring
•  Good singers start very young, so they tire more easily
•  Solution: Make the practising into a game
•  Related work:
•  SingStar: full songs, too complex for starting
young children
•  Other games:
•  focused on keyboard / mouse interaction
•  don't do audio analysis
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
•  Serious game to practice singing and rhythm
•  The user is presented with a small village to explore
•  The houses are small, and can be enhanced by the user:
•  After clicking a house, a song is presented
•  The user sings to the best of his abilities
•  The house evolves in response to the user singing
•  The user can continue exploration and singing until he
has practiced enough.
Game	
  descrip-on	
  
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Gameplay	
  video	
  
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
System	
  architecture	
  
•  Three main components:
•  Game client (Unity)
•  Assets (on a web server)
•  Recommendation and Evaluation server
•  Audio and rhythm evaluation (matlab)
•  Recommendation system (C++ library)
•  Interconnection:
•  TCP sockets (game-server)
•  HTML (game-webserver)
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Game	
  client	
  
•  Object oriented, asynchronous architecture using the Unity
game engine. Object behaviour uses C# scripts.
•  The main objects are:
•  World Creation (terrain, house creation and evolution)
•  World View: Camera, NPR effects, Dome transforms,
GUI
•  World control: Kinect, mouse interaction
•  Asset downloading, communication with web server.
•  Microphone: song recording
•  ServerConnect: Communication with the server,
evolving the GameState
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Music	
  server	
  
•  The game server is responsible for the automatic generation
of musical excercises (songs) and the assessment of the user
performance
Server
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Music	
  synthesis	
  
•  A set of training songs is used and analyzed
•  Created songs replicate the selected style and complexity of
that of the corresponding exemplars
Training Generation
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Music	
  assessment	
  
•  Tempo, rythm and melody is compared against
the reference
•  Works with inexpensive microphones too
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Graphics,	
  Non-­‐photorealis-c	
  Rendering	
  (NPR)	
  
•  Post processing stylization
–  State-of-the-art image processing (on the color and depth)
•  Flexible, a wide range of effects
•  Commercial Unity package under finalization
Original rendering
(“Photo-realistic”)
Color Comic:
Image simplification + edges
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
NPR:	
  edge	
  effects	
  
Intensity + depth-normal edges Colored painting:
edge color is driven by the
(original) rendered color
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
•  Replacement of the shadowed pixels by another color
NPR:	
  Shadow	
  effects	
  
Complementary shadows:
Shadow color is the complementary color
of the shadowed surface
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
•  Increasing the level of abstraction by depth
NPR:	
  depth	
  sensa-on	
  
Depth-based desaturation Depth-based simplification:
Texture details are removed
in the background
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
NPR	
  demo	
  
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
•  Augmented reality: mobile device, augment camera
image with controls (e.g. buttons)
•  Kinect: exergame (imitating real movements, like
walking or turning) or control by hand movements
Natural	
  interac-on	
  
AR button Exergame: walk
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
•  Different projection/camera settings
–  E.g. stereo: 2 cameras, dome: 360º projection with
cube-map
Stereo, top-bottom Stereo, side-by-side
Immersive	
  visualiza-on	
  
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Immersive	
  visualiza-on	
  
Spherical dome
source: immersivedisplay.co.uk
Immersapod
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Immersive	
  visualiza-on	
  
•  NPR+immersive: NPR on the final image
–  Regular 2D image processing
•  No added computational complexity for using immersive
displays w.r.t. NPR
Dome+color comic Immersive+B&W comic
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Conclusions	
  
•  Music teaching game
•  State-of-the-art automatic music synthesis and
singing assessment
•  Controllable graphics style (NPR) as post-
processing
•  Support for natural interaction, immersive
visualization
D’ IMATGE I
GRÀFICS!
TECNOLOGIE
S!
Thank you!
Questions?
D’ IMATGE I GRÀFICS!
TECNOLOGIES!

More Related Content

What's hot

Resume coralie gibergues-eng-07-2016
Resume coralie gibergues-eng-07-2016Resume coralie gibergues-eng-07-2016
Resume coralie gibergues-eng-07-2016Coralie Gibergues
 
EverybodyDJ App Presentation
EverybodyDJ App PresentationEverybodyDJ App Presentation
EverybodyDJ App PresentationJon Koss
 
Тарас Терлецький "Як організувати роботу з вашим дизайнером по звуку" GameDe...
Тарас Терлецький "Як організувати роботу з вашим дизайнером по звуку"  GameDe...Тарас Терлецький "Як організувати роботу з вашим дизайнером по звуку"  GameDe...
Тарас Терлецький "Як організувати роботу з вашим дизайнером по звуку" GameDe...Lviv Startup Club
 
Compositional Techniques of Chiptune Music
Compositional Techniques of Chiptune MusicCompositional Techniques of Chiptune Music
Compositional Techniques of Chiptune MusicChristopher Hopkins
 
Immersion into Fantasy: Compositional Techniques of Video Game Music from the...
Immersion into Fantasy: Compositional Techniques of Video Game Music from the...Immersion into Fantasy: Compositional Techniques of Video Game Music from the...
Immersion into Fantasy: Compositional Techniques of Video Game Music from the...Christopher Hopkins
 
Role of a sound designer
Role of a sound designerRole of a sound designer
Role of a sound designerLeahButterworth
 
Digital Audio Workstations - Lesson 1 Assignment
Digital Audio Workstations - Lesson 1 AssignmentDigital Audio Workstations - Lesson 1 Assignment
Digital Audio Workstations - Lesson 1 AssignmentArtur Shamsutdinov
 
The Creative Process Behind Dialogismos I: Theoretical and Technical Consider...
The Creative Process Behind Dialogismos I: Theoretical and Technical Consider...The Creative Process Behind Dialogismos I: Theoretical and Technical Consider...
The Creative Process Behind Dialogismos I: Theoretical and Technical Consider...Gilberto Bernardes
 
Sylvia’s science fair experiments
Sylvia’s science fair experimentsSylvia’s science fair experiments
Sylvia’s science fair experimentsschsy02
 

What's hot (17)

Resume coralie gibergues-eng-07-2016
Resume coralie gibergues-eng-07-2016Resume coralie gibergues-eng-07-2016
Resume coralie gibergues-eng-07-2016
 
Video Games Development
Video Games DevelopmentVideo Games Development
Video Games Development
 
editing
editingediting
editing
 
Making of Steve the Robot H.E.Ai.D.
Making of Steve the Robot H.E.Ai.D.Making of Steve the Robot H.E.Ai.D.
Making of Steve the Robot H.E.Ai.D.
 
Last of us
Last of usLast of us
Last of us
 
Sound
SoundSound
Sound
 
EverybodyDJ App Presentation
EverybodyDJ App PresentationEverybodyDJ App Presentation
EverybodyDJ App Presentation
 
SOUNDS Like Fun and Games
SOUNDS Like Fun and GamesSOUNDS Like Fun and Games
SOUNDS Like Fun and Games
 
Тарас Терлецький "Як організувати роботу з вашим дизайнером по звуку" GameDe...
Тарас Терлецький "Як організувати роботу з вашим дизайнером по звуку"  GameDe...Тарас Терлецький "Як організувати роботу з вашим дизайнером по звуку"  GameDe...
Тарас Терлецький "Як організувати роботу з вашим дизайнером по звуку" GameDe...
 
Compositional Techniques of Chiptune Music
Compositional Techniques of Chiptune MusicCompositional Techniques of Chiptune Music
Compositional Techniques of Chiptune Music
 
Immersion into Fantasy: Compositional Techniques of Video Game Music from the...
Immersion into Fantasy: Compositional Techniques of Video Game Music from the...Immersion into Fantasy: Compositional Techniques of Video Game Music from the...
Immersion into Fantasy: Compositional Techniques of Video Game Music from the...
 
Role of a sound designer
Role of a sound designerRole of a sound designer
Role of a sound designer
 
Digital Audio Workstations - Lesson 1 Assignment
Digital Audio Workstations - Lesson 1 AssignmentDigital Audio Workstations - Lesson 1 Assignment
Digital Audio Workstations - Lesson 1 Assignment
 
UX homework4
UX homework4UX homework4
UX homework4
 
The Creative Process Behind Dialogismos I: Theoretical and Technical Consider...
The Creative Process Behind Dialogismos I: Theoretical and Technical Consider...The Creative Process Behind Dialogismos I: Theoretical and Technical Consider...
The Creative Process Behind Dialogismos I: Theoretical and Technical Consider...
 
Sylvia’s science fair experiments
Sylvia’s science fair experimentsSylvia’s science fair experiments
Sylvia’s science fair experiments
 
Electronic revision
Electronic revisionElectronic revision
Electronic revision
 

Viewers also liked

Sur fnet open-conext-apereo2014
Sur fnet open-conext-apereo2014Sur fnet open-conext-apereo2014
Sur fnet open-conext-apereo2014Niels van Dijk
 
Programme Emploi UPR
Programme Emploi UPRProgramme Emploi UPR
Programme Emploi UPRRihab Arbi
 
The fondation chirac signs a partnership agreement with the ministry of forei...
The fondation chirac signs a partnership agreement with the ministry of forei...The fondation chirac signs a partnership agreement with the ministry of forei...
The fondation chirac signs a partnership agreement with the ministry of forei...Fondation Chirac
 
AATM 2012 - Properties PPT
AATM 2012 - Properties PPTAATM 2012 - Properties PPT
AATM 2012 - Properties PPTKP Mathematics
 

Viewers also liked (6)

Sur fnet open-conext-apereo2014
Sur fnet open-conext-apereo2014Sur fnet open-conext-apereo2014
Sur fnet open-conext-apereo2014
 
Programme Emploi UPR
Programme Emploi UPRProgramme Emploi UPR
Programme Emploi UPR
 
The fondation chirac signs a partnership agreement with the ministry of forei...
The fondation chirac signs a partnership agreement with the ministry of forei...The fondation chirac signs a partnership agreement with the ministry of forei...
The fondation chirac signs a partnership agreement with the ministry of forei...
 
AATM 2012 - Properties PPT
AATM 2012 - Properties PPTAATM 2012 - Properties PPT
AATM 2012 - Properties PPT
 
Rfl dfn internetact2
Rfl dfn internetact2Rfl dfn internetact2
Rfl dfn internetact2
 
Gina
GinaGina
Gina
 

Similar to CoSECiVi'14 - E-Cecilia. Implementation of a music game

Lecture 1 Introduction to VR Programming
Lecture 1 Introduction to VR ProgrammingLecture 1 Introduction to VR Programming
Lecture 1 Introduction to VR ProgrammingKobkrit Viriyayudhakorn
 
ARTS 10 DIGITAL ART.pptx
ARTS 10 DIGITAL ART.pptxARTS 10 DIGITAL ART.pptx
ARTS 10 DIGITAL ART.pptxJayveeVillar2
 
Introduction to game development
Introduction to game developmentIntroduction to game development
Introduction to game developmentGaetano Bonofiglio
 
Finding the vital houses information using immersive multi-touch interface
Finding the vital houses information using immersive multi-touch interfaceFinding the vital houses information using immersive multi-touch interface
Finding the vital houses information using immersive multi-touch interfaceKai-Tzu Lu
 
The Use of Modern Controller Devices at Schools: Game-Based Learning with the...
The Use of Modern Controller Devices at Schools: Game-Based Learning with the...The Use of Modern Controller Devices at Schools: Game-Based Learning with the...
The Use of Modern Controller Devices at Schools: Game-Based Learning with the...Educational Technology
 
NoiseApp - Final presentation
NoiseApp - Final presentationNoiseApp - Final presentation
NoiseApp - Final presentationMarco Nigro
 
Making Audio Engineering Learning & Practice Accessible in Virtual Reality
Making Audio Engineering Learning & Practice Accessible in Virtual RealityMaking Audio Engineering Learning & Practice Accessible in Virtual Reality
Making Audio Engineering Learning & Practice Accessible in Virtual RealitySamuel Fisher
 
Kinect on Android Pandaboard
Kinect on Android PandaboardKinect on Android Pandaboard
Kinect on Android Pandaboardumituzun84
 
Dip unit-i-ppt academic year(2016-17)
Dip unit-i-ppt academic year(2016-17)Dip unit-i-ppt academic year(2016-17)
Dip unit-i-ppt academic year(2016-17)RagavanK6
 
How we did 60FPS in our 3D RTS mobile game
How we did 60FPS in our 3D RTS mobile gameHow we did 60FPS in our 3D RTS mobile game
How we did 60FPS in our 3D RTS mobile gameDaniel Sim
 
DIPsadasdasfsdfsdfdfasdfsdfsdgsdgdsfgdfgfdg
DIPsadasdasfsdfsdfdfasdfsdfsdgsdgdsfgdfgfdgDIPsadasdasfsdfsdfdfasdfsdfsdgsdgdsfgdfgfdg
DIPsadasdasfsdfsdfdfasdfsdfsdgsdgdsfgdfgfdgMrVMNair
 
project on snake game in c language
project on snake game in c languageproject on snake game in c language
project on snake game in c languageAshutosh Kumar
 
Chapter 9 animation
Chapter 9 animationChapter 9 animation
Chapter 9 animationshelly3160
 
From paper to screen: Putting maps on the web
From paper to screen:  Putting maps on the webFrom paper to screen:  Putting maps on the web
From paper to screen: Putting maps on the webPetr Pridal
 

Similar to CoSECiVi'14 - E-Cecilia. Implementation of a music game (20)

Lecture 1 Introduction to VR Programming
Lecture 1 Introduction to VR ProgrammingLecture 1 Introduction to VR Programming
Lecture 1 Introduction to VR Programming
 
ARTS 10 DIGITAL ART.pptx
ARTS 10 DIGITAL ART.pptxARTS 10 DIGITAL ART.pptx
ARTS 10 DIGITAL ART.pptx
 
Spie zuzor
Spie zuzorSpie zuzor
Spie zuzor
 
Sketching in Code
Sketching in CodeSketching in Code
Sketching in Code
 
Introduction to game development
Introduction to game developmentIntroduction to game development
Introduction to game development
 
Finding the vital houses information using immersive multi-touch interface
Finding the vital houses information using immersive multi-touch interfaceFinding the vital houses information using immersive multi-touch interface
Finding the vital houses information using immersive multi-touch interface
 
Multimedia
MultimediaMultimedia
Multimedia
 
The Use of Modern Controller Devices at Schools: Game-Based Learning with the...
The Use of Modern Controller Devices at Schools: Game-Based Learning with the...The Use of Modern Controller Devices at Schools: Game-Based Learning with the...
The Use of Modern Controller Devices at Schools: Game-Based Learning with the...
 
mca.pptx
mca.pptxmca.pptx
mca.pptx
 
NoiseApp - Final presentation
NoiseApp - Final presentationNoiseApp - Final presentation
NoiseApp - Final presentation
 
Making Audio Engineering Learning & Practice Accessible in Virtual Reality
Making Audio Engineering Learning & Practice Accessible in Virtual RealityMaking Audio Engineering Learning & Practice Accessible in Virtual Reality
Making Audio Engineering Learning & Practice Accessible in Virtual Reality
 
Kinect on Android Pandaboard
Kinect on Android PandaboardKinect on Android Pandaboard
Kinect on Android Pandaboard
 
Dip unit-i-ppt academic year(2016-17)
Dip unit-i-ppt academic year(2016-17)Dip unit-i-ppt academic year(2016-17)
Dip unit-i-ppt academic year(2016-17)
 
How we did 60FPS in our 3D RTS mobile game
How we did 60FPS in our 3D RTS mobile gameHow we did 60FPS in our 3D RTS mobile game
How we did 60FPS in our 3D RTS mobile game
 
Multimedia
MultimediaMultimedia
Multimedia
 
DIPsadasdasfsdfsdfdfasdfsdfsdgsdgdsfgdfgfdg
DIPsadasdasfsdfsdfdfasdfsdfsdgsdgdsfgdfgfdgDIPsadasdasfsdfsdfdfasdfsdfsdgsdgdsfgdfgfdg
DIPsadasdasfsdfsdfdfasdfsdfsdgsdgdsfgdfgfdg
 
project on snake game in c language
project on snake game in c languageproject on snake game in c language
project on snake game in c language
 
Chapter 9 animation
Chapter 9 animationChapter 9 animation
Chapter 9 animation
 
Augmented reality and Game Technology af Georgios N. Yannakakis, ITU
Augmented reality and Game Technology af Georgios N. Yannakakis, ITUAugmented reality and Game Technology af Georgios N. Yannakakis, ITU
Augmented reality and Game Technology af Georgios N. Yannakakis, ITU
 
From paper to screen: Putting maps on the web
From paper to screen:  Putting maps on the webFrom paper to screen:  Putting maps on the web
From paper to screen: Putting maps on the web
 

More from Sociedad Española para las Ciencias del Videojuego

More from Sociedad Española para las Ciencias del Videojuego (20)

CoSECiVi 2020 - GRETIVE Un Bot Evolutivo para HearthStone basado en Perfiles
CoSECiVi 2020 - GRETIVE Un Bot Evolutivo para HearthStone basado en PerfilesCoSECiVi 2020 - GRETIVE Un Bot Evolutivo para HearthStone basado en Perfiles
CoSECiVi 2020 - GRETIVE Un Bot Evolutivo para HearthStone basado en Perfiles
 
CoSECiVi 2020 - Parametric Action Pre-Selection for MCTS in Real-Time Strateg...
CoSECiVi 2020 - Parametric Action Pre-Selection for MCTS in Real-Time Strateg...CoSECiVi 2020 - Parametric Action Pre-Selection for MCTS in Real-Time Strateg...
CoSECiVi 2020 - Parametric Action Pre-Selection for MCTS in Real-Time Strateg...
 
CoSECiVi 2020 - Las consecuencias del glitch en el entorno virtual interactivo
CoSECiVi 2020 - Las consecuencias del glitch en el entorno virtual interactivoCoSECiVi 2020 - Las consecuencias del glitch en el entorno virtual interactivo
CoSECiVi 2020 - Las consecuencias del glitch en el entorno virtual interactivo
 
CoSECiVi 2020 - Games studies in architectural education: An experimental gra...
CoSECiVi 2020 - Games studies in architectural education: An experimental gra...CoSECiVi 2020 - Games studies in architectural education: An experimental gra...
CoSECiVi 2020 - Games studies in architectural education: An experimental gra...
 
CoSECiVi 2020 - Multiresolution Foliage Rendering
CoSECiVi 2020 - Multiresolution Foliage RenderingCoSECiVi 2020 - Multiresolution Foliage Rendering
CoSECiVi 2020 - Multiresolution Foliage Rendering
 
CoSECiVi 2020 - Development of a User-Friendly Application for Creating Tacti...
CoSECiVi 2020 - Development of a User-Friendly Application for Creating Tacti...CoSECiVi 2020 - Development of a User-Friendly Application for Creating Tacti...
CoSECiVi 2020 - Development of a User-Friendly Application for Creating Tacti...
 
CoSECiVi 2020 - Entornos parcialmente no euclidianos en realidad virtual
CoSECiVi 2020 - Entornos parcialmente no euclidianos en realidad virtualCoSECiVi 2020 - Entornos parcialmente no euclidianos en realidad virtual
CoSECiVi 2020 - Entornos parcialmente no euclidianos en realidad virtual
 
CoSECiVi 2020 - An Exploration on Automating Player Personality Identificatio...
CoSECiVi 2020 - An Exploration on Automating Player Personality Identificatio...CoSECiVi 2020 - An Exploration on Automating Player Personality Identificatio...
CoSECiVi 2020 - An Exploration on Automating Player Personality Identificatio...
 
CoSECiVi 2020 - Data mining of deck archetypes in Hearthstone
CoSECiVi 2020 - Data mining of deck archetypes in HearthstoneCoSECiVi 2020 - Data mining of deck archetypes in Hearthstone
CoSECiVi 2020 - Data mining of deck archetypes in Hearthstone
 
CoSECiVi 2020 - Descubrimiento de modelos de comportamiento de perfiles de ju...
CoSECiVi 2020 - Descubrimiento de modelos de comportamiento de perfiles de ju...CoSECiVi 2020 - Descubrimiento de modelos de comportamiento de perfiles de ju...
CoSECiVi 2020 - Descubrimiento de modelos de comportamiento de perfiles de ju...
 
CoSECiVi 2020 - Virtual Reality and Chess. A Video Game for Cognitive Trainin...
CoSECiVi 2020 - Virtual Reality and Chess. A Video Game for Cognitive Trainin...CoSECiVi 2020 - Virtual Reality and Chess. A Video Game for Cognitive Trainin...
CoSECiVi 2020 - Virtual Reality and Chess. A Video Game for Cognitive Trainin...
 
CoSECiVi'16 - Hacia la generación automática de mecánicas de juego: un edito...
CoSECiVi'16 - 	Hacia la generación automática de mecánicas de juego: un edito...CoSECiVi'16 - 	Hacia la generación automática de mecánicas de juego: un edito...
CoSECiVi'16 - Hacia la generación automática de mecánicas de juego: un edito...
 
CoSECiVi'16 - Computación Efímera: identificando retos para la investigación e...
CoSECiVi'16 - Computación Efímera: identificando retos para la investigación e...CoSECiVi'16 - Computación Efímera: identificando retos para la investigación e...
CoSECiVi'16 - Computación Efímera: identificando retos para la investigación e...
 
CoSECiVi'16 - Walking in VR. Measuring Presence and Simulator Sickness in Fir...
CoSECiVi'16 - Walking in VR. Measuring Presence and Simulator Sickness in Fir...CoSECiVi'16 - Walking in VR. Measuring Presence and Simulator Sickness in Fir...
CoSECiVi'16 - Walking in VR. Measuring Presence and Simulator Sickness in Fir...
 
CoSECiVi'16 - Extensión de los grafos de dependencia para incrementar la reju...
CoSECiVi'16 - Extensión de los grafos de dependencia para incrementar la reju...CoSECiVi'16 - Extensión de los grafos de dependencia para incrementar la reju...
CoSECiVi'16 - Extensión de los grafos de dependencia para incrementar la reju...
 
CoSECiVi'16 - Sólo puede quedar uno: Evolución de Bots para RTS basada en sup...
CoSECiVi'16 - Sólo puede quedar uno: Evolución de Bots para RTS basada en sup...CoSECiVi'16 - Sólo puede quedar uno: Evolución de Bots para RTS basada en sup...
CoSECiVi'16 - Sólo puede quedar uno: Evolución de Bots para RTS basada en sup...
 
CoSECiVi'16 - Living-UGR: Una aventura gráfica geolocalizada para difundir el...
CoSECiVi'16 - Living-UGR: Una aventura gráfica geolocalizada para difundir el...CoSECiVi'16 - Living-UGR: Una aventura gráfica geolocalizada para difundir el...
CoSECiVi'16 - Living-UGR: Una aventura gráfica geolocalizada para difundir el...
 
CoSECiVi'16 - Desarrollo de una plataforma basada en Unity3D para la aplicaci...
CoSECiVi'16 - Desarrollo de una plataforma basada en Unity3D para la aplicaci...CoSECiVi'16 - Desarrollo de una plataforma basada en Unity3D para la aplicaci...
CoSECiVi'16 - Desarrollo de una plataforma basada en Unity3D para la aplicaci...
 
CoSECiVi'16 - Educapiz: Una herramienta para educación infantil basada en ser...
CoSECiVi'16 - Educapiz: Una herramienta para educación infantil basada en ser...CoSECiVi'16 - Educapiz: Una herramienta para educación infantil basada en ser...
CoSECiVi'16 - Educapiz: Una herramienta para educación infantil basada en ser...
 
CoSECiVi'15 - Predicting the winner in two player StarCraft games
CoSECiVi'15 - Predicting the winner in two player StarCraft gamesCoSECiVi'15 - Predicting the winner in two player StarCraft games
CoSECiVi'15 - Predicting the winner in two player StarCraft games
 

Recently uploaded

Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17Celine George
 
Gardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterGardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterMateoGardella
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfChris Hunter
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.MateoGardella
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Disha Kariya
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 

Recently uploaded (20)

Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Gardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterGardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch Letter
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 

CoSECiVi'14 - E-Cecilia. Implementation of a music game

  • 1. D’ IMATGE I GRÀFICS! TECNOLOGIE S! D’ IMATGE I GRÀFICS! TECNOLOGIES! http://gilab.udg.edu E-cecilia: implementation of a music game R. García1,5, I. Barbancho2, L. Tardón2, J. Arambarri3, M. Magdics1,4, M. Sbert1 1University of Girona 2University of Malaga 3Virtualware 4Budapest University of Technology and Economics 5iMinds / University of Hasselt
  • 2. D’ IMATGE I GRÀFICS! TECNOLOGIE S! •  Introduction •  Game description •  Architecture, client-server model •  Server •  Music composition & analysis •  Client •  Graphics, non-photorealistic rendering •  Natural interaction •  Immersive devices Contents  
  • 3. D’ IMATGE I GRÀFICS! TECNOLOGIE S! Introduc-on   •  Learning to sing requires long practising hours •  The early stages use very simple songs → boring •  Good singers start very young, so they tire more easily •  Solution: Make the practising into a game •  Related work: •  SingStar: full songs, too complex for starting young children •  Other games: •  focused on keyboard / mouse interaction •  don't do audio analysis
  • 4. D’ IMATGE I GRÀFICS! TECNOLOGIE S! •  Serious game to practice singing and rhythm •  The user is presented with a small village to explore •  The houses are small, and can be enhanced by the user: •  After clicking a house, a song is presented •  The user sings to the best of his abilities •  The house evolves in response to the user singing •  The user can continue exploration and singing until he has practiced enough. Game  descrip-on  
  • 6. D’ IMATGE I GRÀFICS! TECNOLOGIE S! System  architecture   •  Three main components: •  Game client (Unity) •  Assets (on a web server) •  Recommendation and Evaluation server •  Audio and rhythm evaluation (matlab) •  Recommendation system (C++ library) •  Interconnection: •  TCP sockets (game-server) •  HTML (game-webserver)
  • 7. D’ IMATGE I GRÀFICS! TECNOLOGIE S! Game  client   •  Object oriented, asynchronous architecture using the Unity game engine. Object behaviour uses C# scripts. •  The main objects are: •  World Creation (terrain, house creation and evolution) •  World View: Camera, NPR effects, Dome transforms, GUI •  World control: Kinect, mouse interaction •  Asset downloading, communication with web server. •  Microphone: song recording •  ServerConnect: Communication with the server, evolving the GameState
  • 8. D’ IMATGE I GRÀFICS! TECNOLOGIE S! Music  server   •  The game server is responsible for the automatic generation of musical excercises (songs) and the assessment of the user performance Server
  • 9. D’ IMATGE I GRÀFICS! TECNOLOGIE S! Music  synthesis   •  A set of training songs is used and analyzed •  Created songs replicate the selected style and complexity of that of the corresponding exemplars Training Generation
  • 10. D’ IMATGE I GRÀFICS! TECNOLOGIE S! Music  assessment   •  Tempo, rythm and melody is compared against the reference •  Works with inexpensive microphones too
  • 11. D’ IMATGE I GRÀFICS! TECNOLOGIE S! Graphics,  Non-­‐photorealis-c  Rendering  (NPR)   •  Post processing stylization –  State-of-the-art image processing (on the color and depth) •  Flexible, a wide range of effects •  Commercial Unity package under finalization Original rendering (“Photo-realistic”) Color Comic: Image simplification + edges
  • 12. D’ IMATGE I GRÀFICS! TECNOLOGIE S! NPR:  edge  effects   Intensity + depth-normal edges Colored painting: edge color is driven by the (original) rendered color
  • 13. D’ IMATGE I GRÀFICS! TECNOLOGIE S! •  Replacement of the shadowed pixels by another color NPR:  Shadow  effects   Complementary shadows: Shadow color is the complementary color of the shadowed surface
  • 14. D’ IMATGE I GRÀFICS! TECNOLOGIE S! •  Increasing the level of abstraction by depth NPR:  depth  sensa-on   Depth-based desaturation Depth-based simplification: Texture details are removed in the background
  • 16. D’ IMATGE I GRÀFICS! TECNOLOGIE S! •  Augmented reality: mobile device, augment camera image with controls (e.g. buttons) •  Kinect: exergame (imitating real movements, like walking or turning) or control by hand movements Natural  interac-on   AR button Exergame: walk
  • 17. D’ IMATGE I GRÀFICS! TECNOLOGIE S! •  Different projection/camera settings –  E.g. stereo: 2 cameras, dome: 360º projection with cube-map Stereo, top-bottom Stereo, side-by-side Immersive  visualiza-on  
  • 18. D’ IMATGE I GRÀFICS! TECNOLOGIE S! Immersive  visualiza-on   Spherical dome source: immersivedisplay.co.uk Immersapod
  • 19. D’ IMATGE I GRÀFICS! TECNOLOGIE S! Immersive  visualiza-on   •  NPR+immersive: NPR on the final image –  Regular 2D image processing •  No added computational complexity for using immersive displays w.r.t. NPR Dome+color comic Immersive+B&W comic
  • 20. D’ IMATGE I GRÀFICS! TECNOLOGIE S! Conclusions   •  Music teaching game •  State-of-the-art automatic music synthesis and singing assessment •  Controllable graphics style (NPR) as post- processing •  Support for natural interaction, immersive visualization
  • 21. D’ IMATGE I GRÀFICS! TECNOLOGIE S! Thank you! Questions? D’ IMATGE I GRÀFICS! TECNOLOGIES!