Arts numériques

Photo album, Cody Trepte, 2007

Stéphane Noel — 2011-05-06T08:31:39Z

Tags : binaire, livre, transmodal, conceptuel

"Photo album" se présente sous la forme d'une étagère sur laquelle sont rangés des livres consultables à la tranche noire. Sur la couverture, la description d'une photo souvenir. A l'intérieur, les données binaires de cette même image.

Les arts numériques exposent/invoquent souvent des processus, dont l'oeuvre présentée est le résultat déceptif. De ce point de vue, on ne peut s'empêcher de voir la une filiation avec l'art conceptuel, dont l'entreprise était de faire cheminer le spectateur depuis la matière morte - l'objet présenté -, à travers le procédé qui l'a généré, vers la pensée et ses multiples connections intellectuelles et émotionnelles, qui en sont l'origine.

Les livres de la pièce "Photo album", de Cody Trepte, un jeune artiste américain vivant à Los Angeles, sont dans cette lignée. Trepte cite d'ailleurs dans les titres de ses oeuvres Sol Lewit aussi bien que Alan Turing, comme si le pont entre la recherche sur l'intelligence artificielle et l'art conceptuel était évidente. C'est pourtant à Hanne Darboven, une des plus radicale des artistes conceptuelles, que l'on pensera avec cette pièce, ou l'information est à la fois gonflée - de l'image vers un texte binaire - et en même temps ramassée dans la forme du livre.

Hanne Darboven, EinJahrhundert, 1971

Les "Photo albums" ne nous permettent pas de voir sous forme iconique (analogique) la photographie. On serait tenté de dire "ne nous permet pas de voir l'original" mais, ironiquement, les données binaires constitue l'original. Les photos souvenir sont désormais réalisées avec des appareils numériques, et le tirage argentique est donc une interprétation analogique réalisée à partir d'un document numérique. C'est ce que nous jettent au visage les pages de 0 et de 1 sagement posés avec une police "monospace".

Trepte donne donc à voir deux signifiants, le texte évoquant sur le mode de la description humaine un contenu faisant appel à notre imagination, et un texte littéral décrivant l'image d'un point de vue digital. Les deux descriptions renvoient humains et machines dos à dos. Si la description digitale est plus exacte (elle décrit l'image morceau par morceau de manière exhaustive), elle est inutile dans le monde analogique où elle est projetée : personne ne peut lire ce livre. La description quant à elle est courte, synthétique, laissant apparaitre l'écriture descriptive comme un codec humain très puissant, une affirmation ironique de la supériorité des hommes sur les machines par leur capacité à faire sens, et agir par émotion. Car d'un point de vue digital, les livres posés sur l'étagère contiennent tous la même chose, des données brutes équivalentes.

Voir aussi la pièce "1 Year of Archived Email"

PDF : 40 pages avec des lignes alÃ©atoires

Stéphane Noel — 2010-10-23T22:37:00Z

Un script complet pour gÃ©nÃ©rer un livre de 40 pages avec couverture avant et arriÃ¨re. Le script lui-mÃªme gÃ©nÃ¨re des lignes avec un dÃ©placement alÃ©atoire. DÃ¨s que la ligne touche le bord de la zone dÃ©finie pour le dessin, une nouvelle page est crÃ©Ã©e et un nouveau dessin dÃ©marre. Une fois les 40 pages crÃ©Ã©e, le script s'arrÃªte.

Le code a des variables paramÃ©trables en tÃªte du script, pour dÃ©terminer l'amplitude des lignes, le nombre de pages, les marges du dessin, l'auteur du livre...

Chaque dessin est accompagnÃ© d'une numÃ©rotation de page, du dÃ©compte du nombre de lignes et du temps d'exÃ©cution du dessin.

//
// Livre aleatoire - octobre 2010
//
import processing.pdf.*;
PGraphicsPDF pdf; PFont myFont; // parametres du dessin, changer pour affiner
int nbpages=40; // nombre de pages
int marge=100; // marges Ã respecter
int deplacement=8; // dÃ©placement maximum entre deux iterations
String auteur="StÃ©phane Noel"; // variable du script
float posx,posy,p_posx,p_posy;
int compteur=1;
int nbsquare=0;
int startmillis=0; void setup() { size(594, 594); //String[] fontList = PFont.list(); //println(fontList); myFont = createFont("Aller-Light", 24); // police gratuite : http://www.fontsquirrel.com/fonts/Aller textFont(myFont,24); pdf = (PGraphicsPDF)beginRecord(PDF, "randomlinesbook.pdf"); // titre du pdf beginRecord(pdf); background(255); positionnebloc(); // nouvelle position de dÃ©part du dessin commencelivre(); // appelle la fonction qui cree la couverture fill(255); stroke(10); numerotation();
} void draw() { fill(255); line(posx,posy,p_posx,p_posy); p_posx=posx; p_posy=posy; nbsquare++; posx+=random(-deplacement,deplacement); posy+=random(-deplacement,deplacement); if(posx > width-marge || posx < marge || posy > height-marge || posy < marge) { // si la ligne sort de la zone fill(0); affichenbsquare(); afficher le nombre de lignes et le temps d'execution compteur++; fill(255); pdf.nextPage(); if(compteur < nbpages) { background(255); positionnebloc(); // nouvelle position de dÃ©part du dessin nbsquare=0; numerotation(); } else { // si le nombre de page est atteint finitlivre(); // genere la couverture arriere endRecord(); exit(); // Quitte } }
} void positionnebloc() { p_posx=posx=random(width*0.45,width*0.55); p_posy=posy=random(height*0.45,width*0.55);
} void numerotation() { float ty=height-(marge/2); textFont(myFont,8); fill(0); textAlign(LEFT); text("Page " + compteur,marge,ty);
} void affichenbsquare() { // calcule le temps de rÃ©alisation int duree=millis()-startmillis; float ty=height-(marge/2); textFont(myFont,8); fill(0); textAlign(RIGHT); text(duree/1000+ " secondes, " + nbsquare + " formes",width-marge,ty); startmillis=millis();
} void commencelivre() { // cree la couverture fill(0); textAlign(CENTER); textFont(myFont,30); text("The random line book",width/2,(height/2)-30); textFont(myFont,18); text(auteur,width/2,(height/2)+30); pdf.nextPage(); pdf.nextPage(); background(255);
} void finitlivre() { pdf.nextPage(); // une page blanche fill(0); // cree une page avec la date de crÃ©ation textAlign(LEFT); String texte="\nCe livre a Ã©tÃ© entiÃ¨rement gÃ©nÃ©rÃ© par un script.\n\nChacun de ses dessins part de la zone centrale de la page, et est composÃ© de traits d'une longueur de " + (deplacement*25.1)/72 +" millimÃ¨tres maximum dans n'importe quelle direction, Ã partir du trait prÃ©cÃ©dent." +" Chaque dessin s'arrete lorsque le bord de la zone de dessin est touchÃ©.\n\n" +"Ce livre est composÃ© de "+ nbpages +" pages. Il a Ã©tÃ© gÃ©nÃ©rÃ© le "+day() +"/"+month()+"/"+year()+" Ã "+hour()+":"+minute()+"."; textFont(myFont,12); text(texte,marge,marge+12,width-(marge*2),height-(marge*2)); textFont(myFont,10); text(auteur,marge,height-(marge+12));
} void keyPressed() { // pour interrompre n'importe quand (garde-fou) affichenbsquare(); pdf.nextPage(); pdf.nextPage(); finitlivre(); endRecord(); exit(); // Quit
}

PDF : Produire un pdf avec processing

Stéphane Noel — 2009-09-22T21:06:31Z

Processing est un logiciel ouvert, on peut lui greffer des librairies, des ensembles de fonctions qui permettent d'Ã©tendre ses possibilitÃ©s. Une de ces librairies, fournie avec processing, permet de gÃ©nÃ©rer les pdf.

Comme la librairie est fournie avec Processing, on ne devra pas l'installer, juste l'inclure dans notre sketch.

Pour cela, en tÃªte du script, avant le setup, on importe la librairie. Cette opÃ©ration invisible met Ã disposition le code de la librairie pour le reste de votre script. On peut Ã©crire le code ci-dessous ou aller dans Sketch/import library... et sÃ©lectionner "pdf".

import processing.pdf.*;

Une fois la librairie importÃ©e, on spÃ©cifie une taille Ã notre animation et par la mÃªme de l'animation. Les textes, les lignes, cercles, rectangles et mÃªme les formes en 3d peuvent Ãªtre exportÃ©es dans le pdf sous forme vectorielle, ce qui est confortable : on peut faire des poster gÃ©ants !

La mÃ©thode standard consiste alors Ã crÃ©er un objet pdf (crÃ©er un "objet pdf" vide), Ã dÃ©marrer l'enregistrement du pdf. Ce qui est dessinÃ© Ã l'Ã©cran est alors dessinÃ© dans le pdf. On peut durant cet enregistrement crÃ©er de nouvelles pages. On stoppe alors l'Ã©criture du pdf. Par sÃ©curitÃ©, on sort enfin du programme avec la fonction exit() ;

Le tout donne Ã§a :

// un script simple pour produire un pdf de plusieurs pages import processing.pdf.*; PGraphicsPDF pdf; // crÃ©er un objet pdf vide void setup(){ size(594, 842); pdf = (PGraphicsPDF)beginRecord(PDF, "coolpdf.pdf"); // on dÃ©marre l'Ã©criture background(255); } void draw(){ float taille=random(60); ellipse(mouseX, mouseY, taille, taille); // dessiner des cercles de taille alÃ©toire Ã l'endroit de la souris
} void keyPressed() { switch (key) { case ' ': // barre d'espace : page suivante pdf.nextPage(); // creer une nouvelle page background(255); break; case 'x': // x : pdf terminÃ© endRecord(); exit(); // Quitter pour Ãªtre sur que tout est ok break; }
}

Le code ci-dessus permet de crÃ©er diffÃ©rentes pages en appuyant sur la barre d'espace, et de stopper l'enregistrement avec la touche "x". Tant qu'on le laisse tourner, les cercle s'entassent dans la mÃªme page.

On peut mettre en pause un enregistrement, ou Ã©crire un pdf sans afficher son contenu dans l'animation, pour en savoir plus, consulter la documentation.

La page de reference sur le site Processing (la mÃªme se trouve dans l'aide du logiciel).

Stéphane Noel — 2008-12-11T00:22:02Z

Fpdf est une classe qui permet de gÃ©nÃ©rer des pdf sans librairie additionnelle. La documentation est en franÃ§ais pour une fois alors profitons-en.

Fpdf est une classe assez puissante qui permet de crÃ©er des pdf, d'y incorporer du texte, des images, ainsi que des Ã©lÃ©ments de types lignes, cercles, etc. Quelques contributions permettent d'Ã©tendre ses fonctionnalitÃ©s, pour faire des doubles pages notamment.

Ici le script que nous allons faire va gÃ©nÃ©rer un pdf de jaquette dvd, avec une tranche, une image d'illustration, un titre, un texte de prÃ©sentation, etc.

Le script complet est fourni en bas de cette page, il est commentÃ©. N'oubliez pas d'aller voir pour plus d'information la partie "manuel" du site de fpdf.

Le script envoie directement le pdf vers le navigateur, ce qui signifie qu'aucun fichier n'est crÃ©Ã© sur le serveur. Sauver le document sur le serveur est Ã©videmment possible.

SetAutoPageBreak(0); // importer la police sf_old_republic $pdf->AddFont('sf_old_republic','','92d32b2fabae934a986869823839779b_sf_old_republic.php'); // cree une page dans le document, sinon vide $pdf->AddPage(); // couleur de remplissage : noir $pdf->SetFillColor(0,0,0); // on crÃ©e la tranche avec un rectangle noir $pdf->Rect(127.5, 0, 15, 180, "F"); // importation de l'image en couverture en forÃ§ant la taille $pdf->Image('Will_code_HTML_for_food.jpg',142.5,45,127.5,170); // definir la police : sf_old_republic en 45 points // placement du pointeur et ecriture du titre $pdf->SetFont('sf_old_republic','',45); $pdf->SetXY(150,8); $pdf->MultiCell(100,15,'Will code PHP for food',0,"L"); // importation de l'image en couverture arriere $pdf->Image('Will_code_HTML_for_food.jpg',10,10,50,70); // descriptif // placer le pointeur pour le texte // definir le texte // ecrire le titre et texte avec multicell $pdf->SetXY(30,90); $pdf->SetFont('Arial','B',12); $pdf->MultiCell(100,5,'Will code PHP for food',0,"L"); $pdf->SetX(30); $pdf->SetFont('Arial','',9); $texte="Un film inoubliable, avec de vrais tramps et de vraies page en html 4, du php, du javascript, et du dÃ©buggage pour compatibilitÃ© avec les principaux navigateurs.\nLe sous-prolÃ©tariat gagne ce qui Ã©tait encore recemment des metiers Ã haut potentiel, que fait la profession ? Elle brade son savoir faire. \n\n'Epatant', nous dit le magasine Premiere."; $pdf->MultiCell(80,4,utf8_decode($texte)); // placer le copyright $pdf->SetXY(10,-10); $pdf->SetFont('Arial','I',8); $texte="Copyright Workplace testing crew"; $pdf->Cell(120,2,$texte); // le titre sur la tranche // couleur : blanc $pdf->SetTextColor(255,255,255); $pdf->SetXY(129.5,17); $pdf->SetFont('Arial','B',18); // moche bidouille : placer des retour chariot pour la tranche $texte="W\ni\nl\nl\n\nc\no\nd\ne\n\nP\nH\nP\n\nf\no\nr\n\nf\no\no\nd"; $pdf->MultiCell(10,7,strtoupper($texte),0,"C"); // sortir le pdf vers le navigateur $pdf->Output(); ?>

Plus : le texte Ã angle droit

La tranche utilise un texte mis Ã la ligne Ã chaque lettre. On pourrait cette partie plus Ã©lÃ©gante en opÃ©rant une rotation sur le bloc texte, ce qui est possible moyennant l'intÃ©gration d'un fonction supplÃ©mentaire disponible ici.

Pour utiliser des polices diffÃ©rentes que les polices de base, il faut les transformer et les dÃ©poser dans le dossier contenant la classe. Un peu compliquÃ©, mais une page de traitement a Ã©tÃ© mise Ã disposition pour faciliter le travail de conversion Ã partir d'une police ttf :
GÃ©nÃ©rer les fichiers .php et .afm Ã partir d'un fichier .ttf

Arts numériques

Photo album, Cody Trepte, 2007

PDF : 40 pages avec des lignes alÃ©atoires

PDF : Produire un pdf avec processing

GÃ©nÃ©rer un pdf avec FPDF

Plus : le texte Ã angle droit

GÃ©nÃ©rer des fichiers de police utilisables avec Fpdf