<!doctype html>
<html>
<head>
<title>WebGL Regular Convex Polygon Prisms - RJM Programming - June, 2015 - Thanks to http://www.cs.unm.edu/~angel/WebGL/7E/Common</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
<script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
<script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main()
{
gl_Position = projectionMatrix*modelViewMatrix*vPosition;
fColor = vColor;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
<script type='text/javascript'>
var suffixis=' ... http://www.rjmprogramming.com.au/HTMLCSS/ShapeDraw/webgl_test.html ... ';
var winois=null;
var ij;
var canvas;
var gl;
var numsides = location.search.split('numsides=')[1] ? location.search.split('numsides=')[1].split('&')[0] : 4;
var cemail = location.search.split('email=')[1] ? decodeURIComponent(location.search.split('email=')[1].split('&')[0]) : 'fillin@email.to';
var NumVertices = eval((numsides * 2) * 3);
var evalc="", evalcol="";
var delim="[";
var sidelen=eval((1.0 * 3.0) / numsides);
var x=eval(0.0 - (sidelen / 2.0) * (numsides / 3)), y=eval(0.0 - (sidelen / 2.0) * (numsides / 3)), z=1.5, otherz=0.5, thisis=1;
var bearing=0.0;
var prevbearing;
var nextx, nexty, nextis=2;
var prevx, prevy, previs=numsides, downis=eval(numsides);
downis++;
evalc="";
for (ij=0; ij<eval(numsides * 2); ij++) {
if (ij == numsides) {
z=0.5;
otherz=1.5;
}
nextx=eval(x + sidelen * Math.sin(bearing / 57.2957795));
if (Math.abs(nextx) < 0.00001) nextx = 0.0;
nexty=eval(y + sidelen * Math.cos(bearing / 57.2957795));
if (Math.abs(nexty) < 0.00001) nexty = 0.0;
prevbearing = ((bearing + 540 - (360.0 / numsides)) % 360.0);
prevx=eval(x + sidelen * Math.sin(prevbearing / 57.2957795));
if (Math.abs(prevx) < 0.00001) prevx = 0.0;
prevy=eval(y + sidelen * Math.cos(prevbearing / 57.2957795));
if (Math.abs(prevy) < 0.00001) prevy = 0.0;
if (eval((ij + 1) % numsides) != 0) {
evalc += (delim + "vec4(" + x + "," + y + "," + z + ",1.0) /" + "/" + thisis + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
delim=",";
evalc += (delim + "vec4(" + nextx + "," + nexty + "," + z + ",1.0) /" + "/" + nextis + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
}
if ((ij % numsides) == 0) {
evalc += (delim + "vec4(" + x + "," + y + "," + z + ",1.0) /" + "/" + thisis + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
evalc += (delim + "vec4(" + prevx + "," + prevy + "," + z + ",1.0) /" + "/" + previs + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
previs = eval(previs * 2);
}
if (ij < numsides) {
evalc += (delim + "vec4(" + x + "," + y + "," + z + ",1.0) /" + "/" + thisis + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
evalc += (delim + "vec4(" + x + "," + y + "," + otherz + ",1.0) /" + "/" + downis + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
}
x = nextx;
y = nexty;
thisis++;
nextis++;
downis++;
bearing += (360.0 / numsides);
}
evalc += "];";
evalcol += "];";
var vertices;
if (1 == 1) {
vertices = eval(evalc);
} else {
vertices = [
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4( 0.5, -0.5, 0.5, 1.0), //8
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4( 0.5, -0.5, 0.5, 1.0), //8
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4( 0.5, -0.5, 0.5, 1.0) //8
];
}
var vertexColors;
if (1 == 1) {
vertexColors = eval(evalcol);
} else {
vertexColors = [
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
];
}
var near = 0.3;
var far = 10.0;
var radius = 4.0;
var theta = 0.0;
var phi = 0.0;
var dr = 5.0 * Math.PI/180.0;
var fovy = 90.0; // Field-of-view in Y direction angle (in degrees)
var aspect; // Viewport aspect ratio
var modelViewMatrix, projectionMatrix;
var modelViewMatrixLoc, projectionMatrixLoc;
var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);
var program;
var program_originline;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var l_vBuffer;
var l_vPosition;
var l_cBuffer;
var l_vColor;
window.onload = function init() {
if (document.URL.indexOf('huh=') != -1 || parent.document.getElementById('glcanvas') != null || (document.referrer.indexOf('/HTMLCSS/ShapeDraw') != -1 && document.referrer.indexOf('.htm') == -1)) {
document.getElementById('myform').innerHTML+='<input type=hidden name=huh value=></input>';
document.getElementById('mydiv').style.position='absolute';
document.getElementById('mydiv').style.top='0px';
document.getElementById('mydiv').style.left='0px';
document.getElementById('mydiv').style.width='300px';
document.getElementById('mydiv').style.textAlign='left';
document.getElementById('mydiv').innerHTML='<canvas id="gl-canvas" width="300" height="300"></canvas>';
document.getElementById('mydiv2').style.position='absolute';
document.getElementById('mydiv2').style.top='310px';
document.getElementById('mydiv2').style.left='0px';
document.getElementById('mydiv2').style.textAlign='left';
document.getElementById('mydiv3').style.position='absolute';
document.getElementById('mydiv3').style.top='330px';
document.getElementById('mydiv3').style.left='0px';
document.getElementById('mydiv3').style.textAlign='left';
} else {
document.getElementById('mydiv').innerHTML='<canvas id="gl-canvas" width="400" height="400"></canvas>';
}
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas, {preserveDrawingBuffer:true} );
if ( !gl ) { alert( "WebGL isn't available" ); }
gl.viewport( 0, 0, canvas.width, canvas.height );
aspect = canvas.width/canvas.height;
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
var context = canvas.getContext("gl-canvas", {preserveDrawingBuffer: true});
// Load shaders and initialize attribute buffers
program_originline = initShaders( gl, "vertex-shader", "fragment-shader" );
program = initShaders( gl, "vertex-shader", "fragment-shader" );
//CUBE Buffers
cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
//gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );
vColor = gl.getAttribLocation( program, "vColor" );
//gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
//gl.enableVertexAttribArray( vColor);
vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
//gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
vPosition = gl.getAttribLocation( program, "vPosition" );
//Static Line
var l_vertices = [
vec4(0.0, 0.0, 0.0, 1.0),
vec4(5.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 5.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 5.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(-5.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, -5.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, -5.0, 1.0),
];
// Load the data into the GPU
l_vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(l_vertices), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
l_vPosition = gl.getAttribLocation( program_originline, "vPosition" );
var l_colors = [
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
];
l_cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(l_colors), gl.STATIC_DRAW );
l_vColor = gl.getAttribLocation( program_originline, "vColor" );
// buttons for viewing parameters
document.getElementById("Button1").onclick = function(){suffixis=suffixis.replace('pressed','') + ' 1 pressed'; near *= 1.1; far *= 1.1;};
document.getElementById("Button2").onclick = function(){suffixis=suffixis.replace('pressed','') + ' 2 pressed'; near *= 0.9; far *= 0.9;};
document.getElementById("Button3").onclick = function(){suffixis=suffixis.replace('pressed','') + ' 3 pressed'; radius *= 2.0;};
document.getElementById("Button4").onclick = function(){suffixis=suffixis.replace('pressed','') + ' 4 pressed'; radius *= 0.5;};
document.getElementById("Button5").onclick = function(){suffixis=suffixis.replace('pressed','') + ' 5 pressed'; theta += dr;};
document.getElementById("Button6").onclick = function(){suffixis=suffixis.replace('pressed','') + ' 6 pressed'; theta -= dr;};
document.getElementById("Button7").onclick = function(){suffixis=suffixis.replace('pressed','') + ' 7 pressed'; phi += dr;};
document.getElementById("Button8").onclick = function(){suffixis=suffixis.replace('pressed','') + ' 8 pressed'; phi -= dr;};
render();
}
var render = function(){
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//LINE PROGRAM
gl.useProgram( program_originline );
gl.enableVertexAttribArray( l_vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
gl.vertexAttribPointer( l_vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( l_vColor );
gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
gl.vertexAttribPointer( l_vColor, 4, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.LINES, 0, 12);
modelViewMatrixLoc = gl.getUniformLocation( program_originline, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program_originline, "projectionMatrix" );
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),
radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );
//CUBE PROGRAM
gl.useProgram( program );
gl.enableVertexAttribArray( vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor);
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.LINES, 0, NumVertices );
modelViewMatrixLoc = gl.getUniformLocation( program, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program, "projectionMatrix" );
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );
requestAnimFrame(render);
}
function closewinois() {
if (winois != null) {
winois.close();
winois=null;
}
document.getElementById('aemail').click();
}
function aemail(ame) { // thanks to http://www.telerik.com/forums/proper-way-to-do-mailto-and-tel-links(
window.top.location = ame.href;
}
function emailit() {
var qbits=document.getElementById('aemail').href.split("%20...%20");
document.getElementById('aemail').href=qbits[0] + "%20...%20" + numsides + "%20sides" + encodeURIComponent(suffixis);
suffixis=' ... http://www.rjmprogramming.com.au/HTMLCSS/ShapeDraw/webgl_test.html ... ';
var canvuri=canvas.toDataURL("image/png",0);
alert('When new window with WebGL 3D image opens after this ... Command-A or Ctrl-A (for Select All) and Command-C or Ctrl-C (for Copy) ... new window will close in 5 seconds');
winois=window.open('','_blank','top=150,left=2,width=410,height=460');
winois.document.write('<html><body><img src=' + canvuri + '></img></body></html>');
setTimeout(closewinois, 5000);
}
function andthen() {
if (document.URL.indexOf('numsides=') != -1) { document.getElementById('numsides').value=numsides; }
if (document.URL.indexOf('email=') != -1) {
document.getElementById('aemail').href='mailto:' + cemail + '?subject=My%20WebGL%203D%20Regular%20Convex%20Polygon%20Prism%20Below';
if (cemail != 'fillin@email.to' && cemail.indexOf('@') != -1) {
document.getElementById('email').value=cemail;
emailit(); //document.getElementById('bemail').click();
}
}
}
setTimeout(andthen, 1000);
</script>
</head>
<body style='background-color:yellow;'>
<h1 id='myh1' style="width:100%;text-align:center;">WebGL Regular Convex Polygon Prisms</h1>
<h3 style="width:100%;text-align:center;">RJM Programming - June, 2016</h3>
<h4 style="width:100%;text-align:center;">Thanks to <a target=_blank title='Useful link' href='http://www.cs.unm.edu/~angel/WebGL/7E/Common'>http://www.cs.unm.edu/~angel/WebGL/7E/Common</a></h4>
<div id='mydiv' style="width:100%;text-align:center;">
<canvas id="gl-canvas" width="400" height="400"></canvas>
</div>
<div id='mydiv2' style="width:100%;text-align:center;">
<button id="Button1" type="button">1</button>
<button id="Button2" type="button">2</button>
<button id="Button3" type="button">3</button>
<button id="Button4" type="button">4</button>
<button id="Button5" type="button">5</button>
<button id="Button6" type="button">6</button>
<button id="Button7" type="button">7</button>
<button id="Button8" type="button">8</button>
</div><br>
<div id='mydiv3' style="width:100%;text-align:center;">
<form id='myform' method='GET' action='./webgl_test.html'>Number of Sides: <input type='number' min=3 step=1 value=4 name=numsides id=numsides></input> Email To (optional): <input type='text' onblur=" document.getElementById('aemail').href='mailto:' + this.value + '?subject=My%20WebGL%203D%20Regular%20Convex%20Polygon%20Prism%20Below'; " name='email' id='email' value='fillin@email.to'></input><input type='submit' value='Draw'></input></form>
<input id='bemail' type='button' value='Email' onclick=" emailit(); "></input><a id='aemail' onclick=' if (navigator.userAgent.match(/Android/i)) { aemail(this); } ' href='mailto:fillin@email.to?subject=My%20WebGL%203D%20Regular%20Convex%20Polygon%20Prism%20Below' title='Email' style='display:none;'></a>
</div>
</body>
</html>