function main(){ var context = document.getElementById("canvas").getContext("2d"); var slider1 = document.getElementById("speedSliderX"); var slider2 = document.getElementById("speedSliderY"); var slider3 = document.getElementById("speedSliderZ"); var slider4 = document.getElementById("scaleSliderX"); var slider5 = document.getElementById("scaleSliderY"); var slider6 = document.getElementById("scaleSliderZ"); var slider7 = document.getElementById("res"); context.canvas.width = window.innerWidth*4; context.canvas.height = window.innerHeight*4; var w = canvas.width; var h = canvas.height; var tmpfp, fps, xA, yA, xB, yB, xC, yC = 0; context.font = "50px Comic Sans MS"; var initTime = Date.now(); var fpsInterval = 16; var loopCount = 0; var pi = Math.PI; Random(); var constantAmplitude = false; //use a constant amplitude var objcolor = [0.5, 0.8, 1]; //color of the water [r, g, b] var resetInterval = 10000; //reset scene every ** miliseconds var showVerts = false; //show all the vertices var waveLength = 12; //the length of the waves (frequency) var speed = .5; //speed of the "simulation" setInterval(update,1000/60); //updates screen 60 times per second function update(){ var thisLoop = Date.now(); //gets current milliseconds fps += 1000 / (thisLoop - initTime); //calculates fps initTime = thisLoop; //resets milliseconds context.clearRect(0, 0, canvas.width, canvas.height); //clears the canvas before drawing on it mesh((thisLoop%resetInterval)/1000*speed); // draws the object if(loopCount%fpsInterval===0){tmpfps = fps; fps = 0;}//update fps context.fillStyle = '#ffffff'; context.fillText("FPS: "+Math.floor(tmpfps/fpsInterval),0,50);//draws fps loopCount += 1; } //creates the vertices and faces of the object function object(col,row,q){ var verts = []; //creates empty errays var faces = []; var a = 4/col; var b = 4/row; var cx = 2-a/2; var cy = 2-b/2; if (q < 0.08) Random(); for (i=0;i10*k){ return 0; }else{ if (constantAmplitude) return Math.sin(dist/(10*freq)-k/freq); else return Math.sin(dist/(10*freq)-k/freq)/(dist/10); } } //updates the mesh function mesh(q){ var camPos = [0,-7,2]; //position of the virtual camera var angleX = slider1.value*12; //rotation var angleY = slider2.value*12; var angleZ = slider3.value*12; var scaleX = slider4.value; //scale var scaleY = slider5.value; var scaleZ = slider6.value; angleX = (angleX%360) / (180 / pi); //converts degree to radian angleY = (angleY%360) / (180 / pi); angleZ = (angleZ%360) / (180 / pi); var res = slider7.value; var obj = object(res,res,q);//update the verts and faces of the object var verts = obj[0]; var faces = obj[1]; verts = scale(verts,scaleX,scaleY,-scaleZ);//scales the vertices verts = rotate(verts,angleX,angleY,angleZ);//rotates them drawFaces(verts,faces,camPos);//draws the faces if (showVerts) drawVerts(verts,camPos); } //returns the cross product of the 2 vectors //https://en.m.wikipedia.org/wiki/Cross_product function cross(a,b){ var result = []; result[0] = ((a[1] * b[2]) - (a[2] * b[1])); result[1] = ((a[2] * b[0]) - (a[0] * b[2])); result[2] = ((a[0] * b[1]) - (a[1] * b[0])); return result; } //Returns an array of all the normal vectors of the faces. //The normal vectors define the orientation of the faces. this is used by the shaders. //https://en.wikipedia.org/wiki/Normal_(geometry) function GetTriangleNormalB(verts,faces){ var normals = []; for(var j=0;j= max ? max : num; } //returns the negative vector function neg(vec){ return [-vec[0],-vec[1],-vec[2]]; } //computes the square of the distance between the two vectors function pyth(vec1,vec2){ var x = vec1[0]-vec2[0]; var y = vec1[1]-vec2[1]; var z = vec1[2]-vec2[2]; return x*x+y*y+z*z; } //sets the length of the vector to 1 //https://en.wikipedia.org/wiki/Unit_vector function normalize(point) { var x = point[0]; var y = point[1]; var z = point[2]; var len = Math.sqrt(x*x+y*y+z*z); return [x/len,y/len,z/len]; } //gets the reflected vector //https://www.opengl.org/discussion_boards/showthread.php/155886-Reflection-vector function reflect(d,n){ return [ 2*dot(d,n)*n[0]-d[0], 2*dot(d,n)*n[1]-d[1], 2*dot(d,n)*n[2]-d[2]]; } //r,g,b to javascript color function RGB2Color(c){ return 'rgb(' + Math.round(c[0]*255) + ',' + Math.round(c[1]*255) + ',' + Math.round(c[2]*255) + ')'; } //dot porduct //https://en.wikipedia.org/wiki/Dot_product function dot(a,b){ return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]; } function clamp(num, min, max) { return num <= min ? min : num >= max ? max : num; } //returns the product of the vectors function mul(vec1,vec2){ return [vec1[0]*vec2[0],vec1[1]*vec2[1],vec1[2]*vec2[2]] } function mult(val,vec2){ return [val*vec2[0],val*vec2[1],val*vec2[2]]; } function drawVerts(verts,cam){ for(var i=0;i