{"id":3537,"date":"2020-03-17T16:49:11","date_gmt":"2020-03-17T15:49:11","guid":{"rendered":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3537"},"modified":"2020-03-17T17:12:26","modified_gmt":"2020-03-17T16:12:26","slug":"243-cartes-postales-en-couleurs-veritables-243-cartes-postales-en-couleurs-veritables-cache-pour-les-etudiants","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3537","title":{"rendered":"243 cartes postales en couleurs v\u00e9ritables"},"content":{"rendered":"

Durant ce cours vous allez cr\u00e9er un g\u00e9n\u00e9rateur d’image qui vous permettra de cr\u00e9er 243 images diff\u00e9rentes.<\/p>\n

En octobre 1978, Georges PEREC<\/strong> \u00e9crit “Deux cent quarante trois cartes postales en couleurs v\u00e9ritables”<\/em> d\u00e9di\u00e9es \u00e0 Italo CALVINO<\/strong>.<\/p>\n\n\n\n\n
“Nous campons pr\u00e8s d\u2019Ajaccio. Il fait tr\u00e8s beau.
\nOn mange bien. J\u2019ai pris un coup de soleil.
\nBons baisers.”<\/td>\n		“On est \u00e0 l\u2019h\u00f4tel Alcazar. On bronze.
\nAh ce qu\u2019on est bien !Je me suis fait un tas de potes.
\nOn rentre le 7.”<\/td>\n		“On est \u00e0 l\u2019h\u00f4tel Alcazar. On bronze.
\nAh ce qu\u2019on est bien !Je me suis fait un tas de potes.
\nOn rentre le 7.”<\/td>\n		“Nous naviguons dans les environs de l\u2019Ile-Rousse.
\nOn se laisse bronzer. On mange admirablement.
\nJ\u2019ai pris un de ses coups de soleil !
\nBaisers et tout.”<\/td>\n		“On vient de faire le Dahomey. Nuits superbes.
\nBaignades sensas. Balades \u00e0 dos de chameau.
\nNous serons \u00e0 Paris le 15.”<\/td>\n<\/tr>\n
“Nous avons fini par atterrir \u00e0 Nice.
\nFarniente et dodo. Ah qu\u2019on est bien (malgr\u00e9 les coups de soleil).
\nBaisers.”<\/td>\n		“Un petit mot d\u2019Urbino. Il fait beau.
\nViva les scampi fritti et les fritto misto !
\nSans oublier Giotto et tutti quanti.
\nAmicales pens\u00e9es.”<\/td>\n		“On est \u00e0 l\u2019h\u00f4tel Les Jonquilles. Temps merveilleux.
\nOn va \u00e0 la plage. Avons fait connaissance avec tout plein de gens charmants.
\nOn vous embrasse.”<\/td>\n		“Nous sommes \u00e0 l\u2019h\u00f4tel des Quatre-Sergents.
\nBronzage. The Foot ! Coups de soleil.
\nTout plein de pens\u00e9es pour vous.”<\/td>\n		“Souvenir d\u2019Hell\u00e9nie. On se dore au soleil. Extra !
\nOn s\u2019est fait plein d\u2019amis.
\nMille pens\u00e9es.”<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Consignes<\/h2>\n

Fabriquer 243 images diff\u00e9rentes,
\n\u00e0 partir de 3 ingr\u00e9dients de base : premier plans \/ d\u00e9cors \/ ciels<\/p>\n

3<\/strong> -> ciels
\n9<\/strong> -> d\u00e9cors
\n9<\/strong> -> premiers plans
\n3 x 9 x 9 = 243<\/strong><\/p>\n

Ouvrir le sketch dans openprocessing : https:\/\/www.openprocessing.org\/sketch\/467363<\/a>
\n\u2014 Identifiez-vous et acc\u00e9dez au code\"\" , afficher l’onglet “Files”\u00a0\"\"<\/p>\n

\"\"<\/p>\n

\u2014 Cliquez dans le code et faites “Entr\u00e9e”, utiliser le bouton\u00a0\"\" pour sauvegarder votre copie.<\/p>\n

Analyse du code<\/h2>\n

Nous allons lire le code du d\u00e9but \u00e0 la fin<\/strong><\/p>\n

Les 3 variables sont d\u00e9clar\u00e9es comme liste (arrays*)
\n<\/em><\/span>let fond = [];<\/span><\/em>
\nlet decor = [];<\/span><\/em>
\nlet motif = [];<\/span><\/em><\/p>\n

Une array<\/em> est une liste de variables. Les arrays<\/em> sont pratiques car elles permettent d\u2019utiliser beaucoup de variables sans \u00eatre oblig\u00e9 de les nommer chacune.
\nPar exemple lorsque nous avons plusieurs dizaines d\u2019images dans une base de donn\u00e9es.
\nOn y reviendra en cours…<\/p>\n

let recording = false;
\n<\/em>Cette variable nous dit que l’enregistrement d’image n’est pas vrai. Elle nous sera utile pour enregistrer des images quand nous le voudrons.<\/span> <\/span><\/p>\n

function preload(){ }<\/em><\/span> permet d’\u00e9viter que l’affichage ne commence avant que toutes les images soient charg\u00e9es en m\u00e9moire.
\nIl est possible de charger individuellement chaque image dans la fonction preload mais il faut \u00e9crire une ligne de code par image :
\nimg = loadImage(“fond_1.png”);<\/em><\/span>
\nPour les 21 images cr\u00e9\u00e9es pour le projet il faudrait 21 lignes. \ud83d\ude41<\/p>\n

Les boucles<\/span><\/strong> permettent de simplifier l’\u00e9criture du code.
\nfor (let i=0; i < 3; i++) {<\/em><\/span>
\n fond [i] = loadImage(“fond_” + i + “.png”);<\/em><\/span>
\n }<\/em><\/span><\/p>\n

signifie :<\/span>
\nPour la variable de valeur i, tant que i est inf\u00e9rieure \u00e0 3 il faut incr\u00e9menter (augmenter) cette valeur de 1 \u00e0 chaque ex\u00e9cution du programme.
\nLa seconde ligne pr\u00e9charge les images du fond. La variable fond ayant \u00e9t\u00e9 d\u00e9clar\u00e9e sous forme de liste toutes les valeurs de i sont charg\u00e9es. 3 images ici.
\nLa fonction loadImage ()<\/em><\/span> charge toutes les images nomm\u00e9es fond_0.png<\/span>, fond_1.png<\/span>, fond_2.png<\/span>
\nATTENTION : en algorithmique 0 est une valeur.<\/p>\n

function setup(){}<\/em><\/span> (rappel : setup est ex\u00e9cut\u00e9 1 seule fois) fixe ici la taille de note “sc\u00e8ne”, le fond est blanc et la vitesse d’ex\u00e9cution du programme. frameRate()<\/em><\/span> indique le nombre d’images \u00e0 afficher par seconde. Par exemple, l’appel de fonction frameRate(30)<\/em><\/span> tentera de rafra\u00eechir 30 fois par seconde. Si le processeur n’est pas assez rapide pour maintenir la fr\u00e9quence sp\u00e9cifi\u00e9e, la fr\u00e9quence d’images ne sera pas atteinte. La fr\u00e9quence d’images par d\u00e9faut est bas\u00e9e sur la fr\u00e9quence d’images de l’\u00e9cran (ici aussi appel\u00e9e “fr\u00e9quence de rafra\u00eechissement”), qui est r\u00e9gl\u00e9e \u00e0 60 images par seconde sur la plupart des ordinateurs. Une fr\u00e9quence d’images de 24 images par seconde (habituelle pour les films) ou plus sera suffisante pour des animations lisses.<\/p>\n

function draw() {}<\/em><\/span> (rappel : draw est ex\u00e9cut\u00e9 en boucle) va permettre d’afficher les images pr\u00e9charg\u00e9es.<\/p>\n

imageMode (CENTER);<\/em><\/span> indique au programme qu’il doit afficher les images en consid\u00e9rant que les coordonn\u00e9es de l’image, x=0 et y=0 se trouvent au centre de celle-ci et non dans le coin en-haut \u00e0 gauche qui est l’origine par d\u00e9faut.<\/p>\n

image(fond[int(random(fond.length))],540,383);<\/em><\/span>
\nCette instruction affiche les images de la variable fond.
\nint(random(fond.length))<\/em><\/span> charge al\u00e9atoirement une des trois images pr\u00e9charg\u00e9e.
\nToutes les images ayant la m\u00eame dimension 1086 px sur 766 px,<\/strong><\/span> elles doivent s’afficher au centre la position indiqu\u00e9e est x = 540 px<\/span> et y = 383 px<\/span>.<\/p>\n

if (recording == true){<\/em><\/span>
\n save(“generative_” + floor(random(1000000)) + “.png”); <\/em><\/span>
\n }<\/em><\/span>
\nAutre \u00e9l\u00e9ment essentiel en programmation, les conditions.
\nDans le cas pr\u00e9sent la condition est la suivante : si la variable recording<\/em> est vraie alors une image au format png<\/em> est sauvegard\u00e9e sur le disque dur.
\nPar d\u00e9faut let recording = false;<\/em><\/p>\n

function keyTyped(){}<\/em><\/span> permet d’attribuer des actions \u00e0 des touches du clavier
\nif (key == ‘0’){ recording = true; }<\/em><\/span>
\nAppuyer sur la touche 0 commence l’enregistrement d’images
\nif (key == ‘1’){ recording = false; }<\/em><\/span>
\nAppuyer sur la touche 1 stoppe l’enregistrement d’images
\nif (key == ‘2’){ noLoop(); }<\/span><\/em>
\nArr\u00eate la lecture en boucle de la fonction draw
\nif (key == ‘3’){ loop(); }<\/em><\/span>
\nRelance la lecture de la function draw<\/p>\n

 <\/p>\n

Cr\u00e9er vos cartes postales<\/h2>\n

Quelques exemples ant\u00e9rieurs et pas forc\u00e9ment exemplaires :<\/p>\n

\u2014 https:\/\/www.openprocessing.org\/sketch\/475530<\/a><\/p>\n

\u2014 https:\/\/www.openprocessing.org\/sketch\/475523<\/a><\/p>\n

\u2014 https:\/\/www.openprocessing.org\/sketch\/479166<\/a> (avec une l\u00e9g\u00e8re variante du code)<\/p>\n

\u2014 https:\/\/www.openprocessing.org\/sketch\/475518<\/a> (sans commentaire)<\/p>\n

Attention respecter scrupuleusement<\/span><\/strong> les consignes<\/p>\n

\u2014 Trouver des images.
\n\u2014 Pr\u00e9parer les images.
\n\u2014 Toutes les images doivent \u00eatre des .png<\/strong><\/span>
\n\u2014 Les fonds<\/strong> et le d\u00e9cors<\/strong> doivent \u00eatre \u00e0 la bonne taille 1080 pixels x 766 pixels<\/strong><\/span>
\n\u2014 Les d\u00e9cors<\/strong> et motifs<\/strong> doivent \u00eatre en png transparents<\/strong><\/span>
\n\u2014 nommer vos images<\/strong> en respectant les r\u00e8gles de nommage, si cela ne fonctionne pas \u00e0 la fin c’est en g\u00e9n\u00e9ral parce qu’il y a une erreur dans les nom de fichier (je rappelle 00 est la premi\u00e8re).
\n\u2014\u2014 images ciels<\/strong> : fond_00.png \/ fond_01.png \/ fond_02.png \/ taille 1080 X 766
\n\u2014\u2014 images d\u00e9cors<\/strong> : decor_00.png \/\u2026 \/ decor_08.png \/ taille 1080 X 766
\n\u2014\u2014 images motifs<\/strong> : motif_00.png \/ \u2026 \/ motif_08.png \/ taille variable<\/p>\n

Dans openprocessing :<\/strong><\/p>\n

\u2014 Supprimer les images existantes dans OpenProcessing
\n\u2014 Ajouter vos images \u00e0 la place des images existantes.
\n\u2014 G\u00e9n\u00e9rer vos cartes postales\u2026 adapter le code si n\u00e9cessaire.<\/p>\n","protected":false},"excerpt":{"rendered":"

Durant ce cours vous allez cr\u00e9er un g\u00e9n\u00e9rateur d’image qui vous permettra de cr\u00e9er 243 images diff\u00e9rentes. En octobre 1978, Georges PEREC \u00e9crit “Deux cent quarante trois cartes postales en couleurs v\u00e9ritables” d\u00e9di\u00e9es \u00e0 Italo CALVINO. “Nous campons… Lire la suite…<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3537"}],"collection":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3537"}],"version-history":[{"count":5,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3537\/revisions"}],"predecessor-version":[{"id":3548,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3537\/revisions\/3548"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}