{"id":2713,"date":"2016-01-01T00:42:03","date_gmt":"2015-12-31T23:42:03","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2713"},"modified":"2016-04-16T14:24:54","modified_gmt":"2016-04-16T13:24:54","slug":"2713","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2713","title":{"rendered":"\/ p5.js \/ 19 \/ seriously.js avec p5.js"},"content":{"rendered":"<p style=\"text-align: center;\"><!--more--><\/p>\n<p style=\"text-align: left;\">Brancher la webcam &amp; autoriser son partage&#8230;<\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-ascii\/\" width=\"665\" height=\"505\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p class=\"yt watch-title-container\"><span id=\"eow-title\" class=\"watch-title \" dir=\"ltr\" title=\"p5.js Tutorial 10.7: Video Effects with Seriously.js\">Le tutoriel de Daniel Shiffman explique comment utiliser <a href=\"https:\/\/github.com\/brianchirls\/Seriously.js\/\" target=\"_blank\">seriously.js<\/a> avec p5.js : <a href=\"https:\/\/www.youtube.com\/watch?v=jdKep6jo7b0\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=jdKep6jo7b0<\/a><br \/>\n<\/span><\/p>\n<h3 class=\"yt watch-title-container\">Organigramme des fichiers :<\/h3>\n<p class=\"yt watch-title-container\"><img loading=\"lazy\" width=\"204\" height=\"262\" class=\"size-full wp-image-2735 alignnone\" src=\"http:\/\/www.lyceelecorbusier.eu\/p5js\/wp-content\/uploads\/sites\/25\/2016\/04\/organigramme.png\" alt=\"organigramme\" \/><\/p>\n<h3 class=\"yt watch-title-container\">sketch.js<\/h3>\n<pre>var video;\r\n\r\nfunction setup() {\r\n\u00a0 canvas = createCanvas(640, 480, WEBGL);\r\n\u00a0 canvas.id('p5canvas');\r\n\u00a0 video = createCapture(VIDEO);\r\n\u00a0 video.size(640, 480);\r\n\u00a0 video.id('p5video');\r\n\u00a0 video.hide();\r\n\u00a0 ascii();\r\n}\r\n\r\nfunction ascii(){\r\n\u00a0 var seriously = new Seriously();\r\n\u00a0 var src = seriously.source('#p5video');\r\n\u00a0 var target = seriously.target('#p5canvas');\r\n\u00a0 var ascii = seriously.effect('ascii');\r\n\u00a0 ascii.source = src;\r\n\u00a0 target.source = ascii;\r\n\u00a0 var r = 236 \/ 255;\r\n\u00a0 var g = 36 \/ 255;\r\n\u00a0 var b = 94 \/ 255;\r\n\u00a0 ascii.background = [r,g,b,1];\r\n\u00a0 seriously.go();\r\n}<\/pre>\n<h3 class=\"yt watch-title-container\">index.html<\/h3>\n<pre>&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\u00a0 &lt;head&gt;\r\n\u00a0\u00a0\u00a0 &lt;meta charset=\"UTF-8\"&gt;\r\n\u00a0\u00a0\u00a0 &lt;title&gt;08 seriously.js&lt;\/title&gt;\r\n\u00a0\u00a0\u00a0 &lt;script src=\"libraries\/p5.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0 &lt;script src=\"libraries\/p5.dom.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0 &lt;script src=\"libraries\/p5.sound.js\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0 <strong>&lt;script src=\"libraries\/seriously.js\"&gt;&lt;\/script&gt;<\/strong>\r\n\u00a0\u00a0\u00a0 <strong>&lt;script src=\"libraries\/effects\/seriously.ascii.js\"&gt;&lt;\/script&gt;<\/strong>\r\n\u00a0\u00a0\u00a0 &lt;script src=\"sketch.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0 &lt;style&gt;\r\n\u00a0\u00a0\u00a0 body {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 background-color:rgb(236,36,94);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 &lt;\/style&gt;\r\n\u00a0 &lt;\/head&gt;\r\n\u00a0 &lt;body&gt;\r\n\u00a0 &lt;div&gt;\r\n\u00a0 &lt;\/div&gt;\r\n\u00a0 &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h3>Autres effets seriously.js<\/h3>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-blur\/\" target=\"_blank\">seriously-p5-blur<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-directionblur\/\" target=\"_blank\">seriously-p5-directionblur<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-dither\/\" target=\"_blank\">seriously-p5-dither<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-filmgrain\/\" target=\"_blank\">seriously-p5-filmgrain<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-hex\/\" target=\"_blank\">seriously-p5-hex<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-hue-saturation\/\" target=\"_blank\">seriously-p5-hue-saturation<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-invert\/\" target=\"_blank\">seriously-p5-invert<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-kaleidoscope\/\" target=\"_blank\">seriously-p5-kaleidoscope<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-lumakey\/\" target=\"_blank\">seriously-p5-lumakey<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-mirror\/\" target=\"_blank\">seriously-p5-mirror<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-nightvision\/\" target=\"_blank\">seriously-p5-nightvision<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-noise\/\" target=\"_blank\">seriously-p5-noise<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-opticalflow\/\" target=\"_blank\">seriously-p5-opticalflow<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-panorama\/\" target=\"_blank\">seriously-p5-panorama<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-pixelate\/\" target=\"_blank\">seriously-p5-pixelate<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-polar\/\" target=\"_blank\">seriously-p5-polar<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-ripple\/\" target=\"_blank\">seriously-p5-ripple<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-scanlines\/\" target=\"_blank\">seriously-p5-scanlines<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-sepia\/\" target=\"_blank\">seriously-p5-sepia<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-sketch\/\" target=\"_blank\">seriously-p5-sketch<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-temperature\/\" target=\"_blank\">seriously-p5-temperature<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-tone\/\" target=\"_blank\">seriously-p5-tone<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-tvglitch\/\" target=\"_blank\">seriously-p5-tvglitch<\/a><\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5\/seriously\/seriously-p5-vignette\/\" target=\"_blank\">seriously-p5-vignette<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2713"}],"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=2713"}],"version-history":[{"count":26,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2713\/revisions"}],"predecessor-version":[{"id":2772,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2713\/revisions\/2772"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}