{"id":803,"date":"2012-03-06T03:53:35","date_gmt":"2012-03-06T03:53:35","guid":{"rendered":"http:\/\/41j.com\/blog\/?p=803"},"modified":"2012-03-06T03:55:17","modified_gmt":"2012-03-06T03:55:17","slug":"another-pretty-html5-thing","status":"publish","type":"post","link":"https:\/\/41j.com\/blog\/2012\/03\/another-pretty-html5-thing\/","title":{"rendered":"Another Pretty HTML5 thing"},"content":{"rendered":"<p>I remember writing ARM assembler code to make these pretty things about 15 years ago. Anyway, now in html5!<\/p>\n<p><a href=\"http:\/\/sgenomics.org\/~new\/can2.html\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/41j.com\/blog\/wp-content\/uploads\/2012\/03\/object-300x300.png\"  alt=\"\" title=\"object\" width=\"300\" height=\"300\" class=\"aligncenter size-medium wp-image-804\" srcset=\"https:\/\/41j.com\/blog\/wp-content\/uploads\/2012\/03\/object-300x300.png 300w, https:\/\/41j.com\/blog\/wp-content\/uploads\/2012\/03\/object-150x150.png 150w, https:\/\/41j.com\/blog\/wp-content\/uploads\/2012\/03\/object.png 412w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>Click Here to open in new window.<\/a><\/p>\n<p>And here&#8217;s the JS for reference:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\r\n  var ittr=10;\r\n  var delta=-0.05;\r\n\r\n  function draw_thing(ctx,ox,oy,sx,sy,ds,ex,ey,de) {\r\n\r\n      var mins=0;\r\n      var maxs=0;\r\n      if(ds &lt; 0) {mins=-200; maxs=0;} else {mins=200; maxs=0;}\r\n\r\n      for(sy=maxs;Math.abs(sy) &lt; Math.abs(mins);sy=sy+ds) {\r\n        ctx.beginPath();\r\n        ctx.moveTo(ox+sx,oy+sy);\r\n        ctx.lineTo(ox+ex,oy+ey);\r\n        ctx.closePath();\r\n        ctx.stroke();\r\n        ex=ex+de;\r\n      }\r\n\r\n      ctx.beginPath();\r\n      ctx.moveTo(ox,oy);\r\n      ctx.lineTo(ox,oy+mins);\r\n      ctx.closePath();\r\n      ctx.stroke();\r\n\r\n  }\r\n\r\n  function draw_frame() {\r\n    var canvas = document.getElementById(&quot;m_canvas&quot;);\r\n    if(canvas.getContext) {\r\n\r\n      var ctx = canvas.getContext(&quot;2d&quot;);\r\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n      ctx.lineWidth  = 1;\r\n\r\n      ctx.fillStyle = &quot;rgb(0,0,0)&quot;;\r\n      var size=1;\r\n      var offset=0;\r\n\r\n      draw_thing(ctx,200,200,0,0,  ittr, 200,0,0-ittr);\r\n      draw_thing(ctx,200,200,0,0,0-ittr, 200,0,0-ittr);\r\n      draw_thing(ctx,200,200,0,0,  ittr,-200,0,  ittr);\r\n      draw_thing(ctx,200,200,0,0,0-ittr,-200,0,  ittr);\r\n\r\n      ittr = ittr + delta;\r\n      if(ittr&lt;2 ) {delta = 0-delta; ittr=2;}\r\n      if(ittr&gt;10) {delta = 0-delta;}\r\n    }\r\n  }\r\n\r\n&lt;\/script&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I remember writing ARM assembler code to make these pretty things about 15 years ago. Anyway, now in html5! Click Here to open in new window. And here&#8217;s the JS for reference: &lt;script type=&quot;text\/javascript&quot;&gt; var ittr=10; var delta=-0.05; function draw_thing(ctx,ox,oy,sx,sy,ds,ex,ey,de) { var mins=0; var maxs=0; if(ds &lt; 0) {mins=-200; maxs=0;} else {mins=200; maxs=0;} for(sy=maxs;Math.abs(sy) &lt; [&hellip;]<\/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":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-803","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1RRoU-cX","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/comments?post=803"}],"version-history":[{"count":2,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/803\/revisions"}],"predecessor-version":[{"id":806,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/803\/revisions\/806"}],"wp:attachment":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/media?parent=803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/categories?post=803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/tags?post=803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}