{"id":1385,"date":"2009-09-05T22:42:22","date_gmt":"2009-09-06T02:42:22","guid":{"rendered":"http:\/\/www.gubatron.com\/blog\/?p=1385"},"modified":"2009-09-05T22:42:22","modified_gmt":"2009-09-06T02:42:22","slug":"iterative-sierpinksi-fractal-drawn-on-html5-canvas","status":"publish","type":"post","link":"https:\/\/www.gubatron.com\/blog\/iterative-sierpinksi-fractal-drawn-on-html5-canvas\/","title":{"rendered":"Iterative Sierpinksi Fractal (drawn on HTML5 Canvas)"},"content":{"rendered":"

So maybe you’ve seen this very famous fractal called the Sierpinksi Fractal.<\/p>\n

<\/p>\n

A few days ago I heard that you could create this fractal pattern by simply plotting out of a random sequence of mid points of an ever growing set of these mid points. So curiosity added with my apetite for playing with the HTML5 Canvas object and you have me playing on a saturday afternoon and then blogging about it.<\/p>\n

Drawing this thing<\/strong><\/p>\n

Usually you’d think of drawing the Sierpinski Triangle the Recursive way, specially if you’re a CS student. The algorithm would be basically… For each triangle you create 3 triangles, one on top, one on the left, and one on the right (in the order that you want), repeat and rinse for each new triangle (until you decide to stop… you can use for example the height of the next triangle to stop, if too small stop)<\/p>\n

But then I heard on some online video lecture about fractals that you could obtain the same results in an iterative fashion, no recursion whatsoever, just generate point after point randomly following one basic rule. <\/p>\n

Choose 3 points in a plane, then choose 2 random points of the 3 and draw the middle point of these 2. Do the same for the new set of points. If the 3 initial points represent the vertices of a triangle you have yourself a Sierpinski fractal triangle. If you don’t choose an initial triangle, you’ll also get Sierpinski but it looks as if you were looking at the triangle from a random angle.<\/p>\n

I must say I was pretty amazed when I saw it working… TADA!!!!<\/p>\n

<\/p>\n


\nTry it on your browser<\/a> (Tested and works under Firefox 3.5, Chromium 4.0.2, and Safari)<\/p>\n

That’s how it looks when you draw 800k random mid points.<\/p>\n

PS: It runs faster in Chrome, props to Chrome developers.<\/p>\n","protected":false},"excerpt":{"rendered":"

So maybe you’ve seen this very famous fractal called the Sierpinksi Fractal. A few days ago I heard that you could create this fractal pattern by simply plotting out of a random sequence of mid points of an ever growing set of these mid points. So curiosity added with my apetite for playing with the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","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":[30],"tags":[249,437,537,579,585,896],"class_list":["post-1385","post","type-post","status-publish","format-standard","hentry","category-geeklife","tag-canvas","tag-fractals","tag-html5","tag-iterative","tag-javascript","tag-sierpinski"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5Unzf-ml","jetpack-related-posts":[{"id":2126,"url":"https:\/\/www.gubatron.com\/blog\/animating-a-game-like-sky-with-html5-canvas\/","url_meta":{"origin":1385,"position":0},"title":"Animating a game-like sky with HTML5 Canvas","author":"gubatron","date":"December 28, 2010","format":false,"excerpt":"Try it | View Source Again playing a little more with HTML5 and Canvas animation. This time around the result is a little more pleasing to the eye, based on some ideas I have for a little arcade game I want to make I've created a gradient blue sky and\u2026","rel":"","context":"In "AJAX"","block_context":{"text":"AJAX","link":"https:\/\/www.gubatron.com\/blog\/category\/ajax\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2121,"url":"https:\/\/www.gubatron.com\/blog\/playing-with-basics-of-html5-canvas\/","url_meta":{"origin":1385,"position":1},"title":"Playing with basics of HTML5 Canvas","author":"gubatron","date":"December 18, 2010","format":false,"excerpt":"Here's a snippet of something I did tonight to play a bit with the Canvas and 2d Graphics context objects in javascript. [html] Playing with Canvas<\/title> <\/head> <body style=\"padding:0 0; margin: 0 0; background:black\"> <canvas id=\"myCanvas\" width=\"1024\" height=\"1024\" ><\/canvas> <script type=\"text\/javascript\"> \/\/convert to CSS friendly Hex String function\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1324,"url":"https:\/\/www.gubatron.com\/blog\/html-5-is-out-and-about\/","url_meta":{"origin":1385,"position":2},"title":"HTML 5 is out and about","author":"gubatron","date":"July 11, 2009","format":false,"excerpt":"I believe that the <canvas>, <audio>and <video> tags will make the web a pretty exciting place. A lot of Flash components will be rewritten or converted into Javascript+HTML5 Object components making available more reusable elements for a graphical and interactive web, all being open sourced (javascript) and with no extra\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2749,"url":"https:\/\/www.gubatron.com\/blog\/deploying-html5-apps-on-cloudfront-with-efficient-invalidation-requests\/","url_meta":{"origin":1385,"position":3},"title":"Deploying HTML5 apps on CloudFront with efficient invalidation requests","author":"gubatron","date":"June 8, 2012","format":false,"excerpt":"So you decided to build your next web app\/site using nothing but HTML5 and Javascript. No server side processing for anything related to UI. This means you will be coding a lot of JavaScript. Wouldn't it be nice to put all that static HTML and JS on your CloudFront CDN\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3942,"url":"https:\/\/www.gubatron.com\/blog\/pascal-triangle-generator-in-python-and-then-in-haskell-the-gubatron-method\/","url_meta":{"origin":1385,"position":4},"title":"Pascal Triangle Generator in Python, and then in Haskell – The Gubatron Method","author":"gubatron","date":"May 6, 2021","format":false,"excerpt":"Here's in python, imperatively, and then in functional style without the need for loops. https:\/\/gist.github.com\/gubatron\/ed966ea4e614d6733715376ad5cfb85f Here's in Haskell, I call it the gubatron's method, explained in the comments. Saw it by looking at a pattern while trying to solve it in paper, it just clicked. Not sure if this is\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1991,"url":"https:\/\/www.gubatron.com\/blog\/manifest-on-internets-evolution\/","url_meta":{"origin":1385,"position":5},"title":"Manifest on Internet’s Evolution","author":"gubatron","date":"March 18, 2015","format":false,"excerpt":"(Forgotten draft from May 31st 2010) I'm a little sad to see some of the paths the internet is taking lately. I personally think it's enough about the infatuation that people have with \"Social Networking\", enough, it's boring and it makes us waste precious time as a race. Technology is\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/1385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/comments?post=1385"}],"version-history":[{"count":0,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/1385\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/media?parent=1385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/categories?post=1385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/tags?post=1385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}