{"id":192,"date":"2009-02-16T11:17:15","date_gmt":"2009-02-16T18:17:15","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=797"},"modified":"2009-02-16T11:17:15","modified_gmt":"2009-02-16T18:17:15","slug":"hsv-hsb-to-rgb","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=192","title":{"rendered":"(HSV HSB) to RGB"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\n&#x5B;SWF(width=720,height=360,backgroundColor=0x000000,frameRate=30)]\r\n\r\n\/\/ ported from here:\r\n\/\/http:\/\/www.cs.rit.edu\/~ncs\/color\/t_convert.html\r\n\r\nfunction hsv(h:Number, s:Number, v:Number):Array{\r\n\tvar r:Number, g:Number, b:Number;\r\n\tvar i:int;\r\n\tvar f:Number, p:Number, q:Number, t:Number;\r\n\t \r\n\tif (s == 0){\r\n\t\tr = g = b = v;\r\n\t\treturn &#x5B;Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\r\n\t}\r\n\t\r\n\th \/= 60;\r\n\ti  = Math.floor(h);\r\n\tf = h - i;\r\n\tp = v *  (1 - s);\r\n\tq = v * (1 - s * f);\r\n\tt = v * (1 - s * (1 - f));\r\n\t\r\n\tswitch( i ) {\r\n\t\tcase 0:\r\n\t\t\tr = v;\r\n\t\t\tg = t;\r\n\t\t\tb = p;\r\n\t\t\tbreak;\r\n\t\tcase 1:\r\n\t\t\tr = q;\r\n\t\t\tg = v;\r\n\t\t\tb = p;\r\n\t\t\tbreak;\r\n\t\tcase 2:\r\n\t\t\tr = p;\r\n\t\t\tg = v;\r\n\t\t\tb = t;\r\n\t\t\tbreak;\r\n\t\tcase 3:\r\n\t\t\tr = p;\r\n\t\t\tg = q;\r\n\t\t\tb = v;\r\n\t\t\tbreak;\r\n\t\tcase 4:\r\n\t\t\tr = t;\r\n\t\t\tg = p;\r\n\t\t\tb = v;\r\n\t\t\tbreak;\r\n\t\tdefault:\t\t\/\/ case 5:\r\n\t\t\tr = v;\r\n\t\t\tg = p;\r\n\t\t\tb = q;\r\n\t\t\tbreak;\r\n\t}\r\n\treturn &#x5B;Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\r\n}\r\n\r\n\r\n\/\/\r\n\/\/  -- test it out by drawing a few things\r\n\/\/\r\n\r\nvar canvas:BitmapData = new BitmapData(720, 360, false, 0x000000);\r\n\r\naddChild(new Bitmap(canvas));\r\n \r\ncanvas.lock();\r\nvar size:int = canvas.width * canvas.height;\r\nvar xp:int, yp:int, c:Array, i:int;\r\n\r\nfor (i = 0; i&lt;size; i++){\r\n\txp = i % 360;\r\n\typ = i \/ 360;\r\n\tc =  hsv(xp, 1, yp \/ 360);\r\n\tcanvas.setPixel(xp, yp, c&#x5B;0] &lt;&lt; 16 | c&#x5B;1] &lt;&lt; 8 | c&#x5B;2]);\r\n}\r\n\r\nvar dx:Number, dy:Number, dist:Number, ang:Number;\r\n\r\nfor (i = 0; i&lt;size; i++){\r\n\txp = i % 360;\r\n\typ = i \/ 360;\r\n\tdx = xp - 180;\r\n\tdy = yp - 180;\r\n\tdist = 1 - Math.sqrt((dx * dx) + (dy * dy)) \/ 360;\r\n\tang = Math.atan2(dy, dx) \/ Math.PI * 180;\r\n\tif (ang &lt; 0){\r\n\t\tang += 360;\r\n\t}\r\n\tc =  hsv(ang, 1, dist);\r\n\tcanvas.setPixel(360 + xp, yp, c&#x5B;0] &lt;&lt; 16 | c&#x5B;1] &lt;&lt; 8 | c&#x5B;2]);\r\n}\r\ncanvas.unlock();\r\n<\/pre>\n<p>This is one of those things I&#8217;ve been meaning to play with for awhile. The above demos a function called hsv() which takes 3 arguments: angle (0-360), saturation(0-1) and value(0-1). The function returns an array of rgb values each with a range of (0-255). <\/p>\n<p>There&#8217;s some room for optimization here, but for clarity I left as is. Even just playing with HSV (also know as HSB) for a few minutes, I see some interesting potential for dynamically generating color palettes for generative style experiments.<\/p>\n<p>I looked around for the most elegant looking code snippet to port in order to write this&#8230; I eventually stumbled upon <a href=\"http:\/\/www.cs.rit.edu\/~ncs\/color\/t_convert.html\" target='blank'>this great resource.<\/a><\/p>\n<p>If you test the above on your timeline it will generate this image:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.actionsnippet.com\/imgs\/hsv.jpg\" \/><\/p>\n<p><i>I usually only post one snippet a day&#8230; not sure why I decided to post two today.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#x5B;SWF(width=720,height=360,backgroundColor=0x000000,frameRate=30)] \/\/ ported from here: \/\/http:\/\/www.cs.rit.edu\/~ncs\/color\/t_convert.html function hsv(h:Number, s:Number, v:Number):Array{ var r:Number, g:Number, b:Number; var i:int; var f:Number, p:Number, q:Number, t:Number; if (s == 0){ r = g = b = v; return &#x5B;Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; } h \/= 60; i = Math.floor(h); f = h &#8211; i; p [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,59,114,25,26],"tags":[3,40,4],"class_list":["post-192","post","type-post","status-publish","format-standard","hentry","category-bitmapdata","category-color","category-graphics-algorithms","category-pixel-manipulation","category-setpixel","tag-actionscript","tag-color","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/192","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=192"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/192\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}