Hi, I have had an idea about disproving the use of PI in circles in nature and figured this was a good opportunity to learn webgl so I could test it, I recently tried following a guide to get started but dumbass that I am I forgot to bookmark it and lost the url to return to when I came back to it, the “back to it” part being today, so I tried modding code that had worked for me already and it resulted in errors, can someone take a look at the javascript below and tell me what I did wrong please (the main function to look at is the 2nd last):
var seeOut = null;
var seeGl = null;
const seeVertexShaderCode = `
// an attribute will receive data from a buffer
attribute vec4 a_coords;
// all shaders have a main function
void main() {
// gl_Position is a special variable a vertex shader
// is responsible for setting
gl_Position = a_coords;
}`;
const seeFragmentShaderCode = `
// fragment shaders don't have a default precision so we need
// to pick one. mediump is a good default. It means "medium precision"
precision mediump float;
void main()
{
// gl_FragColor is a special variable a fragment shader
// is responsible for setting
gl_FragColor = vec4(1, 0, 0.5, 1); // return reddish-purple
}`;
function createShader(gl, type, code) {
const shader = gl.createShader( type );
// Send the source to the shader object
gl.shaderSource( shader, code );
// Compile the shader program
gl.compileShader( shader );
// See if it compiled successfully
if (!gl.getShaderParameter( shader, gl.COMPILE_STATUS) )
{
alert
(
'An error occurred compiling the shaders: '
+ gl.getShaderInfoLog( shader )
);
gl.deleteShader( shader );
return null;
}
return shader;
}
function createProgram( gl, vsCode, fsCode )
{
// Initialize a shader program, so WebGL knows how to draw our data
const vs = createShader( gl, gl.VERTEX_SHADER, vsCode );
const fs = createShader( gl, gl.FRAGMENT_SHADER, fsCode );
const ctx = gl.createProgram();
gl.attachShader( ctx, vs );
gl.attachShader( ctx, fs );
gl.linkProgram( ctx );
if ( !gl.getProgramParameter( ctx, gl.LINK_STATUS ) ) {
alert(
'Unable to initialize the ctx program: '
+ gl.getProgramInfoLog( ctx )
);
return null;
}
return ctx;
}
function createPositionsBuffer( gl, positions ) {
// Create a buffer for the square's positions.
const buff = gl.createBuffer();
// Select the positionBuffer as the one to apply buffer
// operations to from here out.
gl.bindBuffer( gl.ARRAY_BUFFER, buff );
// Now pass the list of positions into WebGL to build the
// shape. We do this by creating a Float32Array from the
// JavaScript array, then use it to fill the current buffer.
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array( positions ),
gl.STATIC_DRAW
);
return buff;
}
function newPointXY( x, y )
{
return { x : x, y : y };
}
function buildSolidTriangle( points, a, b, c )
{
points.push( a.x, a.y, b.x, b.y, c.x, c.y );
return points;
}
function drawScene( gl, program, vtxPosition )
{
var points = [];
gl.viewport( 0, 0, gl.canvas.width, gl.canvas.height );
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
gl.clear( gl.COLOR_BUFFER_BIT );
gl.useProgram( program );
gl.enableVertexAttribArray( vtxPosition );
for ( var p = 1; p < 4; ++p )
{
points = buildSolidTriangle
(
points
, newPointXY( 1 / p, 0 )
, newPointXY( 0.5 / p, -0.5 / p )
, newPointXY( 0.5 / p, 0.5 / p )
);
}
const vxPoints = createPositionsBuffer( gl, points );
gl.bindBuffer( gl.ARRAY_BUFFER, vxPoints );
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
var size = 2; // 2 components per iteration
var type = gl.FLOAT; // the data is 32bit floats
var normalize = false; // don't normalize the data
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
var offset = 0; // start at the beginning of the buffer
gl.vertexAttribPointer
(
vtxPosition
, size
, type
, normalize
, stride
, offset
);
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = points.length / 2;
gl.drawArrays( primitiveType, offset, count );
}
function drawSquare()
{
/* Assign shorthand */
var gl = seeGl;
if ( !seeGl )
{
seeOut = document.getElementById("seeOut");
seeGl = seeOut.getContext("webgl");
if ( !seeGl )
{
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
return;
}
gl = seeGl;
}
const Program = createProgram
(
gl, seeVertexShaderCode, seeFragmentShaderCode
);
if ( !Program )
{
alert("no program");
return;
}
const vtxPosition = gl.getAttribLocation ( Program, 'a_position' );
drawScene( gl, Program, vtxPosition );
}