//author is me. Paul Caron. Your neighbourhood geek. Nice to meet you. class Matrix{ constructor(rows, columns){ this.rows=rows; this.columns=columns; this.values=new Array(rows*columns); } setValues(values){ for(let a=0;a-0.05){ vertices.push(x,y,z,1.0,0.0,0.5,1.0); } } } } } makeShapes() ; //////////////////////////////////////// //WebGL stuff...Shader codes and whatnot /////////////////////////////////////// var vertexShaderCode = [ "precision mediump float;", "", "attribute vec4 vertPosition;",//attributes are like parameters input unique to each vertex "attribute vec3 vertColor;", "varying vec3 fragColor;",//varying are like outputs that goes to frag shader "", "uniform mat4 mWorld;",//uniform are like parameter input that are the same for all vertices "uniform mat4 mProj;", "uniform mat4 mWorldX;", "uniform mat4 mWorldY;", "uniform mat4 mWorldZ;", "uniform mat4 mTranslation;", "uniform mat4 mScale;", "void main()", "{", " gl_Position =mProj* mTranslation*mWorldY* mWorldX *mWorldZ * vertPosition;", " gl_PointSize = 2.0;", " fragColor = vertColor*4.0/(gl_Position.z*gl_Position.z) ;", "}" ].join("\n"); var fragmentShaderCode = [ "precision mediump float;", "", "varying vec3 fragColor;", "void main()", "{", " gl_FragColor = vec4(fragColor, 1.0);", "}" ].join("\n"); var canvas; var gl; function init(){ canvas = document.getElementById("canvas"); canvas.width=innerWidth-10; canvas.height=innerHeight-10; // gl = canvas.getContext("webgl"); gl = canvas.getContext("webgl", {preserveDrawingBuffer: true}); canvas.addEventListener('touchstart', sketchpad_touchStart, false); canvas.addEventListener('touchmove', sketchpad_touchMove, false); canvas.addEventListener('touchend', enableSound, false); if(!gl){ gl = canvas.getContext("experimental-webgl"); } if(!gl){ alert("no webgl support"); } ///////////////////// //SHADERS //////////////////// //Create Shaders var vertexShader = gl.createShader(gl.VERTEX_SHADER); var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); //add shader source code gl.shaderSource(vertexShader, vertexShaderCode ); gl.shaderSource(fragmentShader, fragmentShaderCode); //compile shaders gl.compileShader(vertexShader); if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)){ console.log(gl.getShaderInfoLog(fragmentShader)); } gl.compileShader(fragmentShader); if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)){ console.log(gl.getShaderInfoLog(fragmentShader)); } //create program var program = gl.createProgram(); //attach shaders to it gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); //link the program gl.linkProgram(program); if(!gl.getProgramParameter(program, gl.LINK_STATUS)){ console.log(gl.getProgramInfoLog(program)); } //validate the program if(!gl.getProgramParameter(program, gl.VALIDATE_STATUS)){ console.log(gl.getProgramInfoLog(program)); } //////////////////// //Buffers //////////////////// var vertexBufferObject = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBufferObject); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); var positionAttribLocation = gl.getAttribLocation(program, "vertPosition"); var colorAttribLocation = gl.getAttribLocation(program, "vertColor"); gl.vertexAttribPointer( positionAttribLocation, 4,//number of elements gl.FLOAT,//type of element gl.FALSE, 7 * Float32Array.BYTES_PER_ELEMENT,//size of each vertex 0//offset from beginning of vertex to this attribute ); gl.vertexAttribPointer( colorAttribLocation, 3,//number of elements gl.FLOAT,//type of element gl.FALSE, 7 * Float32Array.BYTES_PER_ELEMENT,//size of each 4 * Float32Array.BYTES_PER_ELEMENT//offset from beginning of vertex to this attribute ); gl.enableVertexAttribArray(positionAttribLocation); gl.enableVertexAttribArray(colorAttribLocation); gl.useProgram(program); //////////////////// var mViewUniformLocation = gl.getUniformLocation(program, "mView"); var mProjUniformLocation = gl.getUniformLocation(program, "mProj"); var mWorldXUniformLocation = gl.getUniformLocation(program, "mWorldX"); var mWorldYUniformLocation = gl.getUniformLocation(program, "mWorldY"); var mWorldZUniformLocation = gl.getUniformLocation(program, "mWorldZ"); var mTranslationUniformLocation = gl.getUniformLocation(program, "mTranslation"); /////////// setProjection(canvas.width/canvas.height,Math.PI/3,0.1,1000.0); gl.uniformMatrix4fv(mProjUniformLocation, gl.FALSE, p); gl.uniformMatrix4fv(mWorldXUniformLocation, gl.FALSE, rotationX.values ); gl.uniformMatrix4fv(mWorldYUniformLocation, gl.FALSE, rotationY.values ); gl.uniformMatrix4fv(mWorldZUniformLocation, gl.FALSE, rotationZ.values ); gl.uniformMatrix4fv(mTranslationUniformLocation, gl.FALSE, translation.values ); //set clearColor gl.clearColor(1.0,1.0,1.0,1.0)//rgba 0-1values ////enable depth gl.enable(gl.DEPTH_TEST); //////////////////// //Main loop //////////////////// let count=0; let oldtime=0; let angle=0; let fpsDisplay=document.getElementById("fps");rotationX.setAngle(angleX); let speedY =0; function loop(time){ fpsDisplay.innerHTML=Math.round(speedY.toFixed(1)*-10); oldtime=time; gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); if(touchX!=prevTouchX){ //angleY+= (prevTouchX - touchX)/100; speedY+=(prevTouchX - touchX)/1000; prevTouchX =touchX; } if(touchY!=prevTouchY){ angleX+= -(prevTouchY - touchY)/100; prevTouchY =touchY; } angleY +=speedY; if(speedY >0){ speedY-=0.001;}else if(speedY< 0){ speedY+=0.001; } rotationX.setAngle(angleX); rotationY.setAngle(angleY); rotationZ.setAngle(angle); // update matrices gl.uniformMatrix4fv(mWorldXUniformLocation, gl.FALSE, rotationX.values ); gl.uniformMatrix4fv(mWorldYUniformLocation, gl.FALSE, rotationY.values ); //gl.uniformMatrix4fv(mWorldZUniformLocation, gl.FALSE, rotationZ.values ); //draw gl.drawArrays(gl.POINTS, 0, vertices.length/7); count++; angle+=Math.PI/360; if(count>500){ // makeShapes(); count=0; } requestAnimationFrame(loop); } requestAnimationFrame(loop); } var angleY=0; var angleX=Math.PI/2; var prevTouchX=0; var prevTouchY=0; var touchX=0 ; var touchY=0 ; function sketchpad_touchStart(e) { getTouchPos(e); prevTouchX =touchX; prevTouchY=touchY; // e.preventDefault(); } function sketchpad_touchMove(e) { getTouchPos(e); e.preventDefault(); } function getTouchPos(e) { if (!e){ // var e = event; } if(e.touches) { if (e.touches.length == 1) { var touch = e.touches[0]; touchX=touch.pageX-touch.target.offsetLeft; touchY=touch.pageY-touch.target.offsetTop; } } } function enableSound(){ var sound=document.getElementById("sound"); sound.play(); }

WebGL XOR