Blog Blog

Créer en 3D : dans quelle direction partir ?

La modélisation 3D est un thème récurrent, plusieurs ateliers et animations lui ont été dédié à Graines2Tech, y compris un stage ce mois-ci au Club de Saverne.

Que modélise-t-on ? Pour quoi faire ?

animation Paris passéQuand on modélise, on crée une représentation d'une réalité, présente, passée ou imaginée.
Un modèle est un support de communication, par exemple pour présenter à quoi ressemblait Paris dans le passé, ou pour voir à quoi ressemble le squelette d'une baleine.
C'est aussi un support pour rêver...
Regardez ces 2 exemples :
Paris au Moyen-Age : https://www.youtube.com/watch?v=NbETq6owNmc 
Baleine à bec : https://www.facebook.com/watch/?v=239577727486833 

Comment modélise-t-on ? Avec quels outils ?

Avant de pouvoir faire des modèles animés et réalistes, on peut créer des formes plus simples...
Il existe pour cela plusieurs outils et plusieurs approches.

exemple 3Dslash

Un premier outil est 3D Slash, qu'on peut utiliser selon les approches "je creuse la matière, je la sculpte", ou "j'ajoute de la matière pour créer la forme".

Cet outil permet aussi de projeter une image sur une face de cube, qui peut ainsi servir de profil ou de pochoir pour tailler le cube. C'est ce qui a été fait avec cette image de robot. Ensuite, il n'y a plus qu'à l'exporter en format STL pour l'utiliser en impression 3D !

travail sur 3dslash robot imprimé

Alors que cette première approche peut rappeler le jeu sous Minecraft (casser des blocs), une autre approche peut rappeler celle des petites briques (Lego (c), Nanoblock (c)...), avec un outil de Voxel Art, une espèce de grand frère en 3D au Pixel Art qui a lieu en 2D, cad 2 dimensions. On utilisera par exemple MagicaVoxel ou VoxelShop.

Un bon moyen de commencer avec ce type d'outil est de partir d'un espace vide et de construire couche par couche avec l'aide d'un plan de montage Nanoblock (c). Voici l'exemple de la Tour Eiffel. Sur la base d'une modélisation, le rendu peut ensuite se générer avec plusieurs effets : cubes, briques, sphères, cylindres, argile...

Tour Eiffel sous MagicaVoxel Tour Eiffel en voxels

Ex TinkercadAlors que ces premiers outils permettent de créer de façon visuelle, il existe aussi la possibilité de construire des formes en les programmant ! Cest ce que font entre autres TinkerCAD et BlocksCAD.

En combinant des boucles, des variables, des conditions et autres instructions, l'artiste peut créer des formes abstraites, plus ou moins répétitives et géométriques, et observer leur modification, parfois inattendue, en jouant sur des paramètres.

code sous BlocksCAD 

 

Après les aspects géométriques, voyons un mode plus "libre" : la sculpture d'un matériau type argile ou pâte à modeler ! C'est l'impression visuelle que donnent des outils comme SculptGL, SculptFab, Sculptris ou Sculpt dans Blender.

Blender Sculpt 

Blender intègre bien plus d'outils que le seul Sculpt, mais cela demande unstage en soi. Pour cette fois, on s'est contenté de quelques "extrusions" à partir du cube de base, avec un joli rendu...

Premiers pas avec Unity3D

Unity3D, qu'est-ce que c'est ? à quoi ça sert ?

C'est une plateforme de développement et un moteur, pour faire des jeux, des films, de la réalité virtuelle ou augmentée. Mmmm... dis comme ça, ça parait compliqué !

 

Alors regardez https://unity.com/fr/madewith pour voir quelques images ou animations !

(Moi j'aime particulièrement le joli jeu de Monument Valley II https://unity.com/fr/madewith/monument-valley-2 et les animations autour des Nouveaux Héros par ex https://youtu.be/9qjp7i7zjSY...)

Ca serait la plateforme à l'origine de la moitié des nouveaux jeux mobiles : https://unity.com/fr/solutions/mobile

Alors vous avez peut-être déjà vu le logo au lancement d'un jeu... 

 

OK, mais moi je peux faire quoi avec ?

Evidemment, l'idée n'est pas de faire directement un jeu que tout le monde va télécharger ;)

