Animations
interactives
Cours 01
Introduction à l’interactivité
Présentation
Mot de bienvenue!
Plan de cours
Présentation – Introduction à
l’interactivité
Définitions
Interactivité
• « Qualité d’un logiciel dont l’exécution prend constamment en compte les
informations fournies par l’utilisateur ». (Source : Larousse)
Larousse
Interfaces homme-machine (IHM)
• [...] les moyens et outils mis en œuvre afin qu'un humain puisse contrôler et
communiquer avec une machine. (Source : Wikipedia)
Wikipedia
Animation
• Dans les domaines de l'illusion d'optique, des arts visuels, et plus fréquemment,
en audiovisuel, l'animation est un ensemble de techniques qui, par une succession
d'images, donne à un public l'illusion que des objets en réalité immobiles
sont dotés de mouvement naturel. (Source : Wikipedia)
Wikipedia
Dispositifs
d’interactivité
Pouvez-vous en nommer?
cedie_8 (cedie_8) - Profile | Pinterest
Dispositifs d’interactivité
• Sketchpad de Ivan Sutherland • Téléphone et téléviseur
(« Light pen ») intelligent (« smartphone » &
« smart TV »)
• Souris
• Borne interactive
• Clavier
• Casque de réalité virtuelle
• Pavé tactile (« touchpad »)
• Tablette graphique
• Manette de jeu
• Reconnaissance vocale &
• Interface utilisateur gestuelle
(WYSIWYG)
• Etc.
• Écran tactile
Types d’applications
Marketing
& publicité
R&D
Web Corporatif
Jeu vidéo Éducation
Cinéma &
télévision
Vidéo interactive
Navigation libre
Navigation libre vs guidée •Seven Digital Deadly Sins
Seven Digital Deadly Sins
« Pop up »
À embranchement (style « Histoires
•Bouton, libellé ou « hotspot »
VH1 Interactive Music Video (Bi
dont vous êtes le héros »)
•VH1 Interactive Music Video (Billie Eilish)
llie Eilish)
•Deloitte
Life Save
Deloitte
•Life Saver
r
Défilement
•The Boat
The Boat
Parallèle
À déclanchement
•Bombay Bicycle Club - Carry Me Interactive •Neurons
Bombay Bicycle Club - Carry Me Interactive Neurons
Video
Inter
Video
•Bob Dylan "Like A Rolling Stone" - Official Autres
active
o - YouTube
Video!
Interactive Video!
•Autres exemples
Autres exemples
•Bob Dylan - Like A Rolling Stone
Interactive Video - YouTube •Quiz
•360
Murs et planchers interactifs
Exemples
• Projection sphérique interactive
Projection 3D
Hypervsn sphérique
Modelerinteractive
- 3D Interact
• Hypervsn 3D Modeler - 3D Interactive Holographic Display
ivestudio
n
actory
Holographic
process
Büro Achter
–Display
YouTube
April – YouTube
• Digital interactive wall by design studio Büro Achter April –
YouTube
• interactive projection wall for factory process – YouTube
Aire de jeu interactive
• Lü - Aire de jeu interactive (2018)
Lü -interactif
Mur
Sol Aire
interactif
de jeu interactive (2018)
• Mur interactif
• Sol interactif
Image/vidéo 360°
• Google Street View
• Vidéos 360 immersives de
Parcs Canada
• Satosphère (SAT)
Inertia + Morphogenesis
• 360 Video | Siren Head 360
Part 2 | Funny Horror
Animation VR
Source : sato_1.jpg (900×600)
Réalité virtuelle (VR)
• Différence entre vidéo 360 et VR?
(Sources : Wondershare, Youtube
Creators et
Shubmetha)
Environnement numérique
Mobilité
Progression narrative plus libre
Liberté de déplacement dans l’univers
Requiert généralement un casque de réalité
virtuelle
• Virtual Reality – SteamVR featuring the
HTC Vive
• READY PLAYER ONE – Official Trailer
• Projets et réalisations d’Etherlab
Réalité
augmentée (AR)
• Pokemon GO
• Best Augmented Reality Marketing
Expériences 2019
• HYPER-REALITY
• Filtres réseaux sociaux (IG, FB,
Snapchat)
• Mario Kart Live
Mocap (« Motion Capture »)
Capture de mouvement (« Motion Capture de jeu (« Performance capture »)
Capture ») • Motion Capture in Cinema
• What Is? – Motion Capture • Benedict Cumberbatch - The hobbit -
• Titanfall Behind the Scenes: Mocap The best scene - Smaug-
Source : Source :
[Link] [Link]
[Link]
Studios de « mocap »
au Québec
• Matane
CDRIN (Centre de développement et
de recherche en imagerie numérique)
• Rouyn-Noranda
MOCAP – UQAT (Université de
l’Abitibi-Témiscamingue)
• Montréal
Squeeze (anciennement MOOV Studio)
Studio du château
Game On
• Au Cégep…
Perception Neuron - User Showcase
Intelligence artificielle (AI)
Animation
•Rokoko Video = AI Mocap
Rokoko
Pika
Gen2
Disco
EbSynth
Labs
Diffusion
deVideo
Runway @remi_
•Pika Labs
molette
•Gen2 de Runway
•EbSynth
•Disco Diffusion / @remi_molette
LiDAR (télédétection par laser = distance)
LiDAR
•iPad Pro LiDAR
iPadmural
Jeu Pro LiDAR
•Jeu mural
Pixel2Style2Pixel
•AI Generates Cartoon Characters In Real Life [Pixel2Style2Pixel]
AI Generates
Encoding in Style:
Cartoon
A StyleGAN
Characters
Encoder
In Realfor
Life
Image-to-Image
[Pixel2Style2Pixel]
Translat
•Encoding in Style: A StyleGAN Encoder for Image-to-Image Translation
ion
Autres projets :
•How This Guy Uses A.I. to Create Art | Obsessed | WIRED
How
Ce court-métrage
This Guy Usesest
A.I.
écrit
to Create
entièrement
Art | Obsessed
par un IA | WIRED
•Ce court-métrage est écrit entièrement par un IA
NVIDIA AI PLAYGROUND
NVIDIA AI PLAYGROUND
•Generating Photorealistic Video with AI Part 1
Generating
Research atPhotorealistic
NVIDIA: The First
Video
Interactive
with AI Part
AI 1Re
•Research at NVIDIA: The First Interactive AI Rendered Virtual World
ndered Virtual World
Formations francophones
- UQAT – Microprogramme de 1er cycle de
- UQÀM
UQAT –-Microprogramme
Baccalauréat en communication
de 1er cycle de(création médias – médias interactifs)
création en multimédia interactif
-création
UQÀM en - Baccalauréat
multimédia en
interactif
communication (création médias – médias interactifs)
Universitaire - UQÀM : Baccalauréat en création
- UQÀM -: Baccalauréat en création
communication (création médias
– médias interactifs)
d'expériences immersives et interactives
d'expériences immersives et interactives
- UQÀM - Baccalauréat en communication
(création médias – médias interactifs)
- Institut Grasset - Spécialiste en réalité
- Institut Grasset - Spécialiste en réalité
virtuelle et augmentee
virtuelle et augmentee
Collégial - Collège Champlain-Saint-Lambert -
- Collège Champlain-Saint-Lambert -
Spécialiste en réalité virtuelle et augmentee
Spécialiste en réalité virtuelle et augmentee
- Cégep de Sainte-Foy – Spécialisation
- Cégep de Sainte-Foy – Spécialisation
technique en intelligence artificielle (en ligne)
technique en intelligence artificielle (en ligne)
Autre - SAT (Société des Arts Technologiques)
- SAT (Société des Arts Technologiques)