Demo-Live

→ Catalogue d'outils dédié au live-coding de démo.

Inscrit dans une sous-culture informatique qu'est la démoscène¹. et son univers graphique chargé d'histoire et de jargons techniques, Demo-Live est un espace en ligne de live coding conçu pour la réalisation de démos². Il découle d'une curiosité pour la culture graphique du Web, d'une envie d'explorer et de partager des expériences créatives nouvelles. En reprenant les principes du collage et du bricolage informatique, on retrouve sur cet espace de travail, un répertoire de micros-programmes, dans lequel l'utilisateur pioche et combine divers effets graphiques mêlant trames et contenu textuel. La page Web devient alors une toile mouvante qui ne cesse d'évoluer, mettant en relation animations générées et lignes de code. Le tout s'accompagne d'une galerie d'images, d'objets imprimés et d'un catalogue web-to-print pour présenter l'outil et les formes nouvelles générées depuis celui-ci. Demo-Live est un outil de performance graphique qui explore une nouvelle manière d'aborder le code et de créer sur le Web.

→ 1: Création artistique sous forme de programme informatique, fondée sur les trois domaines que sont : la musique assistée par ordinateur, l’infographie et la programmation.

→ 2: Petites animations distribuées avec les jeux et logiciels piratés, servant ainsi de signature au groupe qui avait réussi à les cracker. Aujourd'hui totalement désolidarisées du monde du piratage.

Ressources

→ Demozoo - histoire & archive
→ Pouet - wiki demoscene
→ Demotool gallery
→ Asciiart - img to ascii
→ FIGlet Fonts - exemple : Patorjk - font ascii
→ Bitmap Fonts - exemple : Raphael Bastide - Demoscene fonts
→ Oldschool pc fonts

Voir la to do list de l'enfer : marjorieb.

9. Programmes

Fonctionnels :

(☻) Wavemaker
(☻) Disco
(☻) Ascii
(☻) Iso
(☻) Glitch

En developpement :

Diagram
Kaleidoscope
Labyrinth
Ballbox
Puzzle

Filtre Typo :

Ascii
Glitch

(☻) = Imprimé
Attention : les noms ne sont que temporaires !

8. Jargons

Liste de noms (programmes):

→ ACK - Acknowledge (An exclamation of surprised | politely interrupt someone to tell them that you understand.)
→ Back door - A hole in the security of a system deliberatly left in place by designers or maintainers.
→ BAD - Broken As Designed (Said of a program which is bogus due to bad design rather than due to bugginess.)
→ Banana problem - Not knowing where or when to bring a production to a close. (from the little girl who said "I know how to spell 'banana' but i don't know when to stop.")
→ Big Win - Serendipity (to win big is to experience serendipity.)
→ Boxology - The fine art of drawing diagrams using the "box" characters.
→ Brittle - Functional but easly broken by changes.
→ Buffer overflow - What happens when you try to stuff more data into an holding area than it can handle.
→ Brute force - Primitive programming style.
→ Canonical - Usual or standard state of something.
→ Cruncha cruncha cruncha - An encouragement to a machine bogged down.
→ Display hack - A program with the same approximate purpose as a kaleidoscope : to make pretty pictures.
→ Frobnitz - An unspecified physical object, a widget. (Also refers to electronic black boxes.)
→ Hamster - A particularly slick little piece of code that does one thing well.
→ Jiffy - The duration of one tick of the computer's system clock. (Also expression that means "certanly not now and possibly never".)
→ Joe code - Code badly written and possibly buggy.
→ Nailing jelly - Used to describe a task thought to be impossible.
→ Macdink - To make many incremental and unnecessary cosmetic changes to a program of file.
→ Modulo - Mathematical formulation.
→ Mouse ahaed - Point-and-click analog of "type ahead".
→ Mouse dropping - Pixels which are not properly restored when the mouse pointer moves away from a particuar location on the screen, producing the appearance that the mouse pointer har left behind droppings.
→ Replicator - Any construct that acts to produce copies of itself. (idea, living organism, program automaton ,robot, etc.)
→ Twiddle - Tilde but also a small and significant change to a program. Usually fixes one bug and generates several new ones.
→ Weeds - Refers to development projects or algorithms that have no possible relevance or practical application.

Mots clés (interface):