Et l'intérêt, c'est qu'il existe beaucoup de ressources pour commencer... et pour continuer ! En particulier avec l'Asset Store, une "boutique" de ressources.

Donc, on commence par quoi ?

Déjà, on doit installer les outils... 

Vérifier qu'on remplit les pré-requis :

  • avoir un ordinateur sous Windows, Mac OS ou Ubuntu, avec un minimum de capacités : voir détails en haut de la page https://unity3d.com/get-unity/download
  • avoir un peu de temps, l'installation est assez longue...

Puis, étape par étape :

1. Télécharger et installer "Unity Hub"

  • aller sur https://unity3d.com/get-unity/download et cliquer sur "Download Unity Hub"
  • lancer l'installation du "Unity Hub Setup" téléchargé, accepter les conditions et suivre les instructions
  • ouvrir Unity Hub une fois installé
  • activer une licence comme demandé (de type Unity Personal, en confirmant que vous n'utilisez pas Unity de manière professionnelle) et revenir à l'accueil (flèche en haut à gauche)

 

2. Installer une version d'Unity

  • dans Unity Hub, aller sur "Installs" à gauche, et cliquer sur "Add" à droite
  • choisir une version "2019.4.x (LTS)" et cliquer sur "Next" (peu importe la valeur de x, prendre la plus grande)
  • sélectionner "Visual Studio" et "WebGL Build Support" (uniquement), cliquer sur "Next", accepter les conditions et suivre les instructions

Le Unity Hub permet de gérer plusieurs versions de Unity sur le même ordinateur.

3. Créer (ou se connecter à) un compte Unity ID

  • aller dans le menu "Account" en haut à droite du Unity Hub (silhouette) et cliquer sur "Sign in"
  • se connecter ou créer un compte

La partie installation est faite ! Vous voulez commencer à utiliser Unity ? Alors vous pouvez soit suivre le point 4 ci-dessous, soit chercher des tutos en ligne, soit attendre d'être au stage pour qu'on le fasse ensemble !

4. Installer et explorer un jeu 2D

  • aller dans "Projects" à gauche et cliquer sur "New" à droite
  • choisir "2D", donner un nom au projet ("MonJeuDePlateforme" par ex) et cliquer sur "Create"
  • une fois Unity ouvert, cliquer sur l'onglet "Asset Store" et chercher "Platformer Microgame"
  • cliquer sur "Platformer Microgame" puis "Download', puis "Import" (2x)
  • si un message "Warning" apparaît, faire "Install/Upgrade" comme demandé
  • quand une petite fenêtre "Import Unity Package" s'ouvre, cliquer encore une fois "import"
  • si un message vous le demande, faire "Reload", puis revenir sur l'onglet "Scene"
  • cliquer sur le bouton "Play" en haut et tester le jeu (déplacer le personnage avec les flèches, sauter avec espace), arrêter le jeu en rappuyant sur le bouton Play
  • cliquer sur "Tutorials / Show tutorials" pour faire apparaitre un tutoriel en anglais qui guide pas à pas dans le "modding" du jeu... ou venir au stage pour le faire ensemble !

Et pour finir cette introduction, une BONNE NOUVELLE ! Unity avait mis leurs cours Premium en accès gratuit pendant le confinement, ils viennent d'annoncer que cet accès reste désormais gratuit ! https://learn.unity.com/

https://www.facebook.com/unity3d/posts/10157811173906773

Pour aller plus loin : s'inscrire au stage des 15-16-17/07/2020 !

Découverte HTML / CSS

Commençons par HTML, de quoi s'agit-il donc ?
Pour le voir, allez sur une page web, disons https://graines2tech.is4ri.com/blog
Faites un clic droit et "voir la source", ou Ctrl-U (rester appuyé sur une touche Ctrl et appuyer sur U une fois) : un nouvel onglet s'ouvre avec un texte apparemment incompréhensible !
Regardons ce texte de plus près : il commence par
<!DOCTYPE html> <html class="aui ltr" dir="ltr" lang="fr-FR"> <head> <title>Le blog - Graines2Tech</title>...
et si on va tout en bas de la page, on voit que ça finit par
</body> </html> 
Tiens, tiens, on voit donc "html" au moins 3 fois... 

On voit aussi des "<" et des ">" : en général, ça permet plutôt de comparer des nombres pour voir lequel est "plus petit que" ou "plus grand que", mais ici, pas de nombre !

En fait, ils vont par deux, comme des parenthèses, et renferment plus ou moins de texte : <head> par exemple, ou <title>, mais aussi </body> ou </html> où le texte renfermé commence par "/".
C'est ce qu'on appelle des "balises". Et elles vont aussi par 2 comme <title> et </title> qui entourent... le titre de la page web "Le blog - Graines2Tech". Et oui, "title" veut dire "titre" en anglais :)
Mais aussi <html (suivi d'autres textes) > et </html>
On voit que les balises de fin, </title> et </html>, commencent par "/".

Et à la fin de notre texte, on a vu qu'il y avait aussi </body>, donc il doit y avoir un <body> quelque part avant. Et "body" voulant dire "corps" en anglais, il y a des chances que <body> xxxxx </body> définisse... le corps de la page !

Vous vous rendez compte ? Vous savez comment créer un "corps" dans le monde du web ! Voire une tête avec <head> xxxx </head> ... Bien sûr, on parle de page web, ici :)
Allez sur https://codepen.io/pen/ et essayez votre nouveau pouvoir de création dans la partie HTML en recopiant le texte comme ci-dessous, et vous verrez dans la partie blanche votre "page web" prendre corps...


