Jump to: navigation, search

Conference::La programmation comme medium artistique

Classpolymorph 1 1 p node a25d15a4ef4a8d45f2b546a35182f5402 cgraph.png

Présentation

"La genèse de nos languages de programmation a ainsi tendance à ressembler à cette machine. Mais l'ordinateur n'est pas tant une machine qu'un outil d'amplification de l'esprit, voir ce qu'on pourrait appeler un média expressif d'un genre nouveau. Par conséquent, les outils ressemblent de moins en moins à des machines et de plus en plus à des parties de notre esprit[...]"- Bruce Eckel, Thinking C++, p. 35

Après une brève histoire de l'évolution des languages informatiques, un positionnement vis-à-vis de l'histoire de l'art (musique & arts plastiques) et une redéfinition du terme arts numériques, François Zajéga vous propose une plongée au coeur de sa pratique artistique, dans laquelle le code n'est plus un activateur mais devient matière première. En vous présentant la manière dont il travaille, il abordera les implications du medium dans la conception et la nature de ses productions.

Structure

  • 2 heures de conférence: beaucoup et peu
  • public étudiants en art => on peut être précis

La machine

rapport hardware/software => intimité, ~ fonction des organes et organes

OS? rôle et familles

  • Windows
  • OSX
  • Linux
    • RedHat
    • Ubuntu

Unix timeline.en.svg.png

Interface graphique

Apparition: début des années 80, rend accessible l'ordinateur au grand public.

Historique

Windows1.0.png

Windows 1.0, the first version, released in 1985

Apple Macintosh Desktop.png

Original 1984 Macintosh desktop

NeXTSTEP desktop.png

1989 NeXTSTEP desktop

Moteurs de fenêtres

C'est le contexte général d'exécution des tout ce qui concerne l'affichage à l'écran. Les seuls cas où une application peut échapper à ce contexte est quand elle reprend la main sur la carte graphique en direct sans passer par cette couche. Notamment utiliser par les casques de VR.

Windows-10-hands-on-start-menu-photoshop.jpg

Osx yosemite-finder-view.jpg

Unity-desktop.png

Gnome-desktop 1.png

Cinnamon15.png

CrunchBang-11-quot-Waldorf-quot-Linux-Distro-Released-with-a-Bang-Screenshot-Tour.jpg

ION3 Screenshot.jpg

Interfaces d'applications

Photoshop-ui.jpg

Libreoffice-writer-5.0.3.2.png

Finalcut-ui.jpg

Tanuki-20160305.blend-004.png

Iannix-ui.jpg

V4.png

Pd123.jpg

  • expliquer ce que produit l'UI > restriction des potentialités à des actions préétablies

Étude de cas, UI

Dans certains projets numériques nécessitant beaucoup de paramétrages, certains artistes développent une interface graphique spécialisée pour le projet.

Carnages

Carnages 680.png Carnages 681.png Carnages 682.png Carnages 683.png Carnages 684.png Carnages 685.png

Moon

by Reza

Interface textuelle

Aussi appelée Command-line interface, elle apparait avec les premiers ordinateurs minus d'un écran au milieu des années 60.

Interface textuelle avec un OS, à la différence de l'interface graphique.

Passer en console sur linux ( CTRL + ALT + F1 )

terminal

Voir histoire du terminal

DEC VT100 terminal.jpg

VT100 - August 1978.

Terminal-atop-running.png

Atop, moniteur d'acivité sous linux, 2016

Linux command-line. Bash. GNOME Terminal. screenshot.png

Lignes de commande sur linux.

Windows PowerShell 1.0 PD.png

Powershell sur windows.

exécution de programme

crop & resize et transcodage d'un fichier video avec ffmpeg:

ffmpeg -i vid.mp4 -vf crop=iw:ih-50:0:0,scale=iw*0.5:ih*0.5 -an -qscale 1 -vcodec qtrle vid.mov

resize à 50% d'une image avec image magick:

convert test.jpg -resize 50% -quality 90% cropped/test.jpg

déblocage du secure boot pour installer refind sur osx:

csrutil disable

récupération de la configuration réseau d'une machine sur système unix:

ifconfig 

récupération de la configuration réseau d'une machine sur système windows:

ipconfig 

retourne

