{"id":532,"date":"2018-07-22T10:06:39","date_gmt":"2018-07-22T17:06:39","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=3102"},"modified":"2018-07-22T10:06:39","modified_gmt":"2018-07-22T17:06:39","slug":"prng-sine-rendering-easiest-seeded-random-with-index","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=532","title":{"rendered":"PRNG Sine Rendering (Easiest Seeded Random with Index)"},"content":{"rendered":"<p>Here is a codepen showing seeded random numbers created use `Math.sin`. We&#8217;ll get to the code in a bit, first a little backstory&#8230;<\/p>\n<p><iframe height='372' scrolling='no' title='PPRng Sine w Rendering' src='\/\/codepen.io\/ZevanRosser\/embed\/vJPXRZ\/?height=372&#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\/vJPXRZ\/'>PPRng Sine w Rendering<\/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>Over the years I&#8217;ve used all manner of famous random number generators. From <a href=\"https:\/\/actionsnippet.com\/?p=809\" target=\"blank\">Tausworthe<\/a> to <a href=\"https:\/\/en.wikipedia.org\/wiki\/Mersenne_Twister\" target=\"blank\">Mersenne Twister<\/a>. <\/p>\n<p>Sometime last year I was trying to find a seeded PRNG, when working in Objective-C `arc4random` seems to be the common choice. I quickly became frustrated however as it didn&#8217;t seem possible or at least didn&#8217;t seem easy at all to reset the sequence of numbers. Maybe there&#8217;s an easy way, but whatever it is, I couldn&#8217;t find it. So after probably an hour of frustration trying all the weird different PRNGs, I decided to resort to a super simple old trick.<\/p>\n<p><strong>Why do you care about resetting the sequence?<\/strong><\/p>\n<p>Having a seed that you save at the beginning of your program can be super powerful. You can use anything for this seed, like the time or just another random number. From that point on your random numbers will be completely deterministic and depending on the complexity of your program you can simply save the seed and use it again later &#8211; causing your program to do exactly the same thing it did last time it had that seed. Those of you who dabble with generative artwork are probably familiar with this idea.<\/p>\n<p>This experiment uses that trick:<br \/>\n<img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/imgs\/seed-18.jpg\" \/><br \/>\nThose textures will always be the same when the seed is 18. Thats an old experiment from the flash days, I think I used <a href=\"https:\/\/blog.gskinner.com\/archives\/2008\/01\/source_code_see.html\">Grant Skinner&#8217;s<\/a> seeded PRNG for that.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/imgs\/seed19.jpg\" \/><\/p>\n<p>On the off chance you still have <strong style=\"color:red\">flash<\/strong> in your browser you can see it here:<\/p>\n<p>Static black and white:<br \/>\n<a href=\"http:\/\/zevanrosser.com\/sketchbook\/things\/bw_tex_static.html\" target=\"blank\">http:\/\/zevanrosser.com\/sketchbook\/things\/bw_tex_static.html<\/a><\/p>\n<p>Animated black and white:<br \/>\n<a href=\"http:\/\/zevanrosser.com\/sketchbook\/things\/bw_tex_animated.html\" target=\"blank\">http:\/\/zevanrosser.com\/sketchbook\/things\/bw_tex_animated.html<\/a><\/p>\n<p>Ugly colors version:<br \/>\n<a href=\"http:\/\/zevanrosser.com\/sketchbook\/things\/col_tex_animated.html\" target=\"blank\">http:\/\/zevanrosser.com\/sketchbook\/things\/col_tex_animated.html<\/a><\/p>\n<p>It turns out that if you take sine or cosine and pop very large values for theta into it &#8211; you get something that looks very random. Lets look at the code:<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\nvar rc = 0,\r\n  seed = 30,\r\n  MAX_RAND = 0xffffff;\r\n\r\nfunction idxRand(nth) {\r\n  if (nth != null) rc = nth;\r\n  rc++;\r\n  return Math.abs(Math.sin(seed * rc) * MAX_RAND);\r\n}\r\n\r\nvar firstFour = [idxRand(), idxRand(), idxRand(), idxRand()],\r\n  second = idxRand(1),\r\n  fourth = idxRand(3);\r\n\r\nconsole.log(firstFour);\r\nconsole.log(second);\r\nconsole.log(fourth);\r\n\r\nvar canvas = document.createElement(\"canvas\"),\r\n  c = canvas.getContext(\"2d\");\r\n\r\ncanvas.width = 400;\r\ncanvas.height = 300;\r\nc.fillStyle = \"black\";\r\nc.fillRect(0, 0, canvas.width, canvas.height);\r\ndocument.body.appendChild(canvas);\r\n\r\nfor (var i = 0; i < 300; i++) {\r\n  c.fillStyle = \"red\";\r\n  c.fillRect(idxRand() % 200, i, 4, 4);\r\n\r\n  c.fillStyle = \"green\";\r\n  c.fillRect(200 + Math.random() * 200, i, 4, 4);\r\n}\r\n<\/pre>\n<p>Will output something like this:<\/p>\n<pre lang=\"\">\r\n[16576418.984205123, 5113873.3245154265, 14998774.234509233, 9741038.668934602]\r\n5113873.3245154265\r\n9741038.668934602\r\n<\/pre>\n<p>This code could be improved in a few different ways - but its good enough to illustrate the technique. Lines 1-9 are all you need to have a reproducible random sequence. With a large step value for theta and an even larger coefficient (0xffffff) for sine, you can use modulo to get the range you need (line 30). You can access the old values by passing an index to `idxRand`. This is illustrated in lines 11 through 17 - where we get the first four values and then grab them again using the index argument.<\/p>\n<p><iframe height='372' scrolling='no' title='PPRng Sine w Rendering' src='\/\/codepen.io\/ZevanRosser\/embed\/vJPXRZ\/?height=372&#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\/vJPXRZ\/'>PPRng Sine w Rendering<\/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>While significantly statistically different - and likely significantly different performance-wise, you'll notice that visually there is little difference... \ud83d\ude00<\/p>\n<p>UPDATE: Had an idea that an alternative post title for this would be <strong>Easily Attain the Nth value from a PPRNG(pseudo-pseudo-random-number-generator)...<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a codepen showing seeded random numbers created use `Math.sin`. We&#8217;ll get to the code in a bit, first a little backstory&#8230; See the Pen PPRng Sine w Rendering by Zevan Rosser (@ZevanRosser) on CodePen. Over the years I&#8217;ve used all manner of famous random number generators. From Tausworthe to Mersenne Twister. Sometime last [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[160,121,94,23,1],"tags":[170,171,172],"class_list":["post-532","post","type-post","status-publish","format-standard","hentry","category-javascript","category-math","category-misc","category-random","category-uncategorized","tag-prng","tag-random","tag-seed"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/532","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=532"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/532\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}