{"id":1667,"date":"2015-05-30T10:57:23","date_gmt":"2015-05-30T09:57:23","guid":{"rendered":"http:\/\/johnjohnston.info\/106\/?p=1667"},"modified":"2015-05-30T11:04:48","modified_gmt":"2015-05-30T10:04:48","slug":"a-touch-of-don","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/106\/a-touch-of-don\/","title":{"rendered":"A Touch of Don"},"content":{"rendered":"<figure id=\"attachment_1668\" aria-describedby=\"caption-attachment-1668\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1668\" src=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2015\/05\/don-draper-is-zen-google.gif\" alt=\"Apologies for the large size of this gif 1.5MB, but 52 frames!\" width=\"480\" height=\"506\" \/><figcaption id=\"caption-attachment-1668\" class=\"wp-caption-text\">Apologies for the large size of this gif 1.5MB, but 52 frames!<\/figcaption><\/figure>\n<p><span style=\"line-height: 1.5;\">The offshoot of ds106 that is <\/span><a style=\"line-height: 1.5;\" title=\"GIF FIGHT!!\" href=\"http:\/\/giffight.tumblr.com\">#giffight<\/a><span style=\"line-height: 1.5;\"> has given me <\/span><a style=\"line-height: 1.5;\" title=\"jjgifs\" href=\"http:\/\/jjgifs.tumblr.com\/tagged\/giffight\">a lot of fun<\/a><span style=\"line-height: 1.5;\">. Every so often the giffight tumble posts an image with the invite for anyone to use it to create an animated gif from. You post it to tumblr tagged giffight or tweet and it is added to the gifight tumblr.<\/span><\/p>\n<p>The latest iteration came out of <a href=\"http:\/\/mbransons.com\/post\/119448923434\/started-another-tumblr-don-draper-is-zen-im\">MBS \u2014 Started another Tumblr \u2013 Don Draper is Zen I\u2019m&#8230;<\/a> celebrating the end of Mad Men by placing a meditation Don Draper over an animated background Michael provided a nice psd file with Don Drifting into the OM.<\/p>\n<p>I <a title=\"jjgifs\" href=\"http:\/\/jjgifs.tumblr.com\/tagged\/don-draper\">made a few<\/a> and then saw this tweet:<\/p>\n<blockquote class=\"twitter-tweet\" lang=\"en\">\n<p dir=\"ltr\" lang=\"en\"><a href=\"https:\/\/twitter.com\/johnjohnston\">@johnjohnston<\/a> How hard do you think would be to make a <a href=\"https:\/\/twitter.com\/hashtag\/doniszen?src=hash\">#doniszen<\/a> web generator? <a href=\"https:\/\/twitter.com\/ryanseslow\">@ryanseslow<\/a> <a href=\"https:\/\/twitter.com\/abelincolnjr\">@abelincolnjr<\/a> <a href=\"https:\/\/twitter.com\/generalhowe\">@generalhowe<\/a> <a href=\"https:\/\/twitter.com\/mdvfunes\">@mdvfunes<\/a> <a href=\"https:\/\/twitter.com\/jimgroom\">@jimgroom<\/a><\/p>\n<p>\u2014 Michael B Smith (@mbransons) <a href=\"https:\/\/twitter.com\/mbransons\/status\/601747709138214912\">May 22, 2015<\/a><\/p><\/blockquote>\n<p><script src=\"\/\/platform.twitter.com\/widgets.js\" async=\"\" charset=\"utf-8\"><\/script><\/p>\n<h3>Which got me thinking<\/h3>\n<p>At first I was thinking of some sort of server size thing using <a href=\"http:\/\/www.lcdf.org\/gifsicle\/\">Gifsicle<\/a>,<br \/>\n<a href=\"http:\/\/www.imagemagick.org\/script\/index.php\">ImageMagick<\/a> or <a href=\"http:\/\/php.net\/manual\/en\/book.image.php\"> GD &#8211; Manual<\/a> and the like. These both need resources that I don&#8217;t have access to (unless the raspberry pi) and skills I don&#8217;t have.<\/p>\n<p>I then wondered about the various JavaScript Gif mashup I&#8217;ve made (<a title=\"squares\" href=\"http:\/\/johnjohnston.info\/tests\/squares.html\">squares<\/a> for example) and if I could do that. I also recalled bookmarking a new (to me) JavaScript library for creating animated Gifs, <a href=\"http:\/\/jnordberg.github.io\/gif.js\/\">gif.js<\/a>. It seemed faster than the one I&#8217;d used before.<\/p>\n<p>After much testing and playing around I&#8217;ve managed to get to a place where I&#8217;ve got a webpage that makes Don Zen Gifs that you can add an image as a background, or generate some random stuff as a background and get a gif. The interface is a bit rough at the moment. <a href=\"http:\/\/johnjohnston.info\/oddsandends\/don\/\">Don&#8217;s Gif Zen<\/a><\/p>\n<figure id=\"attachment_1673\" aria-describedby=\"caption-attachment-1673\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1673\" src=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2015\/05\/don-clouds.gif\" alt=\"751kB\" width=\"500\" height=\"373\" \/><figcaption id=\"caption-attachment-1673\" class=\"wp-caption-text\">751kB<\/figcaption><\/figure>\n<figure id=\"attachment_1669\" aria-describedby=\"caption-attachment-1669\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/johnjohnston.info\/oddsandends\/don\/\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1669 size-full\" src=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2015\/05\/don-test.gif\" alt=\"277kB a wee bit better\" width=\"500\" height=\"300\" \/><\/a><figcaption id=\"caption-attachment-1669\" class=\"wp-caption-text\">277kB a wee bit better<\/figcaption><\/figure>\n<p>The <a href=\"http:\/\/jnordberg.github.io\/gif.js\/\">gif.js<\/a> library does all of the hard work. I could not get some of the functions to work and had to kludge around them. I can see them working on the <a href=\"http:\/\/jnordberg.github.io\/gif.js\/tests\/canvas.html\">Canvas example page<\/a> but I failed to get them to work here.<br \/>\nBasically what my pages does is let you upload an image, it displays that on a canvas element then loops through the Don frames adding them over the background. I should have been able to export that to the gif, but this failed so I create hidden png images and pass them to the gif encoder.<\/p>\n<p>The alternative buttons just generate randomish backgrounds in the same way as I did for <a title=\"squares\" href=\"http:\/\/johnjohnston.info\/tests\/squares.html\">squares<\/a>.<\/p>\n<p>The great thing about the JavaScript approach is it needs no really amount of resources on the server. All the work is done on the end users browser. That means it is quite slow on a mobile.<br \/>\nI&#8217;ve tested on Chrome, Firefox and Safari on mac and it seems to all work fine there now (I had some early problems in Safari &amp; firefox) Chrome &amp; Safari seem faster than FF. It also works on mobile Safari on my iPhone. I quickly tested IE9, a fail and 10, works on Windows using virtualbox but would be interest to hear for others.<\/p>\n<p>Finally I&#8217;ve used the same idea to take the <a href=\"http:\/\/assignments.ds106.us\/assignments\/dancing-jim-all-over-the-world\/\">ds106 Assignments: Dancing Jim all over the world<\/a> from a 2 and a half star assignment to a 1 star one.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/johnjohnston.info\/oddsandends\/dancingjim\/\">Dance Jim Dance<\/a><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/johnjohnston.info\/oddsandends\/dancingjim\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1670 size-full\" src=\"https:\/\/johnjohnston.info\/106\/wp-content\/uploads\/2015\/05\/dancin-jim.gif\" alt=\"dancin-jim\" width=\"500\" height=\"300\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The offshoot of ds106 that is #giffight has given me a lot of fun. Every so often the giffight tumble posts an image with the invite for anyone to use it to create an animated gif from. You post it to tumblr tagged giffight or tweet and it is added to the gifight tumblr. The &hellip; <a href=\"https:\/\/johnjohnston.info\/106\/a-touch-of-don\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;A Touch of Don&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[74,49],"tags":[84,97,178,177],"class_list":["post-1667","post","type-post","status-publish","format-standard","hentry","category-animatedgif","category-assignment","tag-animatedgifassignments","tag-animatedgifassignments1001","tag-animatedgiftutorials1001","tag-giffight"],"better_featured_image":null,"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3RLlC-qT","_links":{"self":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/1667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/comments?post=1667"}],"version-history":[{"count":4,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/1667\/revisions"}],"predecessor-version":[{"id":1675,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/posts\/1667\/revisions\/1675"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/media?parent=1667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/categories?post=1667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/106\/wp-json\/wp\/v2\/tags?post=1667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}