{"id":1247,"date":"2020-07-31T14:39:57","date_gmt":"2020-07-31T14:39:57","guid":{"rendered":"https:\/\/cookandkaye.com\/projects\/?p=1247"},"modified":"2020-07-31T14:39:57","modified_gmt":"2020-07-31T14:39:57","slug":"blockprint-your-mug-with-svg","status":"publish","type":"post","link":"https:\/\/cookandkaye.com\/projects\/blockprint-your-mug-with-svg\/","title":{"rendered":"Blockprint your mug with SVG!"},"content":{"rendered":"\n<p>We&#8217;ll start with a real webdesign conundrum: How do you build a site that is <em>interesting<\/em>, but does not overload my server, your data-connection, or your device\u2019s processing capability. <em>I guess you might also appreciate my not using up all of this months data allowance too!<\/em><\/p>\n\n\n\n<div id=\"instructions\" style=\"height: 4em;\">\n<p>You can start block printing your mug design with this traditional  gardener&#8217;s plea: <a class=\"action\" onclick=\"cnkrun()\">Grow, damn you!<\/a><\/p>\n<\/div>\n\n\n\n<svg height=250px version=1.1 viewBox=\"0 0 800 250\"width=800px xmlns=http:\/\/www.w3.org\/2000\/svg><title>Flower blockprint dev<\/title><style>.stem{fill:none;stroke:#993;stroke-width:2}.leaf{fill:#7e9;stroke:none;stroke-width:.2px}.bud{stroke:none}.flower1{fill:#f99;stroke:#c60;stroke-width:4;stroke-dasharray:.5,2}.flower1c{fill:#ff6;stroke:#c60;stroke-width:5;stroke-dasharray:.8,1}<\/style><defs><linearGradient id=bud1 x1=0% x2=0% y1=100% y2=0%><stop offset=0% style=stop-color:#6ff08f;stop-opacity:1 \/><stop offset=100% style=stop-color:#ff9696;stop-opacity:1 \/><\/linearGradient><linearGradient id=sky x1=0% x2=0% y1=0% y2=100%><stop offset=0% style=stop-color:#b4b4ff;stop-opacity:1 \/><stop offset=100% style=stop-color:#e6e6fa;stop-opacity:1 \/><\/linearGradient><linearGradient id=sunlight x1=0% x2=100% y1=0% y2=0%><stop offset=0% style=stop-color:#fff;stop-opacity:0 \/><stop offset=50% style=stop-color:#ffffc8;stop-opacity:.4 \/><stop offset=100% style=stop-color:#fff;stop-opacity:0 \/><\/linearGradient><\/defs><rect fill=url(#sky) height=250 id=box style=stroke:none width=800 x=0 y=0 \/><g id=flowers><\/g><\/svg>\n\n\n\n<script>\nvar timer;\nvar $f=0;\nvar $svght=250;\nvar heights=new Array();\nvar states=new Array();\n\nfunction cnkrun(){\n\tdocument.getElementById(\"instructions\").innerHTML=\"<p>I'm just busy watching flowers on your screen...<\/p>\";\n\tdocument.getElementById(\"flowers\").innerHTML=\"\";\n\tfor($i=1;$i<20;$i++){\n\t\theights[$i]=0;\n\t\tstates[$i]=\"\";\n\t}\n\ttimer=setInterval(grow, 100);\n}\nfunction cnkclear(){\n\tclearInterval(timer);\n}\nfunction stalk(x,y){\n\ty2=y-20;\n\tsegment=\"<path class='leaf' d='m\"+x+\",\"+y+\" q15,0 15,-25 q0,5 -10,10 q-15,10 -5,15 z' \/>\"\n\t+\"<path class='stem' d='m\"+x+\",\"+y+\" q-10,-10 0,-20 q10,-10 0,-20' \/>\"\n\t+\"<path class='leaf' d='m\"+x+\",\"+y2+\" q-15,0 -15,-25 q0,5 10,10 q15,10 5,15 z' \/>\"\n\treturn segment;\n}\nfunction bud(x,y){\n\txb=x-5;\n\ty2=y-10;\n\tsegment=\"<path class='leaf' d='m\"+x+\",\"+y+\" q15,0 15,-25 q0,5 -10,10 q-15,10 -5,15 z' \/>\"\n\t+\"<path class='stem' d='m\"+x+\",\"+y+\" q-10,-10 0,-20' \/>\"\n\t+\"<path fill='url(#bud1)' d='m\"+xb+\",\"+y2+\" q20,-5 5,-25 q-20,20 -5,25 z' \/>\";\n\treturn segment;\n}\nfunction flower(x,y){\n\txf1=x-10;\n\txf2=x-5;\n\ty2=y-20;\n\ty3=y-22;\n\tsegment=\"<path class='stem' d='m\"+x+\",\"+y+\" q-10,-10 0,-20' \/>\"\n\t+\"<path class='leaf' d='m\"+x+\",\"+y+\" q15,0 15,-25 q0,5 -10,10 q-15,10 -5,15 z' \/>\"\n\t+\"<path class='flower1' d='m\"+xf1+\",\"+y2+\" a15,10 30 1,1 1,1 z' \/>\"\n\t+\"<path class='flower1c' d='m\"+xf2+\",\"+y3+\" a7,5 30 1,1 1,1 z' \/>\";\n\treturn segment;\n}\nfunction grow(){\n\t$active=new Array();\n\tfor($i=1;$i<states.length;$i++){\n\t\tif(states[$i]!='flower'){\n\t\t\t$active.push($i);\n\t\t}\n\t}\n\tif($active.length>=1){\n\t\tvar $f = $active[Math.floor(Math.random() * $active.length)];\n\t\t$x=$f*40;\n\t\tif(states[$f]==''){\n\t\t\t$y=$svght;\n\t\t\tstates[$f]='bud';\n\t\t\theights[$f]=1;\n\t\t\t$head=bud($x,$y);\n\t\t\tdocument.getElementById(\"flowers\").innerHTML+=\"<g id='plant\"+$f+\"'>\"+$head+\"<\/g>\";\n\t\t} else {\n\t\t\t$fob=Math.floor(Math.random() * 3);\n\t\t\tthisPlant=\"\";\n\t\t\tfor($i=0;$i<=heights[$f];$i++){\n\t\t\t\t$y=$svght-($i*40);\n\t\t\t\tif($i==heights[$f]){\n\t\t\t\t\tif($fob<1){\n\t\t\t\t\t\t$head=flower($x,$y);\n\t\t\t\t\t\tstates[$f]='flower';\n\t\t\t\t\t} else {\n\t\t\t\t\t\t$head=bud($x,$y);\n\t\t\t\t\t}\n\t\t\t\t\tthisPlant+=$head;\t\t\t\t\n\t\t\t\t} else {\n\t\t\t\t\tthisPlant+=stalk($x,$y);\n\t\t\t\t}\n\t\t\t}\n\t\t\tdocument.getElementById(\"plant\"+$f).innerHTML=thisPlant;\n\t\t\t\n\t\t\tif(heights[$f]<4){\n\t\t\t\theights[$f]++;\n\t\t\t}\n\t\t}\n\t\n\t} else {\n\t\tcnkclear();\n\t\tdocument.getElementById(\"instructions\").innerHTML=\"<p><strong>All grown up!<\/strong> If you are not happy you can <a class='action' onClick='cnkrun()'>grow again<\/a> (but I only do flowers, so don't expect too much!)<\/p>\";\n\t}\n}\n<\/script>\n\n\n\n<p>Here I have built a large-ish graphic using the block printing concept; a concept I first encountered on the mugs my mother owned in the 60&#8217;s. The design is generated by repeating three simple graphical elements. When you click the &#8216;Grow, damn you!&#8217; link these are assembled in a step-wise fashion to generate a pseudo random pattern. I believe there are 274 million different final designs possible (see <a href=\"https:\/\/www.wikihow.com\/Calculate-Permutations\">wikihow.com<\/a>); most permutations look OK, though some are more visually interesting than others.<\/p>\n\n\n\n<p>Does it work? Well, if you have read this far, then yes! Putting this into numbers for comparison; the code required to generate the block-print comes in at under 4kB. The photograph shown below comes in at 44kB\u2026<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"250\" src=\"https:\/\/cookandkaye.com\/projects\/wp-content\/uploads\/2020\/07\/flower-comparison.jpg\" alt=\"Photograph of a wildflower.\" class=\"wp-image-1248\" srcset=\"https:\/\/cookandkaye.com\/projects\/wp-content\/uploads\/2020\/07\/flower-comparison.jpg 800w, https:\/\/cookandkaye.com\/projects\/wp-content\/uploads\/2020\/07\/flower-comparison-300x94.jpg 300w, https:\/\/cookandkaye.com\/projects\/wp-content\/uploads\/2020\/07\/flower-comparison-768x240.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>I think both images are quite pleasing; clearly they would serve very different roles in a website, and would be used in different circumstances. When a technique like this is appropriate, however, you can enhance your visitor&#8217;s experience, at minimal cost to yourself OR to your visitor (what is not to like?)*<\/p>\n\n\n\n<p>If you like the design you have generated you can get it printed on a mug at the T shirt Studio (link below), but you will need to zoom in on the graphic (it is SVG, so you can zoom the page as much as you need without it pixelating &#8211; this will not work for the photograph;-), and grab a screenshot first &#8211; as the design will (almost certainly) be different the next time you visit!<\/p>\n\n\n\n<p class=\"arrow\"><a href=\"https:\/\/www.tshirtstudio.com\/personalised-gifts\/personalised-home-gifts\/personalised-mugs\/custom-mug-printing\">tshirtstudio<\/a> (other online printers are available).<\/p>\n\n\n\n<p>* Custom art is ALWAYS expensive to create; the saving is in ensuring your server gets pages to more (up to 10\u00d7 more) potential visitors (customers?) for the same infrastructure cost!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ll start with a real webdesign conundrum: How do you build a site that is interesting, but does not overload my server, your data-connection, or your device\u2019s processing capability. I guess you might also appreciate my not using up all of this months data allowance too! You can start block printing your mug design with [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,7],"tags":[],"_links":{"self":[{"href":"https:\/\/cookandkaye.com\/projects\/wp-json\/wp\/v2\/posts\/1247"}],"collection":[{"href":"https:\/\/cookandkaye.com\/projects\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cookandkaye.com\/projects\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cookandkaye.com\/projects\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cookandkaye.com\/projects\/wp-json\/wp\/v2\/comments?post=1247"}],"version-history":[{"count":4,"href":"https:\/\/cookandkaye.com\/projects\/wp-json\/wp\/v2\/posts\/1247\/revisions"}],"predecessor-version":[{"id":1252,"href":"https:\/\/cookandkaye.com\/projects\/wp-json\/wp\/v2\/posts\/1247\/revisions\/1252"}],"wp:attachment":[{"href":"https:\/\/cookandkaye.com\/projects\/wp-json\/wp\/v2\/media?parent=1247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cookandkaye.com\/projects\/wp-json\/wp\/v2\/categories?post=1247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cookandkaye.com\/projects\/wp-json\/wp\/v2\/tags?post=1247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}