→ Beta - Anything that is new and experimental is in beta. (Add it to names whan they're new ?)
→ Bits - Informations.
→ Bogus - Non-functional.
→ Brain dump - The act of telling someone everything one knows about a particular topic of project.
→ Clone - Exact duplicate.
→ Flush - To delete something, usually superfluous.

Mots clés (nom projet):

→ Demo
→ Library
→ Serendipity
→ Beta (in the first place)
→ Index
→ Tools
→ Catalog

→ Index.tools
→ Indemodex.tools
→ Demodex.tools
→ In-demo-dex.tools
→ Demolog.tools
→ Demo's catalog : demo-s-catalog.tools
→ Demo-live : demo-live.tools ☺

7. Textes

→ Diego Gomez Venegas, Designer as Hacker, (2012).

The hacker is a radical activist who seeks to construct a new understanding for the techno-political layer of contemporary cultures.

Tinkering means : trying to repair or improve something without having the proper skill or knowledge.

An instigator, through audacity, seeks to know and mastering technology to discover what is hidden.

Hackers are machines that explore possible futures.

Critical thinking, reflection, and experimentation are crucial capacities for designing, ans they must be protected and developed.

Cette dialectique entre la maîtrise de techniques complexes et une courageuse conviction d’expérimenter au sein de la culture, doit définir le caractère de ce nouvel acteur : le designer-hacker.

→ The Mentor, extrait de La conscience d’un hacker, (1986).

We exist without skin color, without nationality, without religious bias... and you call us criminals. You build atomic bombs, you wage wars, you murder, cheat, and lie to us and try to make us believe it's for our own good, yet we're the criminals.

Yes I am a criminal. My crime is that of curiosity. My crime is that of judging people by what they say and think, not what they look like. My crime is that of outsmarting you, something that you will never forgive me for.

→ Massimo Banzi, Dictionnaire étudiant d’Oxford, 726.

Essayer de réparer ou d’améliorer quelque chose sans avoir les compétences ou les connaissances appropriées.

→ Tim Berners-Lee, World Web Forum de Zurich, (2020).

Internet au départ c'est [...] connecter tout le monde au même niveau, pour créer un réseau décentralisé.

N'importe quelle toute petite chose peut avoir de l'intérêt, puisque Internet s'adresse au monde, il y aura de toute façon toujours assez sur toute la planète pour créer un public, un marché.

La liberté et la créativité sur le Web ont régressé.

Il n'y a plus de créativité : vous pressez des boutons que -inséret n'importe quel réseau social- met à votre disposition.

Il n'y a plus de comètes dans le monde technologique mais des énormes entités solidement installées.

Le Web n'est plus un outil mais la finalité, la centralisation l'a emporté.

L'innovation a horreur de la concentration.

→ Imprimer The pirate book

6. Et on mute le projet !

→ Bibliothèque graphique / logicielle.
→ Micro-programmes
→ Visuels (démos) → Print (plotter)
→ Galerie (images) → Print (objet édité)

Demomaking ou demoscene = Productions informatiques graphique/musique/animation.
→ Esthétiques et/ou techniques.

→ Inscrit dans l'univers de la Scène Démo & Warez mes images seront le résultat de la combinaison : informatique et graphisme.
→ Création d'images fixes ou en mouvement, mêlant creative coding et trame.

BIBLIOTHEQUE / RÉPERTOIRE
→ Espace de stockage qui convoque une thématique, dans laquelle j'expérimente.
→ Regrouper pour faire des liens.

MICRO-PROGRAMMES
→ Outils qui n'exécute qu'une fonction mais qui la font bien.
→ Une fonction qui se sufit à elle seule, mais qui peut être intégrée / combinée à d'autres.

Je veux partager ma passion.
Laquelle ?
Celle du creative coding, créer, générer des images à l'aide des langages de programmation.
Quelle sorte d'image ?
Je m'intéresse à la grille, au motif, au pixel, à la trame. J'y trouve un intérêt graphique, quand la création passe par un cadre normé et définit par des règles, un protocole ou encore une formule à exécuter.
Dans quel but ?
Construire ma boîte à outils, mon corpus de formes. L'idée est de construire mon propre bagage graphique. Un répertoire d'outils, de formes, d'images, de codes, de règles, etc.
À destination de qui ?
De moi, principalement, mais basé sur une philosophie de l'open source, donc ouvert et accessible à tous. Si la cible de départ c'est moi, alors c'est aussi à destination des étudiants et/ou designers graphiques juniors. Des gens curieux, qui se questionnent sur leur rapport aux outils. Des aventuriers à la recherche de diversité graphique et d'expérimentation.
Quelles fonctions auront ces outils ?
Générer des images : trames et textures, fixes et animées, à travers divers techniques : p5js, paper.js, etc.

Répertoire
→ d'outils dédiés à la création de trames et de textures.
→ d'images (galerie).
→ de codes sources accessibles.
→ d'impressions.

5. On commence à bidouiller ...

Les 3 grands axes de ce projet :

[programmation python - p5js | UI UX design]
→ Création d'un automate cellulaire à destination de la conception graphique.
[méthodologie et contexte]
→
[objet édité et recherches]
→ Mener des recherches sur les automates cellulaires, en parallèle des turing-complet et de l'art génératif.

Le pourquoi, à quoi ça sert ?

→ Matérialiser le code en mêlant algorythme et impression. Segmenter le processus de création pour l'élever au même rang que le résultat final, le rendre tangible / concret.
→ Les maths et le code rencontrent la même problématique : souvent vu comme pas assez explicite. Mon enjeux ici est de combiner les deux notions au seins d'un même projet et venir créer des visuels avec pour le rendre plus accessible - compréhensible.
→ Citation inspirante : "Nous utilisons la logique pour concevoir les conditions dans lesquelles le processus peut se dérouler!"

À venir ...

→ Ajouter fonctions pour commencer au niveau 0 de vie et composer sa propre génération au clic.
→ Modifier les règles, créer des déclinaisons, des variantes.
→ Intégrer un éditeur de texte au processus.
→ Travail + recherches typographiques (type : pixel / formes géométriques).
→ Explorer différentes formes graphiques.
→ Déterminer les enjeux du projet, trouver un point de jonction entre algorythme et design graphique. (voir le "pourquoi ?" ↓↓)
→ Déterminer une forme finale des ateliers (print : affiches, fanzines ?) (numérique : pages génératives-intéractives ?)
→ Penser la forme graphique de l'objet édité de mes recherches.
→ Penser la documentation/retranscription des ateliers.

Phase 1 - Créer les règles

Étudier les notions d'aléatoire et de hasard dans les algorythmes, les tester et les appliquer.

Phase 2 - Composer avec du texte

Créer des lettres avec des pixels, puis faire évoluer les carrés en formes modulaires.

Phase 3 - Segmenter le processus

Décliner le processus de création à travers divers techniques d'impression, rendre les étapes tangibles.

Phase 4 - Partager le résultat

Incorporer des paramètres de modifications aux algorythmes pour les rendre appréhensible dans le cadre d'ateliers découvertes.

Phase annexe - Recherches

Construire son propre environnement de travail (outil) pour créer des répertoires (formes, notions, lexiques, références) et créer des connexions.

Je commence à me créer un petit environnement de travail sur mon extension linux-ubuntu.
Je cherche des extensions, des plugins utiles comme : pygame, cellular automaton+Pypi - automaton.
Je commence à coder :
→ Un automate cellulaire (type : jeu de la vie)
→ Des fonctions qui convoque l'utilisation du clavier ("entrer" pour lancer la génération, etc.)
→ L'adapter au format d'impression (A4).

4. Et finalement on revient aux sources ...

Le jeu de la vie, tout part de là.
↓↓↓

– Que voulez-vous faire ?

→ Concevoir un automate (cellulaire), voir plusieurs, destinés à la conception graphique. (Penser des règles, une grille, un univers graphique et son lexique)
→ Proposer des ateliers de creative coding basés sur cet "outils".
→ Mener des recherches autours des Turing-complet et des automates, en parallèle de l'art génératif pour en faire un objet édité. (posters génératifs/ micro-édition avec couverture générée)

– Comment comptez-vous le faire ? (techniquement)

→ Build env - makedir file.py - et me documenter encore et encore !
→ Langages de programmation : python, javascript (à développer au fur et à mesure).
→ Logiciels open source : scribus, inkscape ...
→ [soit] Outils en ligne.
→ [soit] Outils à utiliser depuis un environement sur Linux.°°

°°Option la plus intéressante et envisagée. Techniquement parlant, beaucoup plus challengeant et formateur.

– Dans quel contexte ?

→ Contexte scolaire et/ou extra-scolaire : cours à l'ESAD ou à la Fac informatique, cours publiques (récurence des ateliers sur une période plus longue), atelier/workshop (période courte et intensive pour aborder un usage spécifique du code et des algorythmes).

– Pourquoi voulez-vous le faire ?

→ Matérialiser le code en mêlant algorythme et impression. Segmenter le processus de création pour l'élever au même rang que le résultat final, le rendre tangible / concret.
→ Les maths et le code rencontrent la même problématique : souvent vu comme peu explicite. Mon enjeux ici est de combiner les deux notions au seins d'un même projet et venir créer des visuels avec pour le rendre plus accessible - compréhensible.
→ Citation inspirante : "Nous utilisons la logique pour concevoir les conditions dans lesquelles le processus peut se dérouler!"

– Qui peut vous aider et comment ?

→ Julien B. : penser le projet | code.
→ Corentin B. : organisation des ateliers au sein de l'école | code.
→ Nicolas D. : évolution graphique du projet.

– Quelles relation votre projet a-t-il avec vos pratiques antérieures ?

→ Un intérêt pour la programmation | l'art génératif | le creative coding | la pedagogie du code.
→ Tous mes projets en web design | mon mémoire | mon projet de DNA | notre workshop "Manifestes !".

– Quelles sont vos références (actuelles et potentielles) ?

→ Références
→ Beaucoup de projets de creative coding, d'univers graphiques qui convoquent la trame, le pixel, la répétition, la génération.

3. Puis les idées évolues ...

Volonté de transmettre/véhiculer un intérêt pour les langages de programmation, comme outils de création.

Outils = manipulation, utilité, fonctions, interactions.
Création = artistique, graphique, visuelle, interactive.

→ Quels langages ? Quel contexte ? À destination de qui ?

Initiation au creative coding dans le contexte d'un atelier-workshop (un temps donné, composé d'une thématique/consigne et d'une production finale).
→ Accessibilité - Lidique - Pédagogique.
→ Contexte/thématique : utilisation du code pour produire un objet numérique final.
+ Guide du code.

Creative coding = visuel, sonore, interactif, passif.
→ Paper.js / P5.js / CSS.

Pourquoi vouloir transmettre des notions de programmation au travers d'un atelier ?

1. La programmation est une source de liberté d'expression, de créativité et d'expérience. Au même titre que l'écriture, seul le langage est différent.

2. La programmation est un outil accessibl, qui demande peu de ressources (parfois), qui est mallable et offre une capacité (quasi infinie) d'adaptation selon la demande ou les besoins.

3. La programmation est une passion et selon comment elle est amené, il est possible de partager cette passion.

Le partage au sens, partage de code et ouverture des projets logiciels au public (open source), est une pratique courante dans la programmation. Cela permet à d'autres développeurs de contribuer à l'amélioration du code, de corriger des bugs, ou d'ajouter des fonctionnalités. De nombreux projets, comme ceux sur GitHub, favorisent cette collaboration. Également une caractéristique de la pratique des makers / designers-hackers...

Hacker c'est s'approprier, apprendre, développer des connaisances, comprendre, PARTAGER et ÊTRE CURIEUX !

→ À destination d'étudiants / adultes curieux, débutants ou avancés.
→ Objectif : Inculquer des principes + offrir un cadre propice à l'expérimentation, la découverte des langages de prog.
→ Contexte : Atelier - Workshop.
→ Pourquoi : Prendre conscience que le processus impacte le résultat. Amener une nouvelle vision d'approche.

We use logic to design the conditions through which the process can take place !
Nous utilisons la logique pour concevoir les conditions dans lesquelles le processus peut se dérouler !

→ Comment : Proposer des ateliers dans des milieux scolaires.
→ Documenter : Créer un outil protocolaire pour documenter les ateliers.

2. Au tout départ ...

Créer un kit d'apprentissage du code pour "débutant" et/ou curieux.

→ Comment rendre + concret les langages de programmation ? LA programmation ?
→ Comment matérialiser le code pour le rendre - abstrait ?

Le code est souvent associé à quelques choses de compliqué, abstrait et inaccessible (en terme de logiciel et de connaissances.)
↓↓
Déconstruire tous ces apprioris, trouver une solution à travers mon projet.

Le Projet
→ Édition (web-to-print)
= guide pour expliquer et apprendre les bases du code.
→ Progammation d'un outils / concepte.
→ Construction d'objet tanjibles.
= Matérialiser les balises HTML et les attributs CSS.
→ Identité graphique du produit : kit.

Qu'est-ce que les bases du code ?
→ les logiciels / langagues.
→ html / css.
→ les balises.
→ les enjeux

Décider des règles, des consignes pour délimiter un cadre et définir le but final.
Quel est le rôle de l'utilisateur ? Quelle ligne directrice ?

Quel résultat final ?
→ Creative coding ? oui mais quoi ?
→ Une page web ? (type Sundaysites.cafe ?)
→ Un outil intéractif ?

Amener l'utilisateur à créer ses propres outils !
(cf. Raphaël Bastide → Références)

Penser à un univers graphique : internet des années 2000, la warez-scene.

1. Questions | Réponses

– Que voulez-vous faire ?
– Comment comptez-vous le faire ?
– Quel est votre calendrier ?
– Dans quel contexte ?
– Pourquoi voulez-vous le faire ?
– Qui peut vous aider et comment ?
– Quelles relation votre projet a-t-il avec vos pratiques antérieures ?
– Quelles sont vos références (actuelles et potentielles) ?