0
Javascript ve HTML ile ilgili deneyimim yok ama bir arayüz tasarlamak istiyorum. İşte hikaye;Açılır menü, kullanıcıdan girdi alma
Bazı parametrik denklemlerin tasarımı ve uygulanması için webgl kullanıyorum. Her bir denklem x, y ve a'dan oluşur. Tarayıcıyı denklemlerimi kişisel olarak çizebilirim ama bunu herkes için yapamam.
işte benim kodum;
<!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>
Bir jsfiddle veya içine bir şey bu ayıklamak olsaydı, bize yardım etmek için daha kolay olurdu. Ayrıca, bu kodu kendiniz mi yazdınız? Kopyalayıp yapıştırdığın gibi görünüyor ama yanılıyor olabilirim. –
Ben javascript öğreniyorum, çizim fonksiyonları benim elimden gelmiyor diyen opengl kütüphanemden yapıştırılmış, fakat yeni olduğum için deneylerimden bazılarını silmeyi unuttum :) – Ozzzy