Notez-bien l'approche "poupées russes", c'est-à-dire que le titre (title) est à l'intérieur de la tête (head), et que la tête et le corps (body) sont à l'intérieur de la page html.

Ensuite, c'est comme pour toute langue, il faut apprendre le vocabulaire !
Regardez par exemple la liste donnée par https://htmlreference.io/

Et le css, alors, c'est pour quoi faire ?
Toujours sur codepen.io, écrivez le texte ci-dessous dans la partie CSS :

Voyez-vous la vie en bleu ? Vous pouvez modifier les 3 valeurs numériques entre 0 et 255.

Alors, pour continuer d'apprendre cette "langue" du web qu'est HTML, et sa langue soeur, le css, inscrivez-vous à un de nos stages ou ateliers sur ce thème !

En attendant, vous pouvez utiliser les cours de Khan Academy : https://fr.khanacademy.org/computing/computer-programming/html-css/intro-to-html/v/making-webpages-intro et https://fr.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-basics
N'oubliez pas de cliquer sur "Transcription" pour voir les textes des vidéos en français !

Alan Turing - Les machines pourraient-elles penser ?

Pour faire suite à l’article sur la cryptologie, je vous propose de nous pencher sur Alan Turing, mathématicien à la fois logicien, cryptographe, pionnier de l'informatique et de l'intelligence artificielle et qui aurait eu 108 ans le 23 juin 2020.

 Alan Turing

Alan Turing (1912-1954) 

 

Il est crédité d'avoir mené les décodeurs de Bletchley Park, quartier général des services de renseignement britannique lors de la Seconde Guerre mondiale, à casser une méthode de cryptage utilisée par les Nazis. Il a ainsi permis de décoder les messages radio cryptés par les machines Enigma de l'Allemagne nazie, grâce à l’utilisation de Bombes, machines qui testaient des clés de chiffrement. Cela fait de lui l'une des figures les plus distinguées de la guerre et nous pouvons le remercier pour la victoire des forces alliées.

 

Bombe

"Bombe"

 

Son histoire est racontée dans un livre dont a été tiré le film Imitation Game avec Benedict Cumberbatch, que je vous recommande ! 

Livre sur Alan Turing

Livre sur Alan Turing

 

Un documentaire très intéressant d’1 heure décrit également ses faits d’armes, accessible ici : https://www.dailymotion.com/video/x6xfm2u

 

En dehors du monde de l'informatique ou des mathématiques, bien que très influent et pouvant être considéré le père de toute la technologie informatique, Alan Turing est à peine connu. Pourtant, déjà dans les années 1930, alors qu'aucun ordinateur électronique numérique n'avait jamais été construit, il a montré les limites du calcul et a ainsi anticipé tout ce qui allait venir dans la révolution dite numérique.

