円周上の点に沿ってランダムな形状を生成する

Question

私はwebglを初めて使っています。ループで生成された頂点から円を作成しました。円周上のある点でランダムな形状（小さな円）大きなcircle.Can誰も私に私はここでは、この をacheiveする方法についていくつかの情報を提供する円のための私のコードです：

var vertexShaderText = [ 
 
    'uniform vec2 u_resolution;', 
 
    '', 
 
    'attribute vec2 a_position;', 
 
    '', 
 
    'void main()', 
 
    '{', 
 
    '', 
 
    'vec2 clipspace = a_position/u_resolution * 1.0 ;', 
 
    '', 
 
    'gl_Position = vec4(clipspace * vec2(1, -1), 0, 1);', 
 
    '}' 
 
].join("\n"); 
 
var fragmentShaderText = [ 
 
    'precision mediump float;', 
 
    '', 
 
    'void main(void)', 
 
    '{', 
 
    '', 
 
    'gl_FragColor = vec4(0, 0, 0, 1.0);', 
 
    '', 
 
    '}' 
 

 
].join("\n"); 
 
var uni = function(){ 
 
    var canvas = document.getElementById("game-surface"); 
 
    var gl = canvas.getContext("webgl",{antialias: true}); 
 
    console.log("This is working"); 
 

 
    gl.clearColor(0.412,0.412,0.412,1); 
 
    gl.clear(gl.COLOR_BUFFER_BIT); 
 

 

 
    var vertextShader = gl.createShader(gl.VERTEX_SHADER); 
 
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 
 

 
    gl.shaderSource(vertextShader,vertexShaderText); 
 
    gl.shaderSource(fragmentShader,fragmentShaderText); 
 

 
    gl.compileShader(vertextShader); 
 
    gl.compileShader(fragmentShader); 
 

 
    if(!gl.getShaderParameter(vertextShader,gl.COMPILE_STATUS)){ 
 
    console.error("Error with vertexshader",gl.getShaderInfoLog(vertextShader)); 
 
    return; 
 
    } 
 
    if(!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS)){ 
 
    console.error("Error with fragmentShader",gl.getShaderInfoLog(fragmentShader)); 
 
    return; 
 
    } 
 

 

 

 
    var program =gl.createProgram(); 
 
    gl.attachShader(program,vertextShader); 
 
    gl.attachShader(program,fragmentShader); 
 
    gl.linkProgram(program); 
 
    gl.useProgram(program); 
 
    if(!gl.getProgramParameter(program,gl.LINK_STATUS)){ 
 
    console.error("Error linking program",gl.getProgramInfoLog(program)); 
 
    return; 
 
    } 
 
    gl.validateProgram(program); 
 
    if(!gl.getProgramParameter(program,gl.VALIDATE_STATUS)){ 
 
    console.error("Error validating",gl.getProgramInfoLog(program)); 
 
    } 
 

 
    var circle = {x: 0, y:0, r: 55}; 
 
    var ATTRIBUTES = 2; 
 
    var numFans = 32; 
 
    var degreePerFan = (2* Math.PI)/numFans; 
 
    var vertexData = [circle.x, circle.y]; 
 

 
    for(var i = 0; i <= numFans; i++) { 
 
    var index = ATTRIBUTES * i + 2; // there is already 2 items in array 
 
    var angle = degreePerFan * (i+0.1); 
 
    vertexData[index] = circle.x + Math.cos(angle) * circle.r; 
 
    vertexData[index + 1] = circle.y + Math.sin(angle) * circle.r; 
 
    } 
 
    console.log(vertexData); 
 
    var vertexDataTyped = new Float32Array(vertexData); 
 

 
    var buffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 
 
    gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW); 
 

 
    var resolutionLocation = gl.getUniformLocation(program, "u_resolution"); 
 
    gl.uniform2f(resolutionLocation, canvas.width, canvas.height); 
 

 
    gl.enableVertexAttribArray(positionLocation); 
 

 
    var positionLocation = gl.getAttribLocation(program, "a_position"); 
 
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0); 
 
    gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexData.length/ATTRIBUTES); 
 
}; 
 
uni();

<canvas id="game-surface"></canvas>

Answer 1

WebGLのがちょうどラスタライズライブラリであるため、それはあなたの質問に答えるのは難しいですどこかに何かを描く方法は文字通り1000種類あります。

だから、あなたは

• は、より多くのポイント

  を追加することができますあなたはサークルポイントを生成しました。他に何を描きたいのか、いくつかを生成してください。

• は別の場所で同じサークルを複数回描画し、

  のは、あなたが大きな円上に小さな円を描くように望んでいたとしましょうのサイズ。 Compute a matrix to scale and reorient大きな円where you want it to be、行列を更新して、円をもう一度描きます。

• は、正方形のような何かを描き、円の端にそれを置き、より多くの事あなたが円を描いただけのように

  を描きます。

• 1000のより多くの方法...