Finding point inside disk defined by a radius

Question

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);
        //....
    }

}

user_2521214 · Answer

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

user_5515749 · Answer

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!

Finding point inside disk defined by a radius

2 Answers