/* shape builders */ function HexagonTile(ec){ const vertices=[ 1,-1,0,1, 0.5,-1,0.866025,1, -0.5,-1,0.866025,1, -0.5,-1,0.866025,1, -1,-1,0,1, 1,-1,0,1, -1,-1,0,1, -0.5,-1,-0.866025,1, 0.5,-1,-0.866025,1, 0.5,-1,-0.866025,1, 1,-1,0,1, -1,-1,0,1, 1,1,0,1, 0.5,1,0.866025,1, -0.5,1,0.866025,1, -0.5,1,0.866025,1, -1,1,0,1, 1,1,0,1, -1,1,0,1, -0.5,1,-0.866025,1, 0.5,1,-0.866025,1, 0.5,1,-0.866025,1, 1,1,0,1, -1,1,0,1, 1,-1,0,1, 0.5,-1,0.866025,1, 1,1,0,1, 1,1,0,1, 0.5,1,0.866025,1, 0.5,-1,0.866025,1, 0.5,-1,0.866025,1, -0.5,-1,0.866025,1, 0.5,1,0.866025,1, 0.5,1,0.866025,1, -0.5,-1,0.866025,1, -0.5,1,0.866025,1, -0.5,-1,0.866025,1, -1,-1,0,1, -0.5,1,0.866025,1, -1,-1,0,1, -1,1,0,1, -0.5,1,0.866025,1, -0.5,-1,-0.866025,1, -1,-1,0,1, -1,1,0,1, -0.5,-1,-0.866025,1, -0.5,1,-0.866025,1, -1,1,0,1, -0.5,-1,-0.866025,1, 0.5,-1,-0.866025,1, -0.5,1,-0.866025,1, 0.5,-1,-0.866025,1, 0.5,1,-0.866025,1, -0.5,1,-0.866025,1, 0.5,-1,-0.866025,1, 1,-1,0,1, 0.5,1,-0.866025,1, 1,-1,0,1, 1,1,0,1, 0.5,1,-0.866025,1, ] const colors=vertices.map(v=>v) const textureCoordinates=[] const normals=[] const mode=ec.gl.TRIANGLES const shape={vertices,colors,textureCoordinates,mode,normals} ec.initBuffers(shape) return shape } function Circle(ec){ const vertices=(()=>{ const z = 0 const verts = [0,0,0,1.0] for(let i=0;i{ const result = [] for(let i=0;i{ const z = 0 const verts = [0,0.3,0,1.0] for(let i=0;i1.0) const textureCoordinates=[] const normals=[] const mode=ec.gl.TRIANGLE_FAN const shape={vertices,colors,textureCoordinates,mode,normals} ec.initBuffers(shape) return shape } /* global vars */ let worldAngle =0 let touchEvent =0 /* global utils*/ function worldRotate(ec,angle,axisVec3){ mat4.rotate( ec.matrices.modelViewMatrix, ec.matrices.modelViewMatrix, angle, axisVec3 ) } function worldTranslate(ec,dx,dy,dz){ mat4.translate( ec.matrices.modelViewMatrix, ec.matrices.modelViewMatrix, [dx,dy,dz] ) } /* touch events functions */ const up = (ec) => { worldTranslate(ec, Math.sin(-worldAngle),0,Math.cos(-worldAngle)) } const down = (ec) => { worldTranslate(ec, -Math.sin(-worldAngle),0,-Math.cos(-worldAngle)) } const left = (ec) => { worldRotate(ec,-0.01,[0,1,0]) worldAngle -=0.01 } const right = (ec) => { worldRotate(ec, 0.01,[0,1,0]) worldAngle +=0.01 } const touchstart = (ev) => { const W=innerWidth, H=innerHeight const {atan2, PI} = Math const x = ev.touches[0].clientX const y = ev.touches[0].clientY const angle = (atan2(y-H/2,x-W/2) + 2*PI)%(2*PI) if(angle < PI/4) touchEvent = right else if(angle < 3 * PI/4) touchEvent = down else if(angle < 5 * PI/4) touchEvent = left else if(angle < 7 * PI/4) touchEvent = up else touchEvent = right ev.preventDefault() } const touchmove = touchstart const touchend = (ev) => { touchEvent = 0 } /* main function and draw loop */ function main(){ alert(`Touch Canvas Up - zoom in Down - zoom out Right - rotate world right Left - rotate world left`) const {PI, sqrt, abs} = Math const ec=new EpicCanvas(300,400,"body") worldTranslate(ec,0,-8,-20) const perlin=new Perlin2DLinear(36,36,9,5) const program = ec.initShaderProgram(vsColor,fsColor) const programInfo=getProgramInfo(ec.gl,program) const tiles=[] const tileSize = 1 for(let j=-18;j<18;++j){ for(let i=-18;i<18;++i){ const hex=HexagonTile(ec) scale(hex,tileSize,tileSize*2,tileSize) rotateZ(hex, PI) rotateY(hex, -PI/2) const z = i*1.5*tileSize const x = (abs(i)%2*0.866025*tileSize+j*2*0.866025*tileSize) translateX(hex,x) translateZ(hex,z) translateY(hex,parseInt(6*perlin.noiseGrid[parseInt(j+18)][parseInt(i+18)])) ec.reloadBufferData(hex) hex.distance = sqrt(x**2+z**2) tiles.push(hex) }} tiles.sort((a,b)=>b.distance-a.distance) const sun = Circle(ec) scale(sun,10,10,1) translateY(sun,30) translateZ(sun,-70) ec.reloadBufferData(sun) const moon = Crescent(ec) scale(moon,10,10,1) rotateZ(moon,1.9) translateY(moon,30) translateZ(moon,70) ec.reloadBufferData(moon) function draw(time){ if(touchEvent) touchEvent(ec) worldAngle +=2*PI worldAngle %= 2*PI const a = worldAngle

HexWorld - Noise Map - EpicCanvas