Il a également jeté les bases de l'intelligence artificielle et son nom est associé au “test de Turing” : en octobre 1950, Alan Turing publie un article mémorable dans lequel il exploite la possibilité de créer des machines dotées d’une véritable intelligence. Il s’agit d’un texte fondateur et visionnaire. Il est confronté à cette question « les machines peuvent-elles penser ? » Cette difficulté d’interpréter « l’intelligence » le fait imaginer son test, rendu célèbre par le livre puis film 2001, L'odyssée de l'espace.

 

Test de Turing

Test de Turing

 

Pour aller plus loin : https://www.frenchweb.fr/petite-histoire-de-la-cryptographie-de-la-machine-enigma-a-lordinateur

Pour s’amuser : résoudre l’escape game sur Alan Turing proposé par un enseignant à ses élèves en cette période de confinement : https://view.genial.ly/5ea9729abcafac0d9fde3d20/game-breakout-alan-turing-escape-game

 

Affiche film Imitation game

Behind every code is an enigma...

 

Cryptologie : gardez le secret !

Mais c’est quoi la cryptologie ? C’est la somme de la cryptographie et de la cryptanalyse. Ah… frownaffiche cryptologie Cernay

Alors disons que vous cherchez un moyen de communiquer secrètement un message à un ami (par SMS par ex) sans que ce message puisse être compris par d'autres personnes (parents, profs,...). Comment faire ? Vous inventez un code...
Une fois que vous avez créé un code, il faut se demander :

  • est-il facile à apprendre et à utiliser?
  • est-il difficile à "casser" pour une personne extérieure qui ne connaîtrait pas ce code?

 

La cryptographie, c’est cette idée de brouiller un message pour que son contenu ne soit compréhensible que par son destinataire.
Et ça ne date pas d’aujourd’hui…
D’ailleurs, une méthode connu est le chiffrement de … César !
Vous pouvez utiliser sa méthode en imprimant et découpant 2 disques (voir le fichier fourni par La main à la pâte) et en les fixant ensemble par leur centre : en décalant un alphabet disons de 3 crans par rapport à l’autre A devient D, B devient E, etc et on décode un message en décalant du même nombre dans l’autre sens, et donc YHQL YLGL YLFL est un message codé pour… « VENI VIDI VICI » la célèbre maxime de Jules César (Je suis venu, j’ai vu, j’ai vaincu).

Caesar3


Amusez-vous à chiffrer / déchiffrer avec le code de César sur cette page : http://www.apprendre-en-ligne.net/crypto/cesar/index.html 

Alors, évidemment, quand on connait le code, c’est facile !
Mais si on ne le connaît pas ? Il faut le trouver ! Ca, c’est la cryptanalyse !
Avec la puissance des ordinateurs, le chiffrement de César et certains autres codes sont devenus faciles à décoder, il a fallu en définir des plus compliqués…

Mais comment peut-on décoder un message chiffré ?
Par exemple le message suivant :
ZRJ VDAARJ CLWJJRCK RK ERARMHRCK ZWIHRJ RK RULMP RC EHDWKJ. ZRJ EWJKWCBKWDCJ JDBWLZRJ
CR FRMNRCK RKHR TDCERRJ GMR JMH Z’MKWZWKR BDAAMCR.

participants en pleine cryptanalyseVous avez un jeu de Scrabble © (français) à la maison ?
Faites alors 2 tableaux avec :

  • Pour chaque lettre du Scrabble © combien de fois elle est présente
  • Pour chaque lettre du message combien de fois elle est présente

-> il y a de fortes chances pour que la lettre la plus fréquente dans le message soit la lettre qui “code” la lettre la plus fréquente dans le jeu de Scrabble © 
C’est la méthode utilisée par Al-Kindi au 9e siècle, l’analyse de la fréquence des lettres !