enp59s0   Link encap:Ethernet  HWaddr 80:fa:5b:21:58:e3  
          inet addr:192.168.3.91  Bcast:192.168.3.255  Mask:255.255.255.0
          inet6 addr: fe80::8fd1:c94e:29d1:2a55/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:2430535 errors:0 dropped:0 overruns:0 frame:0
          TX packets:1277937 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000 
          RX bytes:3491865877 (3.4 GB)  TX bytes:116350367 (116.3 MB)
          Interrupt:18 

lo        Link encap:Local Loopback  
          inet addr:127.0.0.1  Mask:255.0.0.0
          inet6 addr: ::1/128 Scope:Host
          UP LOOPBACK RUNNING  MTU:65536  Metric:1
          RX packets:20154 errors:0 dropped:0 overruns:0 frame:0
          TX packets:20154 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1 
          RX bytes:2881311 (2.8 MB)  TX bytes:2881311 (2.8 MB)

wlp61s0   Link encap:Ethernet  HWaddr 9c:b6:d0:06:b5:3b  
          UP BROADCAST MULTICAST  MTU:1500  Metric:1
          RX packets:0 errors:0 dropped:0 overruns:0 frame:0
          TX packets:0 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000 
          RX bytes:0 (0.0 B)  TX bytes:0 (0.0 B)

Finir en expliquant le lien entre UI et process.

Programmation

La programmation consiste à écrire un ou des fichiers textes respectant la syntaxe d'un language. Ce texte est ensuirte transformé en code machine (0 et 1), envoyé à un des processeurs de la machine pour y être exécuté.

Languages descriptifs

Catégorie de languages permettant de structurer des informations sans intégration d'une procédure, non-exécutables.

Cas typique: HTML - HyperText Markup Language.

Grâce à un esemble de balise définient par le W3C, le contenu de la page est structuré de telle manière à pouvoir être formaté à l'affichage.

<!DOCTYPE html>
<html>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

L'HTML est basé sur l'XML - Extensible Markup Language, qui permet de définir ses balises arbitrairement.

Exemple de configuration d'un projet Carnages au format xml:

<skinstrip>
   <datarate fps="25.000000000"></datarate>
   <h value="0.660000026" range="0.143000007" enable="1"></h>
   <s value="0.000000000" range="0.000000000" enable="0"></s>
   <l value="0.000000000" range="0.000000000" enable="0"></l>
   <alpha min="0.078299999" max="0.205200002"></alpha>
   <cue in="0.000000000" out="0.892000020"></cue>
   <falloff value="0"></falloff>
...

Autres languages descriptifs:

Languages fonctionnels

Tous les languages exécutables, qui permettent donc la notation de procédure, de calculs et d'algorithmes

Scripts / non compilés

Une grande proportion de ces languages sont non-typés et ne dépendent souvent pas de l'OS sur lequel ils sont exécutés - cross-platform - , ce qui les rend particulièrement facile à appréhender par les novices.

Deux des plus connus: Javascript et Python.

Le javascript est intégrés dans la plupart des navigateurs web et est relativement standardisé.

var person = {
   firstName : "John",
   lastName  : "Doe",
   age       : 50,
   eyeColor  : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";

Il utilise les point virgules pour marquer les blocs d'instructions et les accolades pour délimiter des blocs de code.

Le python a choisit une approche basée sur les tabulations et les retour-lignes pour délimiter les blocs de codes:

import re
for test_string in ['555-1212', 'ILL-EGAL']:
   if re.match(r'^\d{3}-\d{4}$', test_string):
       print test_string, 'is a valid US local phone number'
   else:
       print test_string, 'rejected'

Le python peut être excuté au niveau OS et il bénéficie d'une très large bibliothèque d'extensions, ce qui en fait un languages populaires dans plusieurs secteurs, notamment le développement web.

Les languages de scripts dépendent d'un interpréteur, un programme installé dans l'OS pour le python ou le javascript engine des navigateurs pour être activés. Ils ne sont pas en eux-même des exécutabes!

Autres languages de script:

  • PHP développement web, server-side,
  • Bash, language de communication avec les OS Unix-based, pouvant être sauvé sous forme de scripts,
  • VBScript, équivalent du bash sous Windows,
  • Lua, équivalent du python, se retrouve dans plusieurs game engines,
  • etc.
Semi-compilés

Le language le plus connu de cette catégorie est la Java. Il s'agit d'un language orienté-objet et fortement typé. Sa particularité est de s'exécuté au sein d'une machine virtuelle (JRE) qui doit être installée sur l'OS hôte. Cette machine virtuelle étant spécialement configurée en fonction de leur hôte, le code des applications est compilé juste avant leur exécution, ce qui rend les applications Java cross-platform.

public class MyFirstJavaProgram {

    public static void main(String []args) {

        System.out.println("Hello World");

    }
}

Le framework/IDE s'appuyant sur cet avantage est processing.org.

Processing-arduino-ui.jpg

Compilés

Famille de language convertit en code machine au moment de leur [[wikipedia:Compiler|compilation]. Cette opération rend difficile la portabilité du code entre des OS et des machines différentes, puisque le code du programme interagit directement avec l'OS sur lequel il est compilé, sans passer par un pont comme pour les languages de script ou semi-compilés. Divers systèmes (comme cmake) et frameworks (Qt) facilitent cependant le portage.

Un des languages les plus utilisé de cette famille est le C++. Il est orienté-objet et fortement typé.

#include<iostream>
using namespace std;
int main() {
    for(int i=0;i<=5;i++) {
        for(int j=0;j<=i;j++) {
            cout<<j;
        }
       cout<<endl;
   }
   return 0;
}

Openframeworks est écrit dans ce language, ainsi que les études de cas Carnages et Moon.

Openframworks doc.png

Autres languages compilés:

  • C, un language procédural (non orienté-objet) qui sert de base au C++,
  • Go, un language créé par google,
  • C# ou C sharp, utilisé par Unity3D,
  • etc.

Générations

Generation First Second Third Fourth
Code example

10101010011000101
10011010100000010
11111111101000101

LDA 34
ADD #1
STO 34
x = x + 1
body.top { color : red;
           font-style : italic
}
Language (LOW) Machine Code (LOW) Assembly Code (HIGH) Visual Basic, C, python etc. (HIGH) SQL, CSS, Haskell etc.
Relation to Object Code
(generally)
-- one to one one to many one to many

source: Editing A-level Computing/AQA/Computer Components, The Stored Program Concept and the Internet/Fundamentals of Computer Systems/Generations of programming language

Étude de cas, code

Genealogy

Rapport texte - processus - image.

Le processeur devient l'endroit où se génère la pièce, l'image atteste des milliers d'opérations effectuées.

Le champ lexical de l'anthropologie permet de construire la logique d'exécution, qui est ramenèe lorsque le programme fonctionne à des résolutions de problèmes simples: création, destruction, changement d'état, déplacement, etc.

Class genealogy5 ad90f7a61c1e11c528285e23068378ab7 cgraph.png

Voir doxygen en local.

Iterations 2016

repository: http://gitlab.constantvzw.org/frankiezafe/iterations2016

Iteration2016 27854357602 435a935ed5 z.jpg

Iteration2016-network.jpg

Iterations II
=============

Applications
------------

+ To configure, start and use the Raspberry Pis, see the [Configuration](#configuration) section of this page.
+ [Name and roles](#roles) of the points in the big room @imal.
+ Go to [development notes](#dev) for all technical details

Configuration
=============

### Network Map
```
10.0.0.11 francois.local
10.0.0.12 julien.local
10.0.0.13 reni.local
10.0.0.14 claire.local
10.0.0.15 peter.local
10.0.0.16 pascale.local
10.0.0.17 miriam.local
10.0.0.18 annie.local
10.0.0.19 donatella.local
10.0.0.20 antoine.local
10.0.0.21 baptiste.local
10.0.0.22 femke.local
10.0.0.23 rafaella.local
10.0.0.24 tom.local
10.0.0.25 stefan.local
```

Some routers acting as switches:  
(in case they need to be configured differently)  
```
10.0.0.1
10.0.0.2
```
Map
---
![Network map](network-vernissage.jpg)

Roles
-----

In the François's navigation order.

**10.0.0.16 pascale.local**
+ video player on the wall in the entrance
...
Shiv Integer

Shiv integer-on-thingiverse.png

Concepts

La programmation consiste à décrire textuellement, en suivant une notation logico-mathématique et la syntaxe d'un language, une suite d'opérations simples, accomplissable par une machine de turing - théorie de la calculabilité.

Dans les languages orienté-objets, cette description est regroupée par blocs, appelé objets. Ces entités sont capables d'appliquer à elle-même ou à d'autres des opérations. L'intelligence du programme est donc découpée en sous-ensembles ayant une certaine autonomie.

Les classes, qui contiennent la description de ces objets, ne font que décrire la manière dont les procédure s'appliquent en cours d'exécution. La programmation consiste donc à décrire de manière cohérente le comportement d'objets abstrait, qui n'existent que potentiellement dans le code écrit.

Le rapport à l'écriture est limité à l'inscription de signes organisés en lignes. La différence essentielle du code par rapport au texte destiné à être lu par des humains est qu'il n'est pas le produit final. Il est destiné à être converti en code machine et envoyé aux différents processeurs de la machine.

Lorsqu'il est exécuté, le programme n'est plus modifiable, même si certaines méthodes permettent d'altérer son comportement. Il ne s'agit pas ici de l'interactivité, puisqu'il n'y a pas de modification du code en lui-même. Il s'agit plutôt des outils de debuggages.

Ces différents temps de la programmation ( écriture et exécution), peuvent être mises en parallèle avec la théorie de la connaissance de Platon. La phase d'écriture est purement abstraite et (heureusement) pleinement intelligible. La suite d'opération qui seront effectuées par le programme est suivable mentalement et à un rythme humain. Cette phase repose sur une abstraction mentale pure, contrainte par la syntaxe et les mécanismes inhérents au language utilisé.

Lors de la compilation, le texte est transformé en binaire. Pour ce faire, tous les mots différents des termes protégés du languages sont remplacés par des appels permettant d'allouer des espaces mémoires, le tout étant ensuite converti en une longue chaîne de 0 et de 1.

Dès la fin de la compilation, le code dans sa version intelligible a disparu. Viens ensuite la phase d'exécution. La suite d'instruction prévue dans le texte est alors effectuée à la vitesse CPU.

Rapport du temps humain et du temps machine: à 3Ghz, un processeur effectue 3.145.728 opérations par secondes. Une opération est un calcul simple, comme l'addition ou la soustraction de deux chiffres. Comparé au temps nécessaire à un cerveau humain pour faire une addition, la machine semble donc 3 millions de fois plus rapide. C'est sans compter que le CPU n'a pas la place suffisante pour stocker tout le contenu du disque dur dans ses espaces mémoire rapide. Et qu'il ne peut effectuer que des calculs finis, ce qui contraint toute opération complexe à une conversion dans sa forme simplifiée. Le chiffre de 3 millions est donc à réduire fortement en fonction des tâches qui lui sont demandées.

Il reste néanmoins difficile de suivre mentalement la complexité de l'exécution d'un programme.

Leon-7-platon-la-thorie-des-ides-et-lanalogie-de-la-ligne-2-638.jpg

Quelque soit la sortie du programme (une image, un son, un fichier, l'envoi d'un paquet sur le réseau, la destruction d'un fichier, etc), nous ne pouvons en temps qu'humain seulement constater le résultat produit, la suite des opérations simples nous étant inaccessible. Seule la trace laissée par le programme est accessible, et si il ne s'agit pas de robotique, c'est au travers d'autres programmes que cette trace nous apparait. Dans le cas de la robotoique ou de n'importe quelle machine outil, l'action du programme nous apparait comme tangible.

Allegorie-caverne-1.jpg

Il est néanmois essentiel de conscientiser la matérialité du processeur et de la du programme en lui-même. Les opérations simples effectuées sont effectuées via de transistors, micro-interrupteurs compressés par milliards dans les processeurs modernes. Même si leur taille est microscopique (au point de provoquer des problèmes quantiques), une opération dans un processeur consiste à modifier les propriétés de la matière.

SPST-symbol.png > Binaire!

George main sch.gif

Binary-fun-page261.gif

Notes

  • technique pour les techniciens / art pour les artistes / sciences pour les scientifiques: et léonard de vinci dans tout ça?
  • écriture == code? les différence fondamentales entre le language humain et le language machine
  • corps-esprit == hardware-software?
  • temps machine / temps humain
  • dématérialisation? - mythe de la machine abstraite - https://www.youtube.com/watch?v=rtI5wRyHpTg
  • au bord du réel
  • distance au processus et manque de retour aptique
  • le robot et l'avatar

Early Computers - Applications, Computer Graphics, Look at Future Uses - from 1960s

Code C++ non-compilé Éléments signifiants pour le compilateur

Ogre::Vector3 norm;
Ogre::Vector3 normX;
Ogre::Vector3 normY;
Ogre::Vector3 normZ;
bool ori_initX = false;
bool ori_initY = false;
for ( unsigned int i = start; i < limit - 3; i += 3 ) {
    Ogre::Vector3 ab =
            md->vertices[ md->indices[ i ] ] -
            md->vertices[ md->indices[ i + 1 ] ];
    Ogre::Vector3 ac =
            md->vertices[ md->indices[ i + 2 ] ] -
            md->vertices[ md->indices[ i + 1 ] ];
    norm = ab.crossProduct( ac );
    norm.normalise( );
    bool iszero = isZero( norm );
    if ( ori_initX && isEqualOrInverse( norm, normX, true ) ) continue;
    if ( !iszero ) {
        if ( !ori_initX ) {
            normX = norm;
            ori_initX = true;
        } else if ( !ori_initY ) {
            normY = norm;
            ori_initY = true;
            break;
        }
    }
}

0x0000B457 0x0012FA56;
0x0000B457 0x0012FA01;
0x0000B457 0x0012FE04;
0x0000B457 0x0012FEC8;
bool 0x0012FF00 = 0x00000000;
bool 0x0012FF01 = 0x00000000;
for ( 0x00000A8 0x0012FF02 = 0x0012FE99; 0x0012FF02 < 0x0012FE98 - 0x00000011; 0x0012FF02 += 0x00000011 ) {
    0x0000B457 0x0012FF03 =
            0x0000EC32[ 0x0000EC57[ 0x0012FF02] ] -
            0x0000EC32[ 0x0000EC57[ 0x0012FF02+ 0x00000001 ] ];
    0x0000B457 0x0012FF04 =
            0x0000EC32[ 0x0000EC57[ 0x0012FF02 + 0x00000010 ] ] -
            0x0000EC32[ 0x0000EC57[ 0x0012FF02 + 0x00000001 ] ];
    0x0012FA56 = 0x0012FF03.0x0012FF8A( 0x0012FF04 );
    0x0012FA56.0x0000E013( );
    bool 0x0000AB05 = 0x0000AB05( 0x0012FA56 );
    if ( 0x0012FF00 && 0x0000AB12( 0x0012FA56, 0x0012FA01, 0x00000001 ) ) continue;
    if ( !0x0000AB05 ) {
        if ( !0x0012FF00 ) {
            0x0012FA01 = 0x0012FA56;
            0x0012FF00 = 0x00000001;
        } else if ( !0x0012FF01 ) {
            0x0012FE04 = 0x0012FA56;
            0x0012FF01 = 0x00000001;
            break;
        }
    }
}

Bibilographie

  • Le sujet digital, sous la direction de Claire larsonneur, Arnaud Regnauld, Pierre Cassou-Noguès et Sara Touiza - ISBN 978-2-84066-794-0
  • Humanoïdes. Expérimentations croisées entre arts et sciences, de Joffrey Becker, presses universitaires de Paris Ouest - ISBN 978-2-84016-202-5
  • Parole, écriture, code de N. Katherine Hayles, éditions les presses du réel - ISBN 978-2-84066-764-3

Web

CV

François Zajéga est un artiste programmeur vivant et codant à Bruxelles. Diplômé en infographie et en dessin académique, il s'est formé à la programmation en autodidacte. En 2010, il rejoint l'institut Numédiart de l'Université de Mons, grâce auquel sa production artistique va se teinter de recherche scientifique. Il est aujourd'hui assistant en arts numériques à Arts2, l'école supérieure des arts de Mons. Il travaille actuellement à la création d'objets hybrides, tout autant inspirés du jeu vidéo que des arts plastiques. Ses oeuvres sont régulièrement présentées en belgique et en france.