Question

我没有使用javascript和HTML的经验，但我想设计一个界面。这是故事;

我正在使用webgl进行设计并实现一些参数方程。每个等式由x，y和a组成。我可以让浏览器不规则地绘制我的方程式，但我不能让它为所有人做。

What I need to do

所以对于第1步，我写了一些javascript函数来调用a，但似乎它不起作用。

这是我的代码;

<!doctype html>
<html>
<body>
<p>Please input a number between 0.1 and 1:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<canvas width = "300" height = "300" id = "my_Canvas"></canvas>
<script>
function myFunction() {
var a, text;

// Get the value of the input field with id="numb"
a = document.getElementById("numb").value;
}
/* Step1: Prepare the canvas and get WebGL context */
var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');
/* Step2: Define the geometry and store it in buffer objects */
var vertices = new Array();
//myFunction does not work, so i have to initialize a in here 
a = 0.3; 
var x;
var y; 
var tmp;
tmp = 0;
x = 0;
y = 0;

  for (t=0;t<360;t+=0.01){
    //these are for cart
   x=a*(2*Math.cos(t)-Math.cos(2*t));
   y=a*(2*Math.sin(t)-Math.sin(2*t));

    vertices.push(x);
    //these are for other funct
    //x = a*Math.pow(Math.cos(t),3);
    //y = a*Math.pow(Math.sin(t),3);
    vertices.push(y);
     tmp++;

}

     // Create a new buffer object
     var vertex_buffer = gl.createBuffer();
     // Bind an empty array buffer to it
      gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
     // Pass the vertices data to the buffer
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
       // Unbind the buffer
      gl.bindBuffer(gl.ARRAY_BUFFER, null);

     /* Step3: Create and compile Shader programs */
     // Vertex shader source code
      var vertCode = 'attribute vec2 coordinates;' + 'void main(void) {' + '             gl_Position = vec4(coordinates,0.0, 1.0);' + '}';

    //Create a vertex shader object
    var vertShader = gl.createShader(gl.VERTEX_SHADER);
    //Attach vertex shader source code
    gl.shaderSource(vertShader, vertCode);
    //Compile the vertex shader
    gl.compileShader(vertShader);
    //Fragment shader source code
    var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0,         0.0,0.1);' + '}';
    // Create fragment shader object
    var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
    // Attach fragment shader source code
    gl.shaderSource(fragShader, fragCode);
    // Compile the fragment shader
    gl.compileShader(fragShader);

    // Create a shader program object to store combined shader program
    var shaderProgram = gl.createProgram();
    // Attach a vertex shader
    gl.attachShader(shaderProgram, vertShader);
    // Attach a fragment shader
    gl.attachShader(shaderProgram, fragShader);
    // Link both programs
    gl.linkProgram(shaderProgram);
    // Use the combined shader program object
    gl.useProgram(shaderProgram);
    /* Step 4: Associate the shader programs to buffer objects */
    //Bind vertex buffer object
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
    //Get the attribute location
    var coord = gl.getAttribLocation(shaderProgram, "coordinates");
    //point an attribute to the currently bound VBO
    gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
    //Enable the attribute
    gl.enableVertexAttribArray(coord);
    /* Step5: Drawing the required object (triangle) */
    // Clear the canvas
    gl.clearColor(0.5, 0.5, 0.5, 0.9);
    // Enable the depth test
    gl.enable(gl.DEPTH_TEST);
    // Clear the color buffer bit
    gl.clear(gl.COLOR_BUFFER_BIT);
    // Set the view port
    gl.viewport(0,0,canvas.width,canvas.height);
    // Draw the triangle
    gl.drawArrays(gl.LINES, 0, tmp);
    </script>
    </body>
     </html>

Answer 1

我已经对您的代码进行了一些编辑并将其放在jsFiddle上，以便您可以看到它正常工作。你遇到的主要问题是没有办法让函数在获得它的值之后改变它，所以我将你的画布设置包装在一个函数中，默认调用它并在有人做了一些输入后调用它。

function myFunction() {
  var a, text;

  // Get the value of the input field with id="numb"
  a = document.getElementById("numb").value;
  alterCanvas(a); //Call function that alters the canvas
}

function alterCanvas(a) { //Create a function to setup and alter the canvas
  /* Step1: Prepare the canvas and get WebGL context */
  var canvas = document.getElementById('my_Canvas');
  var gl = canvas.getContext('experimental-webgl');
  /* Step2: Define the geometry and store it in buffer objects */
  var vertices = new Array();
  //myFunction does not work, so i have to initialize a in here 

  if (typeof a == "undefined") a = 0.3;
  var x;
  var y;
  var tmp;
  tmp = 0;
  x = 0;
  y = 0;

  for (t = 0; t < 360; t += 0.01) {
    //these are for cart
    x = a * (2 * Math.cos(t) - Math.cos(2 * t));
    y = a * (2 * Math.sin(t) - Math.sin(2 * t));

    vertices.push(x);
    //these are for other funct
    //x = a*Math.pow(Math.cos(t),3);
    //y = a*Math.pow(Math.sin(t),3);
    vertices.push(y);
    tmp++;

  }

  // Create a new buffer object
  var vertex_buffer = gl.createBuffer();
  // Bind an empty array buffer to it
  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  // Pass the vertices data to the buffer
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  // Unbind the buffer
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  /* Step3: Create and compile Shader programs */
  // Vertex shader source code
  var vertCode = 'attribute vec2 coordinates;' + 'void main(void) {' + '             gl_Position = vec4(coordinates,0.0, 1.0);' + '}';

  //Create a vertex shader object
  var vertShader = gl.createShader(gl.VERTEX_SHADER);
  //Attach vertex shader source code
  gl.shaderSource(vertShader, vertCode);
  //Compile the vertex shader
  gl.compileShader(vertShader);
  //Fragment shader source code
  var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0,         0.0,0.1);' + '}';
  // Create fragment shader object
  var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
  // Attach fragment shader source code
  gl.shaderSource(fragShader, fragCode);
  // Compile the fragment shader
  gl.compileShader(fragShader);

  // Create a shader program object to store combined shader program
  var shaderProgram = gl.createProgram();
  // Attach a vertex shader
  gl.attachShader(shaderProgram, vertShader);
  // Attach a fragment shader
  gl.attachShader(shaderProgram, fragShader);
  // Link both programs
  gl.linkProgram(shaderProgram);
  // Use the combined shader program object
  gl.useProgram(shaderProgram);
  /* Step 4: Associate the shader programs to buffer objects */
  //Bind vertex buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  //Get the attribute location
  var coord = gl.getAttribLocation(shaderProgram, "coordinates");
  //point an attribute to the currently bound VBO
  gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
  //Enable the attribute
  gl.enableVertexAttribArray(coord);
  /* Step5: Drawing the required object (triangle) */
  // Clear the canvas
  gl.clearColor(0.5, 0.5, 0.5, 0.9);
  // Enable the depth test
  gl.enable(gl.DEPTH_TEST);
  // Clear the color buffer bit
  gl.clear(gl.COLOR_BUFFER_BIT);
  // Set the view port
  gl.viewport(0, 0, canvas.width, canvas.height);
  // Draw the triangle
  gl.drawArrays(gl.LINES, 0, tmp);
}
alterCanvas(); //Run function when the dom gets here.

https://jsfiddle.net/gregborbonus/gdn3ft9m/2/

下拉菜单，从用户获取输入

1 个答案: