1ère séquence : Réalisation d'une œuvre numérique

Pour entamer cette année, nous vous proposons de réaliser une œuvre numérique.

Les contraintes seront :

  • équipe aléatoire
  • œuvre réalisée avec Processing

Les objectifs pédagogiques de cette première séquence :

  • Approcher les structures algorithmiques simples
  • Apprendre à lire de la documentation
  • Appréhender la gestion de version
  • Prendre en main son environnement
  • Aborder les problématiques du travail en équipe

Si vous voulez vous préparer un peu, vous pouvez :

Aux personnes qui s’avanceront sur tout ou partie des points ci-dessus ; nous comptons sur vous pour aider le groupe sur ces sujets.

À lundi !

1 J'aime

Les projets envisagés

  • Jeux de métro
  • Logo dynamique (générer un logo/une image animé)
  • Sinus ? et Cosinus ?
  • Application d’exercices complémentaire en sport
  • Faire parler des tableaux classiques avec humour :slight_smile:
  • Visualisation de son ordinateur
  • Horloge 12h30 manger !
  • Circle of life
  • Fractale
  • Fourmi de Langton
  • Cadavre exquis
  • Générateur de poèmes

Les groupes constitués et les projets sélectionnés

Logo dynamique

Sinus ? et cosinus ?

Circle of life

Un site communautaire qui regroupe quelques belles œuvres numériques réalisées en Processing

https://www.openprocessing.org/

StructureEnCouches_001

cour_1_16.10.pdf (37,0 Ko)

1 J'aime

Nous avons regardé le code source de Processing le matin.

Particulièrement

Ce matin, c’est @kheops et @Thimy qui ont parlé de leur parcours et de leurs activités actuel.

Elles ont parlées de Codeurs En Liberté, la coopérative où elles travaillent. Et d’autres trucs. Merci d’ajouter les références qui auraient été cités et que vous aimeriez partager / retrouver.

Journal SinCos du vendredi 18 octobre

  • Le code source au moment du spectacle.
  • On a découvert Vim, un éditeur de texte, une première approche.
  • Il y a une commande dans processing pour executer le code : processing-java --sketch="monprogramme" --run. Fonctionne aussi pour builder avec processing-java --sketch="monprogramme" --buildmonprogrammer est le répertoire où Processing place le fichier source
  • On est pas obligé d’utiliser l’IDE de processing pour faire du processing. On peut utiliser la ligne de commande et son éditeur de texte favori.
  • Plutôt que d’écrire nombre = nombre + 1 on peut écrire nombre += 1
  • Dans processing, l’origine est en haut à gauche de l’écran
  • On dessine la courbe où on veut (depuis l’origine), puis on la décale (en utilisant la taille de l’écran avec height / 2)
  • Les fonctions intéressante en Processing :
  • « j’aime pas trop avoir des fonctions en dehors de draw() pour la gestion des événements, et des variables pour d’autres évènements. Je préférerais avoir tout en fonction ou tout en variable` » – @Adriel
  • dans le terminal ls, cd un_repertoire, git pull, git commit -a, git push
  • « C’est énervant de devoir taper sont login mot de passe github à chaque fois qu’on push » – @Wara

Journal du projet GameOfLife du vendredi 18 octobre

  • Code source au moment du journal
  • On a créé une classe, c’est un objet avec différents paramètres
  • public class Graph extends PApplet permet d’avoir une deuxième fenêtre
  • En créant une variable en dehors des fonctions draw() ou setup() ou tout autres fonctions, la variable est dite globale et accessible à toutes les fonctions du programme.
  • Nous avons importé une librairie pour utiliser les sliders : controlP5
  • C’est pratique d’utiliser une feuille blanche pour écrire et discuter de ce qu’on a envie de faire dans le code (travail de préparation)
  • Les commentaires c’est important pour transmettre de l’information aux autres personnes.
  • @laurine et Nicolas sont patients et compréhensifs
  • L’éditeur de Processing est vraiment pas terrible (« c’est de la merde »-- Nicolas ). L’indentation n’est pas automatique, on peut pas replier les blocs de code, les accolades ne sont pas fermées automatiquement.
  • « C’était la première fois que je faisais des trucs graphiques facilement » – @laurine
  • On a utilisé map(), fill(), smooth()etstroke()` en Processing.
  • C’est pratique pour faire du dessin d’avoir les fonctions draw() et setup() déjà présente.
  • Nicolas a utilisé le client graphique github desktop.
  • « le terminal c’est le raccourci le plus direct vers l’ensemble de la machine » – @lyd.sanaa

Journal du projet logo dynamique Adeyes du vendredi 18 octobre

  • code source au moment du journal
  • Le projet final, après discussion, ressemblera plus à un photoshop qu’au projet initial de gif-maker
  • On a utilisé les nuances de couleurs, les codes RGB (Red Green Blue).
  • Utilisation de l’outil paletton qui permet de comprendre visuellement les chiffres utilisées dans le code pour obtenir les différentes couleurs.
  • On a appris à utiliser des fichiers dans le code et les organiser pour garder une arborescence claire. Il est préférable d’utiliser des noms de fichiers sans espace loadImage("chemin/du/fichierenunseulmot).
  • Joli logo ada qui cligne des yeux.
  • Utilisation des fonctions ellipse() et rect() pour dessiner le texte.
  • Tu peux faire plein de trucs avec peu de choses – @B3RRY
  • On pourrait rendre des bouts de codes plus clairs. Ça manque de commentaires explicites qui peuvent aider quand on n’est pas familiarisé avec le code.
    • distinguer plusieurs appels de la même fonction.
    • void commence un bout de code. Titrer les différentes parties du code.
  • Découvrir un langage différent qui permet de faire du dessin, concevoir un dessin en positionnant des formes, des couleurs.
  • Utiliser les périphériques claviers et souris.
  • beaucoup plus à l’aide dans le fait du lire du code, comprendre beaucoup mieux la logique générale du code.
  • Des questionnements sur l’organisationnel, la communication, avec des débutants et des plus avancés. Comment se mettre d’accord sur ce qu’on va faire et comment on va le faire.
  • L’importance de travailler tous ensemble, de converger, se détacher émotionnellement de son idée.
  • Apprendre le terminal. C’est une fenêtre à travers laquelle on peut graviter partout sur l’ordinateur.
  • Les commandes ls cd pwd.
  • L’IDE est un peu légère en terme d’outils proposés pour l’indentation.
  • Ne pas se limiter, et voir seulement après pour les limites de l’outil employé.

Journal du projet SinCos du lundi 21 octobre

@Florian :

  • Comprendre code + bibliothèque son.
  • Représentation graphique du son.
  • A la place d’un grand Shape(), on a regroupé les lignes qui servent à faire les courbes.

Ce qu’on a appris/compris : Sinus, Cosinus @Gwenaelle + intégrer les librairies @Mohamed + button, utilisation de height et width @Florian + l’importance des commentaires + un code bien condensé est pratique pour s’entraîner à bien décrypter et à chercher la doc correspondante @Gwenaelle .

Comment s’approprier un code : Chercher sur internet ce qu’on ne comprend pas, lire, se poser des questions, découper les lignes si il y a plusieurs informations. Regarder la doc.

Continuer à : Comprendre le code, bien le décrypter.

2 J'aimes

Journal du projet Logo Dynamique / TotemMaker du lundi 21 octobre

  • Comprendre le code, pas trop compliqué, suite de else if.

  • On a implémenté des boites de input de texte.

  • Erreur rencontrée : on a essayé de comparer si l’input de la boite (‹ monday ›) est égal au string ‹ Jour de la semaine › mais dans java les ’ == ’ comparent l’adresse des 2 éléments donc retourne une erreur dans ce cas la. Donc utiliser le string en premier car la variable peut être null (et donc faire une erreur), et doit donc être du côté droit de l’expression : « monday ».equals(birthday). Mais maintenant ça fonctionne !!

Laurine a appris la fonction saveFrame() pour enregistrer le fichier généré.

Nicolas a appris qu’il y a des boites input texte dans la bibliothèque controlP5 et que JAVA est un langage spécial. Il a également appris comment convertir un string en int. Il apprit plus que ce qu’il aurait imaginé.

@lyd.sanaa : Plutôt intéressant et frustrant de bloquer sur quelque chose. Intéressant de voir comment Nicolas s’y est pris pour rechercher la solution.

Idées : touche pour cacher les boites d’input + touche pour enregistrer sous.

1 J'aime

Journal du projet GameOfLife du lundi 21 octobre

  • On a lu et code et corrigé les bugs.

  • Nettoyage du code : enlever les commentaires qui prévoyaient des choses, simplifier quelques fonctions, raccourcis ce qui étaient écrit sur de longues phrases, remplacer certaines valeurs par le nom de leur variable. Certaines variables étaient inutilisées / pas utilisables.

  • @Wara : Quand on reçoit un code, bien lire, nettoyer et ranger le code sur comment on le voit, pour se l’approprier.

  • Révision des raccourcis vim.

  • Explication comment lancer processing depuis terminal/vim.

  • @Adriel a pris un grand plaisir à chercher pourquoi telle variable est appelée ici, où elle est déclarée…
    Il a appris qu’on peut appeler de manière séquentielle des méthodes sur un objet « d’un seul coup ». Il a appris que c’était illisible d’imbriquer trop de ‹ for › et de ‹ if › ensemble.

  • @mfayal a compris le principe des classes et des doubles parenthèses.

Objectif de demain : @Adriel laisse @Wara et @mfayal farfouiller dans le code et désigner les modifications à faire. Refaire l’exercice de lecture de code (fait avec Yannick) à toute la structure du code.

1 J'aime

Journal du projet Logo Dynamique / TotemMaker du mardi 22 octobre

Nicolas :

  • implémentation du jour et du mois de l’anniversaire pour définir la forme du visage et des cheveux
  • découverte de l’usage du switch pour remplacer l’usage de multiples if

@laurine et @lyd.sanaa :

  • compréhension de coordonnées dans l’espace pour créer des formes
  • utilisation de git dans le terminal

Journal du projet SinCos du mardi 22 octobre

@B3RRY :

  • lecture du code de SinCos accompagné d’@Adriel pour mieux comprendre sa structure
  • aperçu de l’ux design
  • désir d’approfondir des notions en groupe pour mieux apprendre
  • apprentissage de ce qu’est une fonction et un objet

@Zakia :

  • seulement 5 lignes ont été revues, mais pas celle qui est fondamentale dans le projet
  • @Wara m’a appris la référence de RGB

@Florian :

  • découverte des objets pour créer des boutons plutôt que d’utiliser une librairie
  • Ca aurait été plus profitable de plus travailler en groupe

@Gwenaelle :

  • Installation de oh-my-zsh grâce à @Adriel et de MSYS2
  • Familiarisation avec la console et différenciation entre un fichier visible et invisible
  • Différence entre echo et ! pour appeler une commande externe dans vim

@Mohamed

  • Aperçu de l’ux design
  • Aperçu d’une installation d’un OS en utilisant le terminal

Pour aider à l’apprentissage, @laurine et Nicolas ont proposé Solo Learn et codeacademy

Journal du projet GameOfLife du mardi 22 octobre

@Wara :

  • Révision des commandes ls, rm sur le terminal -> meilleure maitrise
  • Relecture du code SinCos pour pouvoir l’expliquer à Zakia et Marine
  • Meilleure compréhension de la déclaration de variables et de l’espace occupé sur l’ordi
  • Aperçu de l’UX design

@mfayal :

  • Relecture de GameOfLife, ce qui n’est pas évident que les variables et fonctions utilisées étaient différentes de ce qui a été fait sur SinCos
  • Différence entre settings et setup, settings est optionnel et est appelé avant setup, il calcule des trucs qui pourront être utilisés par setup
  • new est dur à expliquer sans tableau mais j’ai à peu près compris ce que ça fait

@Adriel :

  • Il existe la possibilité d’ajouter un suffixe à un fichier *rc pour mieux organiser sa configuration
  • Révision de l’installation d’ArchLinux
  • Compréhension du bootloader et de l’intéraction entre les fichiers qu’il va utiliser
  • La commande ip, ip link, …
  • Les fichiers proc et sys sont des systèmes de fichiers
  • Quelques trucs avec zsh et MSYS

Journal du projet Jeu de la vie du mercredi 23 octobre

  • @Adriel : exercice donné par @Yannick : essayer de trouver les familles de mots auxquelles on a affaire dans le code ; j’ai appris que void n’est pas un type, mais pas compris l’idée. Ça ne me choque pas que ça soit envisagé comme un type et aimerais en parler un peu plus.
  • @mfayal : j’ai appris une belle formule : type, fonction, variable ; ça m’a permis de mieux comprendre le code qui est écrit ; notamment les variables et conditions dans la structure for
  • @Wara : j’ai appris la différence entre paramètre et variable, je ne suis pas encore capable de le réexpliquer mais saurais montrer à travers un exemple
  • @Wara : j’ai aussi mis un concept derrière le mot « type » : c’est aussi plutôt par l’exemple que réexplicable
  • @mfayal : j’ai appris comment traduire les explications de la documentation vers du code lorsqu’on lit l’aide concernant une fonction, et le fait qu’il s’agit d’une définition (type de la fonction, type des paramètres)
  • @Wara : j’appréhende un peu mieux la structuration du code : comment construire une fonction (déclarer les paramètres au bon endroit, et effectuer les opérations au bon endroit) ; aussi comment appeler une fonction pour la tester
  • @Adriel : j’ai appris que je ne sais pas comment est géré le retour de fonction au niveau mémoire ; je pense pouvoir l’apprendre en tentant de l’implémenter en assembleur… C’est une question que je me pose…
  • @Adriel : j’ai appris que c’était dur d’expliquer quand on appelle une fonction dans une autre fonction (exemple : println(tata(5));) : pas évident ni à comprendre ni à expliquer ; bien aimé une phrase qu’@agathe_begault a donné pour expliquer (mais j’ai oublié)
  • @mfayal : le travail de coloration des mots permettra de mieux comprendre du code dans le futur le prochain code qu’on examinera
  • @Wara : l’exercice de Yannick est plus efficace quand on est pas plus de cinq, car on a davantage le temps de participer et on n’attend pas la réponse de quelqu’un d’autre
  • @Adriel : j’ai appris que la façon dont la machine lit notre code n’est pas la même que la façon dont les humains conceptualisent le code
  • @Adriel : j’ai appris qu’avec « Tout recherche » dans LibreOffice on peut sélectionner le même mot à plein d’endroits d’une seule fois (et donc le colorer, notamment)

Joural du projet Logo dynamique / totem maker du mercredi 23 octobre

  • @laurine : je n’ai pas appris grand chose mais j’ai joué avec les couleurs et les formes ; je voudrais revoir davantage les concepts de switch et case ; je comprends de mieux en mieux des aspects géométriques pour dessiner des formes dans Processing
  • @lyd.sanaa : j’ai confirmé ma compréhension de la structure du code grâce à l’exercice de tout à l’heure ; je me suis enfin lancée à écrire des lignes de code moi-même, même si ce n’était que pour dessiner quelques formes géométriques
  • @lyd.sanaa : j’ai appris à utiliser entièrement la page « Références » de la documentation de Processing (avant je n’utilisais que la description et les exemples), et j’en ai compris l’utilité
  • Nicolas : j’ai amélioré mes connaissances en utilisation des classes, et j’ai appris comment sauvegarder des données générées lorsqu’on appuie sur un bouton ; je ne sais pas encore dans quelles situations utiliser les classes
  • tout le groupe : git est plus compliqué que ça en a l’air, on a un petit soucis de versionnage ; on a été confrontées au problème de merge, quand on essaie de regrouper du code écrit parallèlement par deux personne différentes
  • @lyd.sanaa : j’ai appris man, c’est intéressant et ça s’utilise sans connexion

Journal du projet Sin-Cos du mercredi 23 octobre

  • @Mohamed : j’ai confirmé mes bases avec l’exercice de l’après-midi ; je n’ai pas été très convaincu/je n’ai pas très bien compris la différence entre void et les types de fonctions ; je faisais initialement la différence avec le fait qu’une fonction déclarée void ne retourne pas de valeur
  • @Mohamed : j’ai appris comment faire du scripting bash dans vim pour appeler des logiciels extérieurs aux dépôts Debian ; je sais que je peux installer ces logiciels vers le dossier /opt/ ; j’ai aussi découvert le fichier vimrc qui permet de modifier le comportement de vim (la coloration syntaxique, numérotation des lignes…), c’est aussi dans ce fichier que j’écrirai une ligne qui permettra d’utiliser d’autres logiciels (travail en cours) pendant que j’édite certains fichiers ; ça simplifie de pouvoir tout faire au clavier que d’avoir à utiliser la souris
  • @Gwenaelle : c’est en cours, j’essaie de lier le Discourse où on fait le journal, vers un serveur Discord où on peut recevoir des alertes pour avoir plus rapidement les journaux qui sont postés
  • @Gwenaelle : c’était intéressant d’écouter à propos de void et de mettre des définitions plus claires sur les types et les fonctions et ça me parait plus facile à expliquer maintenant