{"id":530,"date":"2018-07-20T06:12:29","date_gmt":"2018-07-20T13:12:29","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=3076"},"modified":"2018-07-20T06:12:29","modified_gmt":"2018-07-20T13:12:29","slug":"the-experimental-zeta-project","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=530","title":{"rendered":"The Experimental Zeta Project"},"content":{"rendered":"<p>Sometime in 2015 I decided to do an experiment. I created a speed coded graphics library with the intention of eventually completely re-writing it . The idea being, I would work on an elegant (albeit strange) graphics library that would make it easy to quickly create complex graphics with very little code. The result was Zeta&#8230; which can do things like this:<\/p>\n<p><iframe height='300' scrolling='no' title='Parametric Yarn' src='\/\/codepen.io\/ZevanRosser\/embed\/rVVGbV\/?height=300&#038;theme-id=5318&#038;default-tab=js,result&#038;embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https:\/\/codepen.io\/ZevanRosser\/pen\/rVVGbV\/'>Parametric Yarn<\/a> by Zevan Rosser (<a href='https:\/\/codepen.io\/ZevanRosser'>@ZevanRosser<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>or&#8230;<\/p>\n<p><iframe height='300' scrolling='no' title='eye' src='\/\/codepen.io\/ZevanRosser\/embed\/vOEgLV\/?height=300&#038;theme-id=5318&#038;default-tab=js,result&#038;embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https:\/\/codepen.io\/ZevanRosser\/pen\/vOEgLV\/'>eye<\/a> by Zevan Rosser (<a href='https:\/\/codepen.io\/ZevanRosser'>@ZevanRosser<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>or even&#8230; <\/p>\n<p><iframe height='300' scrolling='no' title='Isometric Boxing (Redux)' src='\/\/codepen.io\/ZevanRosser\/embed\/yNONQE\/?height=300&#038;theme-id=5318&#038;default-tab=js,result&#038;embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https:\/\/codepen.io\/ZevanRosser\/pen\/yNONQE\/'>Isometric Boxing (Redux)<\/a> by Zevan Rosser (<a href='https:\/\/codepen.io\/ZevanRosser'>@ZevanRosser<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p><small style=\"font-size:10px\">that&#8230;<\/small><\/p>\n<p>There is more than meets the eye here. Here is a list of some things that may not be immediately apparent:<\/p>\n<ol>\n<li>While this is all done with canvas, everything is percentage based so it can scale in realtime to an arbitrary size. Like <a href=\"http:\/\/zrosser.com\/playground\/eyes.html\">this<\/a> (all of the above examples do the same).<\/li>\n<li>It uses coffeescript to so that the syntax is extra minimal.<\/li>\n<li>It defines shapes as polar and parametric functions, so you can easily create spirals and waves and really any kind of parametric curve you want.<\/li>\n<li>the data of the curves can be separated from the default rendering, and you can use normal canvas command to interpret the data.<\/li>\n<li>The actually library code is a real speed coded mess that could easily be replaced with decent code, leaving the existing API intact.<\/li>\n<li>Its very easy to create pseudo-responsive grids and animations.<\/li>\n<li>etc&#8230;<\/li>\n<\/ol>\n<p>Here are the unfinished docs, basically just a list of functions and properties: <a href=\"http:\/\/zrosser.com\/playground\/zeta-docs.html\" target=\"blank\">Zeta Docs<\/a><\/p>\n<p>Obviously I never got around to the re-write phase, but I still may revisit Zeta at some point. I have many many more things that I created with Zeta&#8230; Maybe I&#8217;ll write about some of them in the future.<\/p>\n<p>There&#8217;s enough here for people to play around with, and if you feel like seeing some strange code. Have a look at one of the later versions of the lib itself: <a href=\"http:\/\/zrosser.com\/playground\/zeta-clean.js\">(brace yourself)<\/a><\/p>\n<p><iframe height='420' scrolling='no' title='heart' src='\/\/codepen.io\/ZevanRosser\/embed\/bdNgGP\/?height=420&#038;theme-id=5318&#038;default-tab=result&#038;embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https:\/\/codepen.io\/ZevanRosser\/pen\/bdNgGP\/'>heart<\/a> by Zevan Rosser (<a href='https:\/\/codepen.io\/ZevanRosser'>@ZevanRosser<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p><em>it may be obvious that some of the ideas in this lib are ever so vaguely inspired by <a href=\"https:\/\/processing.org\/\">processing<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometime in 2015 I decided to do an experiment. I created a speed coded graphics library with the intention of eventually completely re-writing it . The idea being, I would work on an elegant (albeit strange) graphics library that would make it easy to quickly create complex graphics with very little code. The result was [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-530","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=530"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/530\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}