0
Ich habe keine Erfahrung mit Javascript und HTML, aber ich möchte eine Schnittstelle entwerfen. Hier ist die Geschichte;Dropdown-Menü, Eingabe von Benutzer
Ich benutze webgl für Design und implementiere einige parametrische Gleichungen. Jede Gleichung besteht aus x, y und a. Ich kann den Browser dazu bringen, meine Gleichungen individuell zu zeichnen, aber ich kann es nicht für alle machen.
Also für Schritt 1, schreibe ich eine Javascript-Funktion ein nennen, aber es scheint es nicht funktioniert.
Hier ist mein Code;
<!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>
Wenn Sie diese in eine jsfiddle oder etwas extrahieren könnte, wäre es leichter für uns zu helfen. Hast du diesen Code auch selbst geschrieben? Sieht so aus, als ob Sie etwas kopieren und einfügen, aber ich könnte falsch liegen. –
Ich lerne Javascript, die Zeichenfunktionen werden aus meiner opengl-Bibliothek eingefügt, andere, ohne Schritte zu sagen, sind handgefertigt, aber da ich neu bin, habe ich vergessen, einige meiner Experimente zu löschen :) – Ozzzy