La fréquence des lettres du jeu de Scrabble © approche celle de la langue française (voir http://www.apprendre-en-ligne.net/crypto/stat/francais.html).
Il reste ensuite à utiliser ses connaissances des mots de 2 et 3 lettres en français pour trouver d’autres lettres codées, puis de continuer avec les tableaux de fréquence des lettres pour en trouver d’autres, etc

 

Si ce genre d’activités vous plait, allez sur https://epreuve.concours-alkindi.fr/ et “entrainement”, pour résoudre des énigmes de cryptographie !

 

Derniers blogs Derniers blogs

Retour

Premiers pas avec Unity3D

Unity3D, qu'est-ce que c'est ? à quoi ça sert ?

C'est une plateforme de développement et un moteur, pour faire des jeux, des films, de la réalité virtuelle ou augmentée. Mmmm... dis comme ça, ça parait compliqué !

 

Alors regardez https://unity.com/fr/madewith pour voir quelques images ou animations !

(Moi j'aime particulièrement le joli jeu de Monument Valley II https://unity.com/fr/madewith/monument-valley-2 et les animations autour des Nouveaux Héros par ex https://youtu.be/9qjp7i7zjSY...)

Ca serait la plateforme à l'origine de la moitié des nouveaux jeux mobiles : https://unity.com/fr/solutions/mobile

Alors vous avez peut-être déjà vu le logo au lancement d'un jeu... 

 

OK, mais moi je peux faire quoi avec ?

Evidemment, l'idée n'est pas de faire directement un jeu que tout le monde va télécharger ;)

Et l'intérêt, c'est qu'il existe beaucoup de ressources pour commencer... et pour continuer ! En particulier avec l'Asset Store, une "boutique" de ressources.

Donc, on commence par quoi ?

Déjà, on doit installer les outils... 

Vérifier qu'on remplit les pré-requis :

  • avoir un ordinateur sous Windows, Mac OS ou Ubuntu, avec un minimum de capacités : voir détails en haut de la page https://unity3d.com/get-unity/download
  • avoir un peu de temps, l'installation est assez longue...

Puis, étape par étape :

1. Télécharger et installer "Unity Hub"

  • aller sur https://unity3d.com/get-unity/download et cliquer sur "Download Unity Hub"
  • lancer l'installation du "Unity Hub Setup" téléchargé, accepter les conditions et suivre les instructions
  • ouvrir Unity Hub une fois installé
  • activer une licence comme demandé (de type Unity Personal, en confirmant que vous n'utilisez pas Unity de manière professionnelle) et revenir à l'accueil (flèche en haut à gauche)

 

2. Installer une version d'Unity

  • dans Unity Hub, aller sur "Installs" à gauche, et cliquer sur "Add" à droite
  • choisir une version "2019.4.x (LTS)" et cliquer sur "Next" (peu importe la valeur de x, prendre la plus grande)
  • sélectionner "Visual Studio" et "WebGL Build Support" (uniquement), cliquer sur "Next", accepter les conditions et suivre les instructions

Le Unity Hub permet de gérer plusieurs versions de Unity sur le même ordinateur.

3. Créer (ou se connecter à) un compte Unity ID

  • aller dans le menu "Account" en haut à droite du Unity Hub (silhouette) et cliquer sur "Sign in"
  • se connecter ou créer un compte

La partie installation est faite ! Vous voulez commencer à utiliser Unity ? Alors vous pouvez soit suivre le point 4 ci-dessous, soit chercher des tutos en ligne, soit attendre d'être au stage pour qu'on le fasse ensemble !

4. Installer et explorer un jeu 2D

  • aller dans "Projects" à gauche et cliquer sur "New" à droite
  • choisir "2D", donner un nom au projet ("MonJeuDePlateforme" par ex) et cliquer sur "Create"
  • une fois Unity ouvert, cliquer sur l'onglet "Asset Store" et chercher "Platformer Microgame"
  • cliquer sur "Platformer Microgame" puis "Download', puis "Import" (2x)
  • si un message "Warning" apparaît, faire "Install/Upgrade" comme demandé
  • quand une petite fenêtre "Import Unity Package" s'ouvre, cliquer encore une fois "import"
  • si un message vous le demande, faire "Reload", puis revenir sur l'onglet "Scene"
  • cliquer sur le bouton "Play" en haut et tester le jeu (déplacer le personnage avec les flèches, sauter avec espace), arrêter le jeu en rappuyant sur le bouton Play
  • cliquer sur "Tutorials / Show tutorials" pour faire apparaitre un tutoriel en anglais qui guide pas à pas dans le "modding" du jeu... ou venir au stage pour le faire ensemble !

Et pour finir cette introduction, une BONNE NOUVELLE ! Unity avait mis leurs cours Premium en accès gratuit pendant le confinement, ils viennent d'annoncer que cet accès reste désormais gratuit ! https://learn.unity.com/

https://www.facebook.com/unity3d/posts/10157811173906773

Pour aller plus loin : s'inscrire au stage des 15-16-17/07/2020 !