La programmation graphique II : l'animation d'art génératif
Joshua Davis, Artist, Designer, and Technologist
Regardez ce cours et des milliers d'autres
Regardez ce cours et des milliers d'autres
Leçons de ce cours
-
-
1.
Bande-annonce
1:09
-
2.
Unité 1, Vidéo 1
2:00
-
3.
Unité 1, Vidéo 2
3:33
-
4.
Unité 1, Vidéo 3
6:17
-
5.
Introduction à HRotate et Anchor
1:39
-
6.
Unité 2, Vidéo 1
12:55
-
7.
Unité 2, Vidéo 2
12:46
-
8.
Unité 2, Vidéo 3
14:04
-
9.
Introduction à HCanvas
2:02
-
10.
Unité 3, Vidéo 1
6:09
-
11.
Unité 3, Vidéo 2
14:50
-
12.
Introduction à HFollow
2:30
-
13.
Unité 4, Vidéo 1
12:48
-
14.
Introduction à HTimer et HRandomTrigger
1:45
-
15.
Unité 5, Vidéo 1
12:42
-
16.
Unité 5, Vidéo 2
14:40
-
17.
Unité 5, Vidéo 3
8:52
-
18.
Introduction à HTween et HCallback
2:50
-
19.
Unité 6, Vidéo 1
8:34
-
20.
Unité 6, Vidéo 2
15:13
-
21.
Unité 6, Vidéo 3
7:00
-
22.
Unité 6, Vidéo 4
9:59
-
23.
Unité 6, Vidéo 5
5:39
-
24.
Unité 6, Vidéo 6
9:18
-
25.
Unité 6, Vidéo 7
6:25
-
26.
Unité 6, Vidéo 8
10:56
-
27.
Introduction à HSwarm
3:00
-
28.
Unité 7, Vidéo 1
13:26
-
29.
Unité 7, Vidéo 2
11:40
-
30.
Introduction à HOscillator
3:05
-
31.
Unité 8, Vidéo 1
18:11
-
32.
Unité 8, Vidéo 2
4:00
-
33.
Unité 8, Vidéo 3
13:01
-
34.
Unité 8, Vidéo 4
5:38
-
35.
Unité 8, Vidéo 5
4:37
-
36.
Unité 8, Vidéo 6
7:38
-
37.
Unité 8, Vidéo 7
5:51
-
38.
Unité 8, Vidéo 8
7:39
-
39.
Unité 8, Vidéo 9
6:03
-
40.
Introduction à la combinaison de comportements
1:22
-
41.
Unité 9, Vidéo 1
12:27
-
42.
Unité 9, Vidéo 2
5:46
-
43.
Unité 9, Vidéo 3
7:12
-
44.
Unité 9, Vidéo 4
14:47
-
45.
Unité 9, Vidéo 5
14:07
-
46.
Unité 9, Vidéo 6
10:33
-
47.
Unité 9, Vidéo 7
7:10
-
48.
Unité 9, Vidéo 8
10:17
-
49.
Unité 9, Vidéo 9
7:46
-
50.
Unité 9, Vidéo 10
10:20
-
51.
Unité 9, Vidéo 11
5:16
-
52.
Unité 9, Vidéo 12
10:09
-
53.
Unité 9, Vidéo 13
8:14
-
54.
Introduction à la sortie
2:25
-
55.
Unité 10, Vidéo 1
7:44
-
56.
Unité 10, Vidéo 2
13:14
-
57.
Processing 3 + Bibliothèque / mise à jour HYPE
7:11
-
58.
Plus de cours de créativité sur Skillshare
0:33
-
-
- --
- Niveau débutant
- Niveau intermédiaire
- Niveau avancé
- Tous niveaux
Généré par la communauté
Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.
3 101
apprenants
32
projets
À propos de ce cours
Mon premier cours Skillshare « Programmer des graphiques I : Introduction à l'art génératif » est une condition préalable OBLIGATOIRE pour suivre ce cours. J'ai enseigné aux apprenants comment créer un nombre infini de motifs à l'aide de ma bibliothèque HYPE Framework et de commandes très simples. Dans le cours suivant, nous utiliserons des compositions statiques (comme celles créées dans le cours initial) et les animerons en utilisant un ensemble similaire de règles de randomisation. En d'autres termes, nous donnerons vie à votre œuvre d'art !
J'ai développé le Hype Framework pour faciliter la création d'art génératif statique et animé via Processing. Une grande partie de mon travail, notamment tous les rendus vidéo de 30 secondes sur mon tumblr, praystation, utilisent les techniques et les principes que je vais enseigner dans ce cours Skillshare. Si vous pensez que ce sujet est cool, qu'attendez-vous ? Inscrivez-vous !
Ce que vous apprendrez
Je vais vous guider, à l'aide de séquences capturées à l'écran, dans le processus de création d'art génératif animé avec mon Hype Framework. Nous couvrirons :
- Rotation et ancrage (HRotate et Anchoring). Comment faire pivoter un objet autour de son point d'ancrage.
- Peindre une toile (HCanvas) Comment peindre une toile par opposition à la scène. Nous discuterons également de la superposition, de l'éclaircissement et de la décoloration des éléments peints sur cette toile.
- Déplacement avec la souris (HFollow) Comment utiliser la souris comme entrée pour afficher une animation basée sur le geste de la souris.
- HTimer et HRandomTrigger. Comment configurer une action qui se déclenche en fonction d'un tempo (à la fois régulier et décalé).
- Déplacer des objets (HTween et HCallback) Comment déplacer un objet d'un endroit à un autre, puis déclencher un événement lorsque l'objet atteint sa destination.
- Comportement en essaim (HSwarm) Comment utiliser un comportement d'essaimage pour animer des objets à l'écran qui se regroupent autour d'un point à l'écran, que ce point soit fixe ou également animé.
- Oscillation ondulatoire (HOscillator). C'est ce que je préfère ! Animer des objets à l'écran grâce à l'oscillation des ondes, avec des ondes sinusoïdales, carrées, triangulaires et en forme de scie.
- Touches finales et rendu. Comment combiner les animations et les cours pour rendre nos animations en vidéo.
Ce que vous ferez
Votre projet pour ce cours consistera à animer des formes d'art générées par du code, à partir de fichiers que vous avez déjà ou de ce que vous avez créé dans mon premier cours. Vous devrez produire des rendus de séquences d'images (.MOV/ .MP4) que nous pourrons télécharger sur tumblr, flickr, youtube ou vimeo.
Rencontrez votre enseignant·e
Joshua Davis is an award-winning designer, technologist, author and artist in new media, and is acclaimed for his role in designing the visualization of IBM's Watson, the intelligent computer program capable of answering questions, for the quiz show Jeopardy.
Joshua's work has been exhibited at the Tate Modern (London), the Ars Electronica (Austria), the Design Museum (London), le Centre Pompidou (France), the Institute of Contemporary Arts (London), PS.1 MoMA (New York), the Smithsonian's Cooper-Hewitt, National Design Museum and more.
Voir le profil completProjet de cours pratique
Créer une vidéo animée d'art génératif
Introduction
- Commençons
Trouvez votre source de plaisir. Invoquez votre animal spirituel. Que la fête commence !
- Pré-requis du premier cours
Mon premier cours est un pré-requis OBLIGATOIRE / http://skl.sh/1l5cT6n, car il explique comment utiliser HYPE Framework pour Processing avec la configuration de Sublime Text 2.
- Revisiter hypeframework.org
Revisitez http://hypeframework.org et jetez un coup d'œil à certaines des animations.
- Télécharger le zip HYPE (staging)
Téléchargez le zip HYPE (staging).
https://github.com/hype/HYPE_Processing/tree/staging
Il contient de nombreux exemples d'animations.
- Rendez-vous sur http://praystation.tumblr.com
Rendez-vous sur http://praystation.tumblr.com. Il s'agit de mon projet personnel, qui reprend la plupart des notions enseignées dans ce cours.
- Regardez cette vidéo
https://vimeo.com/85263005 / glitch 041 / Phantogram / Fall in Love.
Vous aussi vous pouvez le faire !
HRotate et Anchor
- Télécharger le fichier 02_HRotate.zip
Téléchargez le fichier 02_HRotate.zip. Il s'agit d'une pièce jointe liée à l'unité 2, vidéo 1.
- L'unité 2, vidéo 1
Regardez l'unité 2, vidéo 1 qui couvre les fichiers « ex 1 » à « ex 3 ».
- L'unité 2, vidéo 2
Regardez l'unité 2, vidéo 2 qui couvre les fichiers « ex 4 » à « ex 7 ».
- S'entraîner à utiliser HRotate
Entraînez-vous à utiliser new HRotate(target, 1) et anchorAt(H.center) ou .anchor(50,-50) avec certains des fichiers que nous avons crées dans le premier cours.
- L'unité 2, vidéo 3
Regardez l'unité 2, vidéo 3, qui couvre les fichiers « ex 8 » à « ex 10 ».
- Entraînez-vous à l'imbrication
Entraînez-vous à imbriquer un actif dans un autre.
- Entraînez-vous à autoClear
Apprenez à utiliser .autoClear(false); et .autoClear(true); qui effacent OU NON la scène avant de mettre à jour l'animation des objets à l'écran.
- S'exercer à SVG
Chargez quelques uns de vos fichiers .SVG du cours précédent avec un HRotate.
HCanvas
- Télécharger le fichier 03_HCanvas.zip
Téléchargez le fichier 03_HCanvas.zip. Il est lié en pièce jointe à l'unité 3, vidéo 1.
- Voir l'unité 3, vidéo 1
Regardez l'unité 3, vidéo 1 qui couvre les fichiers « ex 1 et ex 2 ».
- Regardez l'unité 3, vidéo 2
Regardez l'unité 3, vidéo 2, qui couvre les fichiers « ex 3 à « ex 6 ».
- Réviser HCanvas
Revenez sur HCanvas, qui est un PGraphics étendu.
- S'exercer à HCanvas
Entraînez-vous à utiliser plusieurs HCanvas comme couches et à peindre certains éléments sur des toiles uniques. Considérez les comme des calques dans Photoshop ou Illustrator.
- S'exercer à .fade()
Entraînez-vous à utiliser .autoClear(false); et .fade(2); sur un HCanvas pour réduire les tracés à 0 alpha. Plus le nombre est petit, plus la réduction est lente... plus le nombre est grand, plus la réduction est rapide.
HFollow
- Télécharger le fichier 04_HFollow.zip
Téléchargez le fichier 04_HFollow.zip. Il s'agit d'une pièce jointe liée à l'unité 1, vidéo 1.
- Unité 4, vidéo 1
Regardez l'unité 4, vidéo 1, qui couvre les fichiers « ex 1 » à « ex 6 ».
- S'exercer à .ease() et .spring()
Entraînez-vous à utiliser HFollow, ajustez .ease() et .spring() pour modifier la façon dont l'animation suit les mouvements de votre souris.
- Pratiquer avec « ex 5 »
Faites quelques modifications de "ex 5" en changeant la photo à partir de laquelle il échantillonne la couleur... Essayez d'utiliser un portrait !
HTimer et HRandomTrigger
- Télécharger le fichier 05_Timers.zip
Téléchargez le fichier 05_Timers.zip. Il s'agit d'une pièce jointe liée à l'unité 5, vidéo 1
- Regardez l'unité 5, vidéo 1
Regardez l'unité 5, vidéo 1, qui couvre les fichiers « HTimer 1 » à « HTimer 4 ».
- Unité 5, vidéo 2
Regardez l'unité 5, vidéo 2, qui couvre les fichiers « HTimer 5 » à « HTimer 7 ».
- S'entraîner à utiliser HTimer
Entraînez-vous à supprimer .requestAll(), et copier-coller un HTimer dans certains des fichiers créés dans le premier cours qui utilisait HDrawablePool.
- Rappel concernant l'utilsation de HCanvas avec HDrawablePool
Lorsque vous utilisez HCanvas avec un HDrawablePool... pool.autoAddtoStage() devient pool.autoParent(NomDuHCanvas)
- Voir l'unité 5, vidéo 3
Regardez l'unité 3, vidéo 5, qui couvre les fichiers « HRandomTrigger 1 » et « HRandomTrigger 2 ».
- Rappel des probabilités avec des floats
La variable de probabilité dans HRandomTrigger utilise 1f/15. Pour plus d'informations sur le type de données float... rendez-vous sur http://docs.oracle.com/javase/tutorial/java/nutsandbolts/datatypes.html ou http://www.tutorialspoint.com/java/java_basic_datatypes.htm.
HTween et HCallback
- Télécharger le fichier 06_HTween.zip
Téléchargez le fichier 06_HTween.zip. Il s'agit d'une pièce jointe liée à l'unité 6, vidéo 1
- Unité de surveillance 6, vidéo 1
Regardez l'unité 6, vidéo 1, qui couvre les fichiers « ex 1 » et « ex 2 ».
- S'exercer – .ease() et .spring()
Amusez-vous à modifier les chiffres de .ease() et .spring() pour voir les types d'animations que vous obtenez.
- Regardez l'unité 6, vidéo 2
Regardez l'unité 6, vidéo 2, qui couvre les fichiers « ex 3 » et « ex 4 ».
- S'exercer à PVector
Pratiquez PVector, votre nouvel amour (si ce n'est pas le temps). PVector,
- Unité 6, vidéo 3
Regardez l'unité 6, vidéo 3, qui couvre le fichier « ex 5_3D ».
- Rappel concernant la 3D
Lorsque vous utilisez des coordonnées 3D, vous devez mettre à jour le générateur avec les paramètres de rendu appropriés, size(640,640,P3D) puis informer HYPE afin qu'il passe aux coordonnées 3D, .use3D(true), en conséquence http://www.processing.org/tutorials/p3d et http://www.processing.org/reference/camera_.html
- Regardez l'unité 6, vidéo 4
Regardez l'unité 6, vidéo 4 qui couvre les fichiers « ex 6 » et « ex 7 ».
- S'entraîner à utiliser HTween
Essayez d'ajouter quelques HTween dans certains des fichiers que nous avons créés dans le premier cours. En utilisant par exemple un HTween pour la rotation et/ou l'alpha.
- Unité de surveillance 6, vidéo 5
Regardez l'unité 6, vidéo 5 qui couvre le fichier « ex 8 ».
- Unité 6, vidéo 6
Regardez l'unité 6, vidéo 6 qui couvre le fichier « ex 9 ».
- Unité de surveillance 6, vidéo 7
Regardez l'unité 6, vidéo 7 qui couvre les fichiers « ex 10 » et « ex 11 ».
- Regardez l'unité 6, vidéo 8
Regardez l'unité 6, vidéo 8 qui couvre les fichiers « ex 12_3D » et « ex 13_3D ».
- S'entrainer à utiliser HBox et pointLight()
Exercez-vous à HBox et pointLight() comme drawable de remplacement dans certains fichiers précédents que vous avez peut être utilisés http://www.processing.org/reference/pointLight_.html
HSwarm
- Télécharger le fichier 07_HSwarm.zip
Téléchargez le fichier 07_HSwarm.zip. Il s'agit d'une pièce jointe liée à l'unité 7, vidéo 1
- Regardez l'unité 7, vidéo 1
Regardez l'unité 7, vidéo 1 qui couvre les fichiers « ex 1 » à « ex 3 ».
- Exercez-vous à .speed(), .turnEase() et twitch()
Essayez d'ajuster les valeurs de .speed() .turnEase() et .twitch() pour obtenir différentes variations des animations.
- Regardez l'unité 7, vidéo 2
Regardez l'unité 7, vidéo 2, qui couvre les fichiers « ex 4 » à « ex 7 ».
- Pratique . SVG
Échangez HRect avec certains des fichiers HShape .SVG que vous avez créés dans le cours précédent sous forme d'essaim.
- S'exercer à HPixelColorist
Entraînez-vous à changer la photo à partir de laquelle il échantillonne la couleur... essayez d'utiliser un portrait !
HOscillator
- Télécharger le fichier 08_HOscillator.zip
Téléchargez le fichier 08_HOscillator.zip. Il s'agit d'une pièce jointe liée à l'unité 8, vidéo 1
- Unité 8, vidéo 1
Regardez l'unité 8, vidéo 1, qui couvre les fichiers « ex 1 » à « ex 6 ».
- S'entraîner à ajuster des valeurs
Essayez d'ajuster les valeurs de .range() .speed() .freq() et .currentStep() pour obtenir différentes variations de l'oscillation.
- Unité 8, vidéo 2
Regardez l'unité 8, vidéo 2, qui couvre les fichiers « ex 7 SINE », « ex 8 SQUARE », « ex 9 TRIANGLE » et « ex 10 SAW ».
- Regardez l'unité 8, vidéo 3
Regardez l'unité 8, vidéo 3 qui couvre les fichiers « ex 11 » à « ex 15 ».
- S'exercer à HOscillator
Entraînez-vous à ajouter HOscillator dans certains des fichiers que nous avons créés lors du premier cours. Essayez également d'empiler quelques HOscillator différents pour une mise en scène encore plus sombre.
- Unité 8, vidéo 4
Regardez l'unité 8, vidéo 4, qui couvre les fichiers « ex 16 » et « ex 17 ».
- Utiliser HImage ou HShape
Utilisez « ex 16 » ou « ex 17 » avec HImage ou HShape .SVG pour obtenir ce type de visuels
http://www.pinterest.com/pin/1804958926335 ou http://www.pinterest.com/praystation/224-sara-blake-sealife
- Regardez l'unité 8, vidéo 5
Regardez l'unité 8, vidéo 5, qui couvre le fichier « ex 18 ».
- Regardez l'unité 8, vidéo 6
Regardez l'unité 8, vidéo 6, qui couvre le fichier « ex 19_3D ».
- Regardez l'unité 8, vidéo 7
Regardez l'unité 8, vidéo 7, qui couvre le fichier « ex 20 ».
- Regardez l'unité 8, vidéo 8
Regardez l'unité 8, vidéo 8, qui couvre les fichiers « ex 21_3D » et « ex 22_3D ».
- Regardez l'unité 8, vidéo 9
Regardez l'unité 8, vidéo 9, qui couvre le fichier « ex 23_3D ».
Combiner les comportements
- Télécharger le fichier 09_combos.zip
Téléchargez le fichier 09_combos.zip. C'est une pièce jointe liée à l'unité 9, vidéo 1.
- Suggestion
Enfilez des pantoufles douillettes, faites-vous un café avec une boisson énergisante qui dure 5 heures, puis prenez un Redbull. Je dis ça comme ça.
- Regardez l'unité 9, vidéo 1
Regardez l'unité 9, vidéo 1 qui couvre les fichiers « ex 1 » et « ex 2 ».
- Référence
Référence - http://www.processing.org/reference/beginShape_.html et http://www.processing.org/reference/vertex_.html
- Unité 9, vidéo 2
Regardez l'unité 9, vidéo 2 qui couvre le fichier « ex 3 ».
- Unité 9, vidéo 3
Regardez l'unité 9, vidéo 3 qui couvre les fichiers « ex 4 MOV » et « ex 5 MOV ».
- Unité 9, vidéo 4
Regardez l'unité 9, vidéo 4, qui couvre le fichier « ex 6 ».
- Référence
Référence - http://www.processing.org/reference/ArrayList.html
- Unité 9, vidéo 5
Regardez l'unité 9, vidéo 5, qui couvre les fichiers « ex 7 » et « ex 8 ».
- Unité 9, vidéo 6
Regardez l'unité 9, vidéo 6 qui couvre le fichier « ex 9 PNG » à « ex 11 PNG ».
- Unité 9, vidéo 7
Regardez l'unité 9, vidéo 7 qui couvre le fichier « ex 12 ».
- Unité 9, vidéo 8
Regardez l'unité 9, vidéo 8 qui couvre les fichiers « ex 13 » et « ex 14 ».
- Unité 9, vidéo 9
Regardez l'unité 9, vidéo 9 qui couvre le fichier « ex 15 SWARM ».
- Unité 9, vidéo 10
Regardez l'unité 9, vidéo 10, qui couvre les fichiers « ex 16 » et « ex 17 ».
- Unité 9, vidéo 11
Regardez l'unité 9, vidéo 11, qui couvre le fichier « ex 18 ».
- Unité 9, vidéo 12
Regardez l'unité 9, vidéo 12, qui couvre le fichier « ex 19 ».
- Unité 9, vidéo 13
Regardez l'unité 9, vidéo 13 qui couvre le fichier « ex 20 ».
Sortie
- Télécharger 10_output.zip
Téléchargez le fichier 10_output.zip. Il s'agit d'une pièce jointe liée à l'unité 10, vidéo 1
- Les 10 de l'unité de surveillance
Regardez l'unité 10, vidéo 1 qui couvre le fichier « ex 14 » de la section précédente.
- Les unités de surveillance 10, vidéo 2
Regardez l'unité 1, vidéo 20, faites une recherche Google sur Sequimago (disponible SEULEMENT sur Apple) et sur le convertisseur vidéo iSkySoft
- Cliquez ici
Cliquez ici - http://imgur.com/eNK6Y
Notes attribuées au cours
Pourquoi s'inscrire à Skillshare ?
Suivez des cours Skillshare Original primés
Chaque cours comprend de courtes leçons et des travaux pratiques
Votre abonnement soutient les enseignants Skillshare
Apprenez, où que vous soyez
Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.
