{"id":22,"date":"2021-09-03T22:58:55","date_gmt":"2021-09-03T22:58:55","guid":{"rendered":"http:\/\/www.shacarah.com\/main\/?p=22"},"modified":"2021-09-10T04:07:35","modified_gmt":"2021-09-10T04:07:35","slug":"html5-js-canvas-subdivision-circles-animation","status":"publish","type":"post","link":"https:\/\/www.shacarah.com\/main\/script-animations\/html5-js-canvas-subdivision-circles-animation\/","title":{"rendered":"HTML5 Canvas Subdivision Circles Animation"},"content":{"rendered":"\n<div class=\"content\">\n\n\n    \n    <script src=\"https:\/\/www.shacarah.com\/Scripts\/modernizr-2.0.6.js\"><\/script>\n    <script src=\"https:\/\/www.shacarah.com\/Scripts\/dom-drag.js\"><\/script>\n    <script src=\"https:\/\/www.shacarah.com\/Scripts\/fractalCircles.js\"><\/script>\n    <div style=\"margin-top:10px; width:826px; height:506px\"><div style=\"border:solid 2px #FFFFFF; width:822px; height:502px\"><canvas id=\"canvas2\" style=\"width=\" 820\"=\"\" height=\"500\">\n    <\/canvas><\/div><\/div>\n<div id=\"tracing\" style=\"position: relative; color: #000000; margin: 5px 0px 0px 0px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-style: italic;\">Background:\n        <select style=\"margin-right:9px\" name=\"background\" id=\"background\" title=\"Background\">\n            <option selected=\"\" value=\"Black\">Black<\/option>\n            <option value=\"White\">White<\/option>\n        <\/select>\n        Subdivisions:\n        <select style=\"margin-right:9px\" name=\"subdivisions\" id=\"subdivisions\" title=\"subdivisions\">\n            <option value=\"1\">1<\/option>\n            <option value=\"2\">2<\/option>\n            <option value=\"3\">3<\/option>\n            <option value=\"4\">4<\/option>\n            <option value=\"5\">5<\/option>\n            <option value=\"6\">6<\/option>\n            <option value=\"7\">7<\/option>\n            <option value=\"8\">8<\/option>\n            <option selected=\"\" value=\"9\">9<\/option>\n        <\/select>\n        Shapes:\n        <select style=\"margin-right:9px\" name=\"shapes\" id=\"shapes\" title=\"shapes\">\n            <option selected=\"\" value=\"1\">1<\/option>\n            <option value=\"2\">2<\/option>\n            <option value=\"3\">3<\/option>\n            <option value=\"4\">4<\/option>\n            <option value=\"5\">5<\/option>\n            <option value=\"6\">6<\/option>\n            <option value=\"7\">7<\/option>\n            <option value=\"8\">8<\/option>\n            <option value=\"9\">9<\/option>\n        <\/select>\n        Fill:\n        <select style=\"margin-right:9px\" name=\"fill\" id=\"fill\" title=\"fill\">\n            <option selected=\"\" value=\".1\">Solid<\/option>\n            <option value=\".001\">Transparent<\/option>\n        <\/select>\n        Opacity:\n        <select style=\"margin-right:9px\" name=\"lineOpacity\" id=\"lineOpacity\" title=\"lineOpacity\">\n            <option value=\".25\">25%<\/option>\n            <option selected=\"\" value=\".1\">50%<\/option>\n            <option value=\".025\">75%<\/option>\n        <\/select>\n        Size:\n        <select style=\"margin-right:9px\" name=\"size\" id=\"size\" title=\"size\">\n            <option selected=\"\" value=\"4\">Large<\/option>\n            <option value=\"8\">Medium<\/option>\n            <option value=\"16\">Small<\/option>\n        <\/select>\n        <input name=\"Generate\" type=\"button\" id=\"generate\" title=\"Generate\" value=\"Generate\" style=\"cursor: pointer;\"><\/div>\n\n\n<div id=\"colorControls\" style=\"position:relative; display:block; height:60px; margin-left:-8px\"><div style=\"cursor: pointer; width: 30px; height: 30px; border: 1px solid rgb(0, 0, 0); background-color: rgb(255, 0, 0); position: absolute; left: 202px; top: 0px; z-index: 999; border-radius: 30px;\"><\/div><div style=\"cursor: pointer; width: 30px; height: 30px; border: 1px solid rgb(0, 0, 0); background-color: rgb(0, 255, 0); position: absolute; left: 454px; top: 0px; z-index: 999; border-radius: 30px;\"><\/div><div style=\"cursor: pointer; width: 30px; height: 30px; border: 1px solid rgb(0, 0, 0); background-color: rgb(0, 0, 255); position: absolute; left: 706px; top: 0px; z-index: 999; border-radius: 30px;\"><\/div><div style=\"width: 90px; height: 20px; position: absolute; left: 758px; top: 10px; z-index: 999;\">Color 1: <\/div><div style=\"width: 30px; height: 30px; border: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); position: absolute; left: 814px; top: 0px; z-index: 999; border-radius: 30px;\"><\/div><div style=\"position: absolute; width: 214px; height: 2px; background-color: rgb(0, 0, 0); left: 8px; top: 15px;\"><\/div><div style=\"position: absolute; width: 214px; height: 2px; background-color: rgb(0, 0, 0); left: 260px; top: 15px;\"><\/div><div style=\"position: absolute; width: 214px; height: 2px; background-color: rgb(0, 0, 0); left: 512px; top: 15px;\"><\/div><div style=\"cursor: pointer; width: 30px; height: 30px; border: 1px solid rgb(0, 0, 0); background-color: rgb(255, 0, 0); position: absolute; left: 202px; top: 35px; z-index: 999; border-radius: 30px;\"><\/div><div style=\"cursor: pointer; width: 30px; height: 30px; border: 1px solid rgb(0, 0, 0); background-color: rgb(0, 255, 0); position: absolute; left: 454px; top: 35px; z-index: 999; border-radius: 30px;\"><\/div><div style=\"cursor: pointer; width: 30px; height: 30px; border: 1px solid rgb(0, 0, 0); background-color: rgb(0, 0, 255); position: absolute; left: 706px; top: 35px; z-index: 999; border-radius: 30px;\"><\/div><div style=\"width: 90px; height: 20px; position: absolute; left: 758px; top: 40px; z-index: 999;\">Color 2: <\/div><div style=\"width: 30px; height: 30px; border: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); position: absolute; left: 814px; top: 35px; z-index: 999; border-radius: 30px;\"><\/div><div style=\"position: absolute; width: 214px; height: 2px; background-color: rgb(0, 0, 0); left: 8px; top: 50px;\"><\/div><div style=\"position: absolute; width: 214px; height: 2px; background-color: rgb(0, 0, 0); left: 260px; top: 50px;\"><\/div><div style=\"position: absolute; width: 214px; height: 2px; background-color: rgb(0, 0, 0); left: 512px; top: 50px;\"><\/div><\/div>\n\n\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":11,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,6,10],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-canvas","category-script-animations","category-script-drawing"],"_links":{"self":[{"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/posts\/22"}],"collection":[{"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":15,"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":382,"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/posts\/22\/revisions\/382"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/media\/11"}],"wp:attachment":[{"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shacarah.com\/main\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}