{"id":240,"date":"2016-02-13T16:07:40","date_gmt":"2016-02-13T16:07:40","guid":{"rendered":"http:\/\/ifdesignelseart.com\/?p=240"},"modified":"2016-02-13T16:07:40","modified_gmt":"2016-02-13T16:07:40","slug":"lenregistrement-au-format-svg","status":"publish","type":"post","link":"https:\/\/ifdesignelseart.com\/?p=240","title":{"rendered":"L&rsquo;enregistrement au format SVG"},"content":{"rendered":"<p>Processing permet d\u00e9sormais l&rsquo;enregistrement au format vectoriel SVG.<br \/>\nLe format SVG ne contient pas une matrice de points, comme les formats bitmap Jpeg, png, gif, bmp ou tiff, mais des commandes vectorielles. Pour cela, il serait impossible de se contenter d&rsquo;une capture de l&rsquo;espace d&rsquo;affichage le font les commandes\u00a0<code>save()<\/code> et <code>saveFrame()<\/code>. L&rsquo;enregistrement au format SVG fonctionne en fait comme l&rsquo;enregistrement au format PDF, qui est lui aussi un format de document vectoriel.<\/p>\n<p>Voici un exemple qui\u00a0commence par importer la librairie SVG, cr\u00e9e un \u00e9cran au format 400&#215;400 pixels, puis, \u00e0 l&rsquo;aide de la commande <code>beginRecord()<\/code>, d\u00e9marre l&rsquo;enregistrement au format SVG d&rsquo;une image que nous choisissons de nommer \u00ab\u00a0image.svg\u00a0\u00bb. Ensuite, nous dessinons une ellipse\u00a0de 100&#215;100 pixels\u00a0tous les 25 pixels, \u00e0 l&rsquo;aide d&rsquo;une boucle.<br \/>\nEnfin, nous interrompons l&rsquo;enregistrement avec <code>endRecord()<\/code>.<\/p>\n<pre class=\"brush:java\">import processing.svg.*;\r\nsize(400,400);\r\nbeginRecord(SVG, \"image.svg\");\r\n  for(int a=50;a&lt;350;a+=25){\r\n     ellipse(a, a, 100,100);\r\n  }\r\nendRecord();<\/pre>\n<p>On le voit, l&rsquo;image qui en r\u00e9sulte est bien une image vectorielle, qui peut \u00eatre ouverte et \u00e9dit\u00e9e \u00e0 l&rsquo;aide d&rsquo;un logiciel de dessin vectoriel tel que <em>Adobe Illustrator<\/em> ou que le logiciel libre <em><a href=\"https:\/\/inkscape.org\/fr\/\" target=\"_blank\">Inkscape<\/a><\/em> :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-246 size-full\" src=\"http:\/\/ifdesignelseart.com\/wp-content\/uploads\/2016\/02\/exemple_svg.png\" alt=\"exemple_svg\" width=\"539\" height=\"518\" srcset=\"https:\/\/ifdesignelseart.com\/wp-content\/uploads\/2016\/02\/exemple_svg.png 539w, https:\/\/ifdesignelseart.com\/wp-content\/uploads\/2016\/02\/exemple_svg-300x288.png 300w\" sizes=\"auto, (max-width: 539px) 100vw, 539px\" \/><\/p>\n<p>Voici un second exemple, qui permet de remplacer la commande saveFrame() :<\/p>\n<pre class=\"brush:java\">import processing.svg.*;\r\n\r\nvoid setup(){\r\n  size(500,500);\r\n}\r\n\r\nvoid draw(){\r\n  beginRecord(SVG, \"images\/image\"+nf(frameCount, 5)+\".svg\");\r\n    ellipse(mouseX, mouseY, 100,100);\r\n  endRecord();\r\n}<\/pre>\n<p>\u00c0 chaque rafra\u00eechissement de l&rsquo;\u00e9cran (<code>draw()<\/code>), on enregistre\u00a0ce qui se passe sur l&rsquo;\u00e9cran (en l&rsquo;occurrence, le dessin d&rsquo;une ellipse \u00e0 la position de la souris) \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un fichier.<br \/>\n<code>nf(frameCount, 5)<\/code> renvoie le num\u00e9ro de frame, \u00e9crit avec cinq chiffre : 00001, 00002, 00003, etc. Les fichiers auront donc pour nom \u00ab\u00a0image00001.svg\u00a0\u00bb, image00002.svg\u00a0\u00bb, \u00ab\u00a0image00003.svg\u00a0\u00bb et ainsi de suite.<br \/>\nLe nom du fichier est pr\u00e9c\u00e9d\u00e9 de \u00ab\u00a0images\/\u00a0\u00bb, ce qui est une astuce pour que toutes les images ne se retrouvent pas \u00e0 l&rsquo;int\u00e9rieur du dossier du programme, mais \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un de ses sous-dossiers, que nous choisissons de nommer \u00ab\u00a0images\u00a0\u00bb.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Processing permet d\u00e9sormais l&rsquo;enregistrement au format vectoriel SVG. Le format SVG ne contient pas une matrice de points, comme les formats bitmap Jpeg, png, gif, bmp ou tiff, mais des commandes vectorielles. Pour cela, il serait impossible de se contenter d&rsquo;une capture de l&rsquo;espace d&rsquo;affichage le font les commandes\u00a0save() et saveFrame(). L&rsquo;enregistrement au format SVG [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-240","post","type-post","status-publish","format-standard","hentry","category-non-classe"],"_links":{"self":[{"href":"https:\/\/ifdesignelseart.com\/index.php?rest_route=\/wp\/v2\/posts\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ifdesignelseart.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ifdesignelseart.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ifdesignelseart.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ifdesignelseart.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=240"}],"version-history":[{"count":9,"href":"https:\/\/ifdesignelseart.com\/index.php?rest_route=\/wp\/v2\/posts\/240\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/ifdesignelseart.com\/index.php?rest_route=\/wp\/v2\/posts\/240\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/ifdesignelseart.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ifdesignelseart.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ifdesignelseart.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}