update e64c344 docs(readme): add yandex.metrics badge (#45)

docs/posts/2024-07-21-evenly-random-points-on-plane/index.html

@@ -3,18 +3,18 @@
 Possible use-cases:</p><ul><li>generate trees in a forest in a game world;</li><li>generate points for <a href=https://en.wikipedia.org/wiki/Voronoi_diagram>Voronoi diagram</a>
 (with areas of similar size);</li></ul><p>The simplest approach - to use uniformly distributed points with <code>(random(), random())</code> - doesn&rsquo;t work,
 because there will be areas with high density of points and areas with no points at all.
-Such distribution doesn&rsquo;t look <em>natural</em>.</p><p><svg id="a73d91a2309f46683b28aa503bc26f202" width="100%" height="100%" viewBox="0 0 700 400"/><p id=c3d92af658c6026a2fbb80340393a2721 style=text-align:center>Caption</p></p><script type=module>
+Such distribution doesn&rsquo;t look <em>natural</em>.</p><p><svg id="a133a02f90932b47ba8f5a62c2620863d" width="100%" height="100%" viewBox="0 0 700 400"/><p id=c21b92c87b9daa62a83f320f543060236 style=text-align:center>Caption</p></p><script type=module>
 
 const svgns = 'http://www.w3.org/2000/svg';
 
 const width =  700 ;
 const height =  400 ;
 
 const numPoints =  1700 ;
-document.getElementById('c3d92af658c6026a2fbb80340393a2721').innerText = `${numPoints} points`;
+document.getElementById('c21b92c87b9daa62a83f320f543060236').innerText = `${numPoints} points`;
 
 function renderSVG_UniformDistribution() {
-  let svg = document.getElementById('a73d91a2309f46683b28aa503bc26f202');
+  let svg = document.getElementById('a133a02f90932b47ba8f5a62c2620863d');
 
 
   while (svg.firstChild) {
@@ -41,14 +41,14 @@
   return result;
 }
 
-document.getElementById('a73d91a2309f46683b28aa503bc26f202').addEventListener('click', renderSVG_UniformDistribution);
+document.getElementById('a133a02f90932b47ba8f5a62c2620863d').addEventListener('click', renderSVG_UniformDistribution);
 
 renderSVG_UniformDistribution();
 
 </script><p>Various types of grids with gaps can give even distribution, but the picture will not look <em>random</em>.
 There will always be a pattern, sometimes more visible, sometimes less, but still visible. This
 doesn&rsquo;t look <em>natural</em> either.</p><p>A solution to this problem is <a href=https://en.wikipedia.org/wiki/Supersampling#Poisson_disk>Poisson disk sampling (or Poisson disk distribution)</a>:
-points are placed randomly, but not too close and not too far away from each other.</p><p><svg id="a729b62bd08f303306325a6fa24a129c8" width="100%" height="100%" viewBox="0 0 700 400"/><p id=c2c6f63b201a93533b496a708f02ad228 style=text-align:center>Caption</p></p><script type=module>
+points are placed randomly, but not too close and not too far away from each other.</p><p><svg id="a614822a096b8a3ff02b32273950da63c" width="100%" height="100%" viewBox="0 0 700 400"/><p id=c229237c5301aaf36d82042690b8f6a3b style=text-align:center>Caption</p></p><script type=module>
 
 const svgns = 'http://www.w3.org/2000/svg';
 
@@ -58,15 +58,15 @@
 const radius =  10 ;
 
 function renderSVG_PoissonDiskDistribution() {
-  let svg = document.getElementById('a729b62bd08f303306325a6fa24a129c8');
+  let svg = document.getElementById('a614822a096b8a3ff02b32273950da63c');
 
 
   while (svg.firstChild) {
     svg.removeChild(svg.firstChild);
   }
 
   const points = generatePointsByPoissonDiskDistribution(width, height, radius);
-  document.getElementById('c2c6f63b201a93533b496a708f02ad228').innerText = `${points.length} points`;
+  document.getElementById('c229237c5301aaf36d82042690b8f6a3b').innerText = `${points.length} points`;
 
   for (let p of points) {
     let circle = document.createElementNS(svgns, 'circle');
@@ -190,7 +190,7 @@
   }
 }
 
-document.getElementById('a729b62bd08f303306325a6fa24a129c8').addEventListener('click', renderSVG_PoissonDiskDistribution);
+document.getElementById('a614822a096b8a3ff02b32273950da63c').addEventListener('click', renderSVG_PoissonDiskDistribution);
 
 renderSVG_PoissonDiskDistribution()
 

docs/posts/2024-07-29-random-points-in-circle/index.html

@@ -2,13 +2,13 @@
 <meta name=keywords content="procedural generation"><meta name=description content="angle = random(); distance = R * sqrt(random())"><meta name=author content><link rel=canonical href=https://andreynautilus.github.io/posts/2024-07-29-random-points-in-circle/><link crossorigin=anonymous href=/assets/css/stylesheet.b609c58d5c11bb90b1a54e04005d74ad1ddf22165eb79f5533967e57df9c3b50.css integrity="sha256-tgnFjVwRu5CxpU4EAF10rR3fIhZet59VM5Z+V9+cO1A=" rel="preload stylesheet" as=style><link rel=icon href=https://andreynautilus.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://andreynautilus.github.io/favicon-16x16.png><link rel=icon type=image/png sizes=32x32 href=https://andreynautilus.github.io/favicon-32x32.png><link rel=apple-touch-icon href=https://andreynautilus.github.io/apple-touch-icon.png><link rel=mask-icon href=https://andreynautilus.github.io/safari-pinned-tab.svg><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate hreflang=en href=https://andreynautilus.github.io/posts/2024-07-29-random-points-in-circle/><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--code-block-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=text/javascript>(function(e,t,n,s,o,i,a){e[o]=e[o]||function(){(e[o].a=e[o].a||[]).push(arguments)},e[o].l=1*new Date;for(var r=0;r<document.scripts.length;r++)if(document.scripts[r].src===s)return;i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)})(window,document,"script","https://mc.yandex.ru/metrika/tag.js","ym"),ym(99367858,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0})</script><noscript><div><img src=https://mc.yandex.ru/watch/99367858 style=position:absolute;left:-9999px alt></div></noscript><meta property="og:title" content="Random points in circle with uniform distribution"><meta property="og:description" content="angle = random(); distance = R * sqrt(random())"><meta property="og:type" content="article"><meta property="og:url" content="https://andreynautilus.github.io/posts/2024-07-29-random-points-in-circle/"><meta property="article:section" content="posts"><meta property="article:published_time" content="2024-07-29T18:54:08+02:00"><meta property="article:modified_time" content="2024-07-29T18:54:08+02:00"><meta property="og:site_name" content="Andrey Nautilus blog"><meta name=twitter:card content="summary"><meta name=twitter:title content="Random points in circle with uniform distribution"><meta name=twitter:description content="angle = random(); distance = R * sqrt(random())"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"posts","item":"https://andreynautilus.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Random points in circle with uniform distribution","item":"https://andreynautilus.github.io/posts/2024-07-29-random-points-in-circle/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Random points in circle with uniform distribution","name":"Random points in circle with uniform distribution","description":"angle = random(); distance = R * sqrt(random())","keywords":["procedural generation"],"articleBody":"We need to generate a random point in a circle with uniform distribution.\nA naive approach with polar coordinates by picking a random angle and a random distance doesn’t give uniform distribution - there are more points close to center and fewer points at the radius. This article has explanation and visualization.\nNNN points, left to right: naive approach, correct formula, Monte Carlo (XXX attempts) Correct formula for polar coordinates In polar coordinates:\nangle = random(0, 2 * PI) distance = R * sqrt(random(0, 1)) Where R is the radius of the circle. And transformation to Cortesian coordinates:\nx = distance * cos(angle) y = distance * sin(angle) This article and StackOverflow threads give a mathematically correct explanation.\nMonte Carlo (multiple attempts) Another approach is to generate uniformly distributed random points in the bounding box of the circle and pick the first point that is inside the circle.\nWith random() being a uniformly random number, the naive approach for a point in a square:\nx = random() y = random() give uniformly distributed points. And x * x + y * y \u003c= R * R provides an easy test for point being inside the circle.\nObvious drawback - undefined number of attempts, but with uniformly distributed points the average amount of attempt should not be greater than 2 (on average we need 4 / PI attempts).\n","wordCount":"227","inLanguage":"en","datePublished":"2024-07-29T18:54:08+02:00","dateModified":"2024-07-29T18:54:08+02:00","mainEntityOfPage":{"@type":"WebPage","@id":"https://andreynautilus.github.io/posts/2024-07-29-random-points-in-circle/"},"publisher":{"@type":"Organization","name":"Andrey Nautilus blog","logo":{"@type":"ImageObject","url":"https://andreynautilus.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://andreynautilus.github.io/ accesskey=h title="Andrey Nautilus blog (Alt + H)"><img src=https://andreynautilus.github.io/apple-touch-icon.png alt aria-label=logo height=35>Andrey Nautilus blog</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://andreynautilus.github.io/links/ title=links><span>links</span></a></li><li><a href=https://andreynautilus.github.io/tags/ title=tags><span>tags</span></a></li><li><a href=https://andreynautilus.github.io/search/ title="search (Alt + /)" accesskey=/><span>search</span></a></li><li><a href=https://github.com/AndreyNautilus/AndreyNautilus.github.io title=src><span>src</span>&nbsp;<svg fill="none" shape-rendering="geometricPrecision" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><path d="M15 3h6v6"/><path d="M10 14 21 3"/></svg></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://andreynautilus.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://andreynautilus.github.io/posts/>posts</a></div><h1 class="post-title entry-hint-parent">Random points in circle with uniform distribution</h1><div class=post-meta><span title='2024-07-29 18:54:08 +0200 +0200'>July 29, 2024</span>&nbsp;·&nbsp;2 min</div></header><div class=post-content><p>We need to generate a random point in a circle with uniform distribution.</p><p>A naive approach with polar coordinates by picking a random angle and a random distance
 doesn&rsquo;t give uniform distribution - there are more points close to center and fewer points at the radius.
 <a href=https://www.anderswallin.net/2009/05/uniform-random-points-in-a-circle-using-polar-coordinates/>This article</a>
-has explanation and visualization.</p><p><svg id="ab891417062d04402b499c462c1d22de2" width="100%" height="100%" viewBox="0 0 620 200"/><p id=cd4cbb29028442602dd174e946029c112 style=text-align:center>NNN points, left to right: naive approach, correct formula, Monte Carlo (XXX attempts)</p></p><script type=module>
+has explanation and visualization.</p><p><svg id="a11671d2492b294c0b6e28d9402442dc0" width="100%" height="100%" viewBox="0 0 620 200"/><p id=c0684bb621edd4c9c022974249142d210 style=text-align:center>NNN points, left to right: naive approach, correct formula, Monte Carlo (XXX attempts)</p></p><script type=module>
 
 const svgns = 'http://www.w3.org/2000/svg';
 const numPoints = 250;
 
 function renderSVG_RandomPointsInCircle() {
-  let svg = document.getElementById('ab891417062d04402b499c462c1d22de2');
+  let svg = document.getElementById('a11671d2492b294c0b6e28d9402442dc0');
 
 
   while (svg.firstChild) {
@@ -45,7 +45,7 @@
     svg.appendChild(circle);
   }
 
-  let caption = document.getElementById('cd4cbb29028442602dd174e946029c112');
+  let caption = document.getElementById('c0684bb621edd4c9c022974249142d210');
   let text = `${numPoints} points, left to right: naive approach, correct formula, Monte Carlo (${attempts} attempts)`;
   caption.innerText = text;
 }
@@ -97,7 +97,7 @@
   return [attempts, result];
 }
 
-document.getElementById('ab891417062d04402b499c462c1d22de2').addEventListener('click', renderSVG_RandomPointsInCircle);
+document.getElementById('a11671d2492b294c0b6e28d9402442dc0').addEventListener('click', renderSVG_RandomPointsInCircle);
 
 renderSVG_RandomPointsInCircle()