'Finding point inside disk defined by a radius
I have come across a shader that I am trying to understand where a point is found within a disk defined by a radius.
How does this function DiskPoint work?
float HASHVALUE = 0.0f;
vec2 RandomHashValue()
{
return fract(sin(vec2(HASHVALUE += 0.1, HASHVALUE += 0.1)) * vec2(43758.5453123, 22578.1459123));
}
vec2 DiskPoint(in float radius, in float x1, in float x2)
{
float P = radius * sqrt(1.0f - x1);
float theta = x2 * 2.0 * PI;
return vec2(P * cos(theta), P * sin(theta));
}
void main()
{
HASHVALUE = (uvCoords.x * uvCoords.y) * 64.0;
HASHVALUE += fract(time) * 64.0f;
for (int i = 0; i < samples; ++i)
{
vec2 hash = RandomHashValue();
vec2 disk = DiskPoint(sampleRadius, hash.x, hash.y);
//....
}
}
Solution 1:[1]
I see it like this:
vec2 DiskPoint(in float radius, in float x1, in float x2)
{
// x1,x2 are "uniform randoms" in range <0,+1>
float P = radius * sqrt(1.0f - x1); // this will scale x1 into P with range <0,radius> but change the distribution to uniform number of points inside disc
float theta = x2 * 2.0 * PI; // this will scale x2 to theta in range <0,6.28>
return vec2(P * cos(theta), P * sin(theta)); // and this just use the above as polar coordinates with parametric circle equation ...
// returning "random" point inside disc with uniform density ...
}
but I just guessed and not tested it so take that in mind
Solution 2:[2]
Based on @Spektre“s suggestion I drew the outcome of this function on a Canvas.
the code looks like this:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
class vec2{
constructor(x, y){
this.x = x;
this.y = y;
}
}
function DiskPoint(radius, x1, x2){
var p = radius * Math.sqrt(1.0 - x1);
var theta = x2 * 2.0 * 3.14;
return new vec2(p * Math.cos(theta), p * Math.sin(theta));
}
ctx.fillStyle = "#FF0000";
ctx.fillRect(100, 100, 1, 1);
for(var i = 0; i < 100; i++){
for(var j = 0; j < 100; j++){
var point = DiskPoint(0.5, i/100, j/100);
ctx.fillRect(point.x * 100 + 100, point.y * 100 + 100, 1, 1);
console.log(point.x, point.y);
}
}
This is the created Pattern:
It looks like it finds for every (x1,x2) a point in the circle of given radius.
Hope this will help!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Spektre |
| Solution 2 | Dropye |

