"use strict"; window.onload = function(){ document.body.style.margin = "0px"; var offScreenCanvas; var c = offScreenCanvas = document.createElement('canvas') var context = c.getContext("2d"); var mainCanvas = document.createElement("canvas"); mainCanvas.id = "gc"; document.body.appendChild(mainCanvas); var maincontext = mainCanvas.getContext('2d') c.width = mainCanvas.width = width = innerWidth c.height = mainCanvas.height = height = innerHeight c.style.userSelect = 'none'; c.style.position = 'fixed'; var pointer = new Point2D(0, 0); var cubes = []; var world = { info: { currentCamera: new camera(0, 0, 300), skycolor: '#394880', controls: 'active', showInfoBox: true, showControlHelpTab: true, devicePerformance: 5, tab: { x: 0, y: 0, } } }; function infoBox(title, x, y, color, fontSize = 20, fontStyle = 'Arial', fontUnit = 'px') { this.title = title this.x = x; this.y = y; this.width = 0; this.heigth = 0; this.color = color; this.textColor = 'white' this.info = []; this.margin = 20; this.lineSpace = 10 this.fontSize = fontSize; this.fontStyle = fontStyle this.fontUnit = fontUnit this.font = this.fontSize + '' + this.fontUnit + ' ' + this.fontStyle } infoBox.prototype = { add: function(name, value) { let content = { name: name, value: value, type: 'message', } this.info.push(content) }, addSetion: function() { }, update: function() { this.font = this.fontSize + '' + this.fontUnit + ' ' + this.fontStyle this.lineSpace = this.fontSize + 5 if (this.info.length > 0) { for (let text = this.info.length - 1; text > -1; --text) { context.font = this.font let data = this.info[text] let information = data.name + ': ' + data.value + ";"; let width = context.measureText(information).width; if (width > this.width) { this.width = width; } } } else { this.width = 0 } this.width += this.margin * 4 this.height = ((this.fontSize * 1.3 + this.lineSpace) * this.info.length) / 2 }, render: function() { context.shadowBlur = 0; context.fillStyle = this.color; context.globalAlpha = 0.3; context.fillRect(this.x, this.y, this.width + this.margin * 2, this.height + this.margin * 2) context.globalAlpha = 1; context.strokeStyle = 'white'; context.lineWidth = 5; context.strokeRect(this.x, this.y, this.width + this.margin * 2, this.height + this.margin * 2) let x = this.x + this.margin; let y = this.y + this.margin * 1.2; context.fillStyle = this.textColor; context.font = this.font; context.textAlign = 'left'; context.textBaseline = "middle" for (let text = 0; text < this.info.length; ++text) { let data = this.info[text] if (data.type == 'message') { let information = data.name + '' + data.value + ""; context.foot = this.font; context.fillText(information, x, y) } y += this.lineSpace; } this.info = []; this.width = this.height = 0; }, } var infoB = new infoBox('cool', 20, 10, 'black', 12) function Point2D(x = 0, y = 0) { this.x = x; this.y = y; }; Point2D.prototype = { render: function(width = 1, height = 100, color = 'white') { context.fillStyle = color; context.fillRect(this.x - width / 2, this.y - height / 2, width, height) context.fillRect(this.x - height / 2, this.y - width / 2, height, width) } } function Point3D(x = 0, y = 0, z = 0) { this.x = x; this.y = y; this.z = z; }; function degToRad(degree) { return (degree * 6.28) / 180; } function RadToDeg(radians) { return (radians * 180) / Math.PI; } function camera(x, y, z, focal_length = 300) { this.x = x; this.y = y; this.z = z; this.xv = this.yv = this.zv = 0; this.friction = 0.8 this.rotFriction = 0.8 this.rotation = { x: 0, y: 0, z: 0, xv: 0, yv: 0, zv: 0, } this.visibility = 5000 this.speed = 200; this.turningSpeed = 20; this.focal_length = focal_length; } camera.prototype = { update: function(dellatime = 1) { let dt = dellatime; this.x += this.xv * dt; this.y += this.yv * dt; this.z += this.zv * dt; this.rotation.x += this.rotation.xv * dt; this.rotation.y += this.rotation.yv * dt; this.rotation.z += this.rotation.zv * dt; this.xv *= this.friction this.yv *= this.friction this.zv *= this.friction this.rotation.xv *= this.rotFriction this.rotation.yv *= this.rotFriction this.rotation.zv *= this.rotFriction }, moveForward: function() { this.zv += this.speed * Math.cos(degToRad(this.rotation.y)) this.xv -= this.speed * Math.sin(degToRad(this.rotation.y)) }, moveBackward: function() { this.zv -= this.speed * Math.cos(degToRad(this.rotation.y)) this.xv += this.speed * Math.sin(degToRad(this.rotation.y)) }, moveUp: function() { this.yv -= this.speed * Math.cos(degToRad(this.rotation.x)) }, moveDown: function() { this.yv += this.speed * Math.cos(degToRad(this.rotation.x)) }, moveLeft: function() { this.xv -= this.speed * Math.cos(degToRad(this.rotation.y)) this.zv -= this.speed * Math.sin(degToRad(this.rotation.y)) }, moveRight: function() { this.xv += this.speed * Math.cos(degToRad(this.rotation.y)) this.zv += this.speed * Math.sin(degToRad(this.rotation.y)) }, turnUp: function() { this.rotation.xv = -this.turningSpeed; }, turnDown: function() { this.rotation.xv = this.turningSpeed; }, turnLeft: function() { this.rotation.yv = this.turningSpeed }, turnRight: function() { this.rotation.yv = -this.turningSpeed }, } var origin = new Point3D(0, 0, 0); var cam = new camera(0, 0, 0, 300) world.info.currentCamera = cam function Cube(x, y, z, width, height, length, color = '#0080F0', autoPush = true) { this.x = x; this.y = y; this.z = z; this.angle = { x: 0, y: 0, z: 0, } this.vel = { force: [0, 0, 0], friction: 0.98, xv: 0, yv: 0, zv: 0, angularVel: { xv: 0, yv: 0, zv: 0, }, } this.width = width; this.height = height; this.length = length; this.drawableFaces = [0, 1, 2, 3, 4, 5]; this.strokeColor = '#FFFFFF'; this.color = color; this.glow = { amount: 0, color: this.color, } this.edgeSize = 1; this.transparent = false; this.data = new Array(100) width = this.width / 2;; height = this.height / 2; length = this.length / 2;; this.vertices = [ new Point3D(x - width, y - height, z - length), new Point3D(x + width, y - height, z - length), new Point3D(x + width, y + height, z - length), new Point3D(x - width, y + height, z - length), new Point3D(x - width, y - height, z + length), new Point3D(x + width, y - height, z + length), new Point3D(x + width, y + height, z + length), new Point3D(x - width, y + height, z + length) ]; this.faces = [[0, 1, 2, 3], [0, 4, 5, 1], [1, 5, 6, 2], [3, 2, 6, 7], [0, 3, 7, 4], [4, 7, 6, 5]]; if (autoPush) { cubes.push(this) } }; Cube.prototype = { rotateX: function(angle) { let radian = degToRad(angle) var cosine = Math.cos(radian); var sine = Math.sin(radian); for (let index = this.vertices.length - 1; index > -1; --index) { let p = this.vertices[index]; let y = (p.y - this.y) * cosine - (p.z - this.z) * sine; let z = (p.y - this.y) * sine + (p.z - this.z) * cosine; p.y = y + this.y; p.z = z + this.z; } }, rotateY: function(angle) { let radian = degToRad(angle) var cosine = Math.cos(radian); var sine = Math.sin(radian); for (let index = this.vertices.length - 1; index > -1; --index) { let p = this.vertices[index]; let x = (p.z - this.z) * sine + (p.x - this.x) * cosine; let z = (p.z - this.z) * cosine - (p.x - this.x) * sine; p.x = this.x + x; p.z = this.z + z; } }, rotateZ: function(angle) { let radian = degToRad(angle) var cosine = Math.cos(radian); var sine = Math.sin(radian); for (let index = this.vertices.length - 1; index > -1; --index) { let p = this.vertices[index]; let x = (p.y - this.y) * sine + (p.x - this.x) * cosine; let y = (p.y - this.y) * cosine - (p.x - this.x) * sine; p.x = x + this.x; p.y = y + this.y; } }, callback: function() {}, update: function(deltatime) { let dt = deltatime; let vel = this.vel this.x += vel.xv * dt; this.y += vel.yv * dt; this.z += vel.zv * dt; this.vel.xv += (this.vel.force[0]) * dt; this.vel.yv += (this.vel.force[1]) * dt; this.vel.zv += (this.vel.force[2]) * dt; this.vel.xv *= this.vel.friction; this.vel.yv *= this.vel.friction; this.vel.zv *= this.vel.friction; this.angle.x += vel.angularVel.xv * dt this.angle.y += vel.angularVel.yv * dt this.angle.z += vel.angularVel.zv * dt this.updateVertices() this.rotateX(this.angle.x) this.rotateY(this.angle.y) this.rotateZ(this.angle.z) this.callback(); }, updateVertices: function() { let x = this.x; let y = this.y; let z = this.z; let width = this.width / 2; let height = this.height / 2; let length = this.length / 2; this.vertices = [ new Point3D(x - width, y - height, z - length), new Point3D(x + width, y - height, z - length), new Point3D(x + width, y + height, z - length), new Point3D(x - width, y + height, z - length), new Point3D(x - width, y - height, z + length), new Point3D(x + width, y - height, z + length), new Point3D(x + width, y + height, z + length), new Point3D(x - width, y + height, z + length) ]; this.rotateX(this.angle.x) this.rotateY(this.angle.y) this.rotateZ(this.angle.z) }, render: function(inside = true) { let cam = world.info.currentCamera var vertices = project(this.vertices, width, height); for (let index = this.faces.length - 1; index > -1; --index) { let face = this.faces[index]; let p1 = this.vertices[face[0]]; let p2 = this.vertices[face[1]]; let p3 = this.vertices[face[2]]; if (!this.transparent) { let v1 = new Point3D(p2.x - p1.x, p2.y - p1.y, p2.z - p1.z); let v2 = new Point3D(p3.x - p1.x, p3.y - p1.y, p3.z - p1.z); let n = new Point3D(v1.y * v2.z - v1.z * v2.y, v1.z * v2.x - v1.x * v2.z, v1.x * v2.y - v1.y * v2.x); let condition = -p1.x * n.x + -p1.y * n.y + -p1.z * n.z <= 0 && this.drawableFaces.includes(index) if (inside) { condition = !condition } if (condition) { context.beginPath(); context.moveTo(vertices[face[0]].x, vertices[face[0]].y); context.lineTo(vertices[face[1]].x, vertices[face[1]].y); context.lineTo(vertices[face[2]].x, vertices[face[2]].y); context.lineTo(vertices[face[3]].x, vertices[face[3]].y); context.closePath(); context.shadowBlur = this.glow.amount; context.shadowColor = this.glow.color; context.lineWidth = this.edgeSize; context.fillStyle = this.color; context.strokeStyle = this.strokeColor; context.stroke(); context.fill(); } } else { condition = this.drawableFaces.includes(index) if (condition) { context.beginPath(); context.moveTo(vertices[face[0]].x, vertices[face[0]].y); context.lineTo(vertices[face[1]].x, vertices[face[1]].y); context.lineTo(vertices[face[2]].x, vertices[face[2]].y); context.lineTo(vertices[face[3]].x, vertices[face[3]].y); context.closePath(); context.shadowBlur = this.glow.amount; context.shadowColor = this.glow.color; context.lineWidth = this.edgeSize; context.strokeStyle = this.strokeColor; context.stroke(); } } } }, }; var Mode = 0; var heavyModes = [1, 3, 7, 9] SetMode(1) function SetMode(mode) { if (mode == 1) { let sky = context.createLinearGradient(0, -1000, 0, Math.round(c.height) * 0.6) sky.addColorStop(0, 'blue') sky.addColorStop(1, 'skyblue') world.info.skycolor = sky; function tree(x, bottom_Y, z, width, height, sizeRatio = 0.6, heightRatio = 0.6) { let stumpWidth = width * sizeRatio let stumpHeight = height * heightRatio let wood = new Cube(x, bottom_Y - (stumpHeight) / 2, z, stumpWidth, stumpHeight, stumpWidth) wood.color = '#423426' let leave = { y: bottom_Y - wood.height - (height * Math.abs(1 - heightRatio)) / 2, height: height * Math.abs(1 - heightRatio) } let leaves = new Cube(x, leave.y, z, width, leave.height, width) leaves.color = 'green' wood.strokeColor = leaves.strokeColor = 'orange' setTimeout(function(){ let prob = rand(0, 10, true); let vel= rand(10, 100) if(prob < 3){ wood.vel.angularVel.xv = vel } else if(prob<6){ wood.vel.angularVel.xv = vel wood.vel.angularVel.zv = vel } else { wood.vel.angularVel.xv = vel wood.vel.angularVel.zv = vel wood.vel.angularVel.yv = vel } vel = prob = null; }, 15000) } var box1 = new Cube(0, -140, 800, 100, 100, 100, 'green') var box2 = new Cube(0, -10, 800, 30, 160, 30, '#423426') // var box1 = new Cube(0, -130, 300, 100, 100, 100) var plane = new Cube(0, 120, 1100, 1000, 100, 2000, 'darkgreen') plane.strokeColor = 'orange' tree(-200, plane.y - plane.height / 2, 400, 100, 200, 0.4, 2) tree(200, plane.y - plane.height / 2, 900, 200, 200, 0.5, 2) tree(20, plane.y - plane.height / 2, 1500, 400, 400, 0.5, 2) box2.strokeColor = 'orange' let y = -500 let x = 1500 let z = 1500 let width = 200 let height = 60 let length = 200 for (let i = 0; i < 100; ++i) { let cloud = new Cube(rand(-x, x), y, plane.z + rand(-z, z), width, height, length) cloud.color = 'rgba(255,255,255,0.5)' cloud.strokeColor = 'transparent'; } // var TopPlane = new Cube(0, -260, 1100, 1000, 100, 2000) // box1.color = 'red' } } var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; function project(points3d, width, height) { let focal_length = world.info.currentCamera.focal_length; let points2d = new Array(points3d.length); for (let index = points3d.length - 1; index > -1; --index) { let p = points3d[index]; if (p.z < 0) { p.z = 1; //ocal_length/2 } let x = p.x * (focal_length / p.z) + width * 0.5; let y = p.y * (focal_length / p.z) + height * 0.5; points2d[index] = new Point2D(x, y); } return points2d; } var frame = 0 var then = 0; var deltatime = 0; var pointer1 = new Point2D(null, null) var pointer2 = new Point2D(null, null) function loop() { let now = performance.now() / 1000 deltatime = now - then then = now; ++frame; context.canvas.height = height; context.canvas.width = width; context.fillStyle = world.info.skycolor; context.fillRect(0, 0, width, height); let worldCam = world.info.currentCamera; worldCam.update(deltatime); infoB.add('___ ', 'General Info____') infoB.add('Mode : ', Mode) infoB.add('FPS : ', Math.round(1 / deltatime)) infoB.add('No. of cubes : ', cubes.length) infoB.add('', '') infoB.add('___ ', 'Camera____') infoB.add('speed : ', worldCam.speed) infoB.add('X : ', worldCam.x) infoB.add('Y : ', worldCam.y) infoB.add('Z : ', worldCam.z) infoB.add('Focal_length : ', worldCam.focal_length) infoB.add('', '') infoB.add('___ ', 'Screen ___') infoB.add('Width : ', width); infoB.add('Height : ', height) cubes.sort(Z_sorting); for (let index = cubes.length - 1; index > -1; --index) { let Rcube = cubes[index]; let trueDist = dist3D(Rcube, worldCam) Rcube.update(deltatime) let cube = JSON.parse(JSON.stringify(Rcube)) // cube.prototype = Rcube.prototype cube.update = Rcube.update cube.updateVertices = Rcube.updateVertices cube.render = Rcube.render cube.rotateX = Rcube.rotateX cube.rotateY = Rcube.rotateY cube.rotateZ = Rcube.rotateZ cube.callback = Rcube.callback let radianY = degToRad(worldCam.rotation.y) let cosineY = Math.cos(radianY); let sineY = Math.sin(radianY); let Yx = (cube.z - worldCam.z) * sineY + (cube.x - worldCam.x) * cosineY; let Yz = (cube.z - worldCam.z) * cosineY - (cube.x - worldCam.x) * sineY; cube.x = Yx + worldCam.x; cube.z = Yz + worldCam.z; let radianX = degToRad(worldCam.rotation.x) var cosineX = Math.cos(radianX); var sineX = Math.sin(radianX); let p = cube; let Xy = (p.y - worldCam.y) * cosineX - (p.z - worldCam.z) * sineX; let Xz = (p.y - worldCam.y) * sineX + (p.z - worldCam.z) * cosineX; p.y = Xy + worldCam.y; p.z = Xz + worldCam.z; // let distanceX = Rcube.x - worldCam.x // let distanceY = Rcube.y - worldCam.y // let distanceZ = Rcube.z - worldCam.z // let distanceZ = trueDist let translationX = 0; //distanceZ * Math.sin(degToRad(worldCam.rotation.y)); let translationY = 0; let translationZ = 0; // distanceZ * Math.cos(degToRad(worldCam.rotation.y)); cube.angle.x += worldCam.rotation.x cube.angle.y += worldCam.rotation.y cube.angle.z += worldCam.rotation.z translationX += worldCam.x translationY += worldCam.y translationZ += worldCam.z cube.x -= translationX cube.y -= translationY cube.z -= translationZ cube.updateVertices(); let behindMe = cam.x > Rcube.x - Rcube.width / 2 && cam.x < Rcube.x + Rcube.width / 2 && cam.y > Rcube.y - Rcube.height / 2 && cam.y < Rcube.y + Rcube.height / 2 && cam.z > Rcube.z + Rcube.length / 2 if (behindMe) { cube.color = cube.strokeColor = 'transparent' } if (cube.toDestroy) { cubes.splice(index, 1); } if (trueDist < worldCam.visibility) { if (!behindMe) { let cam = worldCam; let inside = cam.x > Rcube.x - Rcube.width / 2 && cam.x < Rcube.x + Rcube.width / 2 && cam.y > Rcube.y - Rcube.height / 2 && cam.y < Rcube.y + Rcube.height / 2 && cam.z > Rcube.z - Rcube.length / 2 && cam.z < Rcube.z + Rcube.length / 2; cube.render(inside); } } /* cube.angle.x -= worldCam.rotation.x cube.angle.y -= worldCam.rotation.y cube.angle.z -= worldCam.rotation.z cube.x += translationX cube.y += translationY cube.z += translationZ*/ } if (world.info.showInfoBox) { infoB.y = approach(infoB.y, 10, 0.8).value infoB.update(); infoB.render() } else { let y = approach(infoB.y, c.height + 100, 0.8).value if (!y.arrived) { infoB.y = y.value infoB.update(); infoB.render(); } } pointer1.render() pointer2.render() if (world.info.showControlHelpTab) { } else { world.info.tab.y += (600 * deltatime) } if (world.info.tab.y < c.height) { let tab = world.info.tab; context.fillStyle = "PURPLE" context.fillRect(tab.x, tab.y, c.width, c.height); txt("You can move around the world!", c.width / 2, c.height * 0.2, "700 20px Arial", "white") txt("Tap / press any key to continue", c.width / 2, c.height * 0.3, "400 20px Arial", "white") txt("WASD to move around", c.width / 2, c.height * 0.4, "300 20px Arial", "white") txt("Arrow keys to look around", c.width / 2, c.height * 0.5, "300 20px Arial", "white") let stick = joystick1; let radius = stick.radius + 20; let font = "600 15px Arial"; let color = "white"; txt("FORWARD", stick.x, stick.y - radius, font, color) txt("BACKWARD", stick.x, stick.y + radius, font, color) txt("LEFT", stick.x - radius, stick.y, font, color) txt("RIGHT", stick.x + radius, stick.y, font, color) stick = joystick2; txt("UP", stick.x, stick.y - radius, font, color) txt("DOWN", stick.x, stick.y + radius, font, color) txt("LOOK LEFT", stick.x - radius, stick.y, font, color) txt("LOOK RIGHT", stick.x + radius, stick.y, font, color) } joystick1.render() joystick2.render() let w = 10 let h = 2 context.fillStyle = 'white'; context.fillRect(width / 2 - w / 2, height / 2 - h / 2, w, h) context.fillRect(width / 2 - h / 2, height / 2 - w / 2, h, w) maincontext.drawImage(c, 0, 0, mainCanvas.width, mainCanvas.height) //infoB.textColor = 'yellow' window.requestAnimationFrame(loop); } var joystick1 = new joystick(80, c.height - 100, 30) var joystick2 = new joystick(c.width - 80, c.height - 100, 30) joystick1.callback = function() { let speed = cam.speed cam.speed *= Math.abs(joystick1.value[0]) if (joystick1.value[0] > 0) { cam.moveRight() } else if (joystick1.value[0] < 0) { cam.moveLeft() } cam.speed = speed cam.speed *= Math.abs(joystick1.value[1]) if (joystick1.value[1] > 0) { cam.moveBackward() } else if (joystick1.value[1] < 0) { cam.moveForward() } cam.speed = speed } joystick2.callback = function() { let speed = cam.speed cam.speed *= Math.abs(joystick2.value[0]) * 0.001 if (joystick2.value[0] > 0) { cam.turnRight() } else if (joystick2.value[0] < 0) { cam.turnLeft() } cam.speed = speed cam.speed *= Math.abs(joystick2.value[1]) if (joystick2.value[1] > 0) { cam.moveDown() } else if (joystick2.value[1] < 0) { cam.moveUp() } cam.speed = speed } loop(); window.addEventListener("click", (event) => { pointer.x = event.pageX - width * 0.5; pointer.y = event.pageY - height * 0.5; }); window.onresize = function() { c.width = mainCanvas.width = width = innerWidth c.height = mainCanvas.height = height = innerHeight } const eventBasedOnDevice = navigator.userAgent.match(/ipod|ipad|iphone/i) ? 'touchstart' : 'click'; function touchHandler() {} get('gc').addEventListener(eventBasedOnDevice, function event(event) { pointer1.x = event.pageX pointer1.y = event.pageY touchHandler() }) function touchstartEvent() {} document.addEventListener('touchstart', function() { pointer1.x = event.touches[0].pageX pointer1.y = event.touches[0].pageY if (event.touches[1] != undefined) { pointer2.x = event.touches[1].pageX pointer2.y = event.touches[1].pageY } if (joystick1.checkHolding(pointer1)) { joystick1.update(pointer1, 'start'); joystick2.update(pointer2, 'start'); } else { joystick1.update(pointer2, 'start'); joystick2.update(pointer1, 'start'); } touchstartEvent(); }) function touchmoveEvent() {} document.addEventListener('touchmove', function(event) { pointer1.x = event.touches[0].pageX pointer1.y = event.touches[0].pageY if (event.touches[1]) { pointer2.x = event.touches[1].pageX pointer2.y = event.touches[1].pageY } if (joystick1.checkHolding(pointer1)) { joystick1.update(pointer1, 'move') joystick2.update(pointer2, 'move') } else { joystick1.update(pointer2, 'move') joystick2.update(pointer1, 'move') } touchmoveEvent(); }) function touchendEvent() {} document.addEventListener('touchend', function() { pointer1.x = event.changedTouches[0].pageX pointer1.y = event.changedTouches[0].pageY if (event.changedTouches[1] != undefined) { pointer2.x = event.changedTouches[1].pageX pointer2.y = event.changedTouches[1].pageY } joystick1.update(null, 'end') joystick2.update(null, 'end') pointer1.x = pointer1.y = null pointer2.x = pointer2.y = null touchendEvent(); }) function place2D(a, b) { a.x = b.x; a.y = b.y; } function place3D(a, b) { a.x = b.x; a.y = b.y; a.z = b.z; } function Z_sorting(a, b) { return dist3D(a, cam) - dist3D(b, cam); } function dist2D(a, b) { return Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2) } function dist3D(a, b) { return Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2 + (b.z - a.z) ** 2) } function txt(text, x, y, font = '10px Arial', fill = 'skyblue') { context.fillStyle = fill; context.font = font context.textAlign = 'center' context.textBaseline = "middle" context.fillText(text, x, y) } function rand(min, max, precise = false) { let value = min + Math.random() * (max - min); if (precise) { value = Math.round(value); } return value; } function approach(number = 10, destination = 0, speed = 0.2, deltaTime = deltatime, margin = 0.001) { let arrived = false // margin = Math.abs(destination - number) * margin if (Math.abs(destination - number) < margin) { arrived = true; number = destination } else { speed = 1 / (1 + (deltaTime * speed)); number = destination + (number - destination) * speed; } return { value: number, arrived: arrived }; } function get(id) { return document.getElementById(id); } function limit(what, lowThreshold, highThreshold, setToIfLow = null, setToIfHigh = null) { if (what < lowThreshold && lowThreshold != null) { what = setToIfLow != null ? setToIfLow : lowThreshold; } else if (what > highThreshold && highThreshold != null) { what = setToIfHigh != null ? setToIfHigh : highThreshold; } return what; } function pickColor(r = [0, 255], g = [0, 255], b = [0, 255], a = [0, 1]) { let color = 'rgba(' + gen(r[0], r[1]) + ',' + gen(g[0], g[1]) + ',' + gen(b[0], b[1]) + ',' + gen(a[0], a[1], '') + ')'; return color; } function gen(a, b) { if (b == '') { return Math.floor(Math.random() * a) } else { return a + Math.floor(Math.random() * (b - a + 1)); } } /*function squish(value =5, valueConstraints = [valueMin = 0, valueMax = 10], squishConstrainsts = [squishMin=0, squishMax=1]){ let squishedValue = 0; return squishedValue; } squish([ss, ]) */ function touchstartEvent() { world.info.showControlHelpTab = false; } function touchmoveEvent() { } function touchendEvent() { } function joystick(x, y, radius, sizeRatio = 3) { this.x = x; this.y = y; this.center = new Point2D(this.x, this.y) this.radius = radius; this.sizeRatio = sizeRatio this.extension = 3 this.holding = false; this.alpha = 0.4; this.color = 'rgba(255,255,255,0.4)'; this.value = [0, 0]; this.mode = 'idle' this.lineWdith = this.radius / 10; this.knob = { x: this.x, y: this.y, center: this.center, extension: this.extension, radius: this.radius / 2, color: 'white', alpha: 1, state: 'idle', update: function(point, holding = false) { if (holding && point.x != null) { place2D(this, point) this.x = limit(point.x, this.center.x - this.radius * this.extension, this.center.x + this.radius * this.extension) this.y = limit(this.y, this.center.y - this.radius * this.extension, this.center.y + this.radius * this.extension) } else { } }, render: function() { circle(this.x, this.y, this.radius, this.color) }, }; this.checkHolding = function(point) { if (dist2D(point, this) < this.radius * this.extension) { this.holding = true this.mode = 'active' } else { this.holding = false this.mode = 'idle' } return this.holding; } this.callback = function() {}; this.update = function(point = null, mode = 'idle') { place2D(this.center, this) this.knob.radius = this.radius / 2 if (point != null && this.checkHolding(point)) { if (mode == 'idle') { this.mdde = 'idle' } else if (mode == 'start') { this.mdde = 'active' this.checkHolding(point); } else if (mode == 'move') { this.mdde = 'active' this.knob.update(point, true); } else if (mode == 'end') { this.mode = 'idle' } this.value[0] = (this.knob.x - this.x) / (this.radius / 2 * this.extension) this.value[1] = (this.knob.y - this.y) / (this.radius / 2 * this.extension) } else { this.mode = 'idle' place2D(this.knob, this.center) this.value[0] = this.value[1] = 0 } this.callback(); } this.render = function() { context.save() context.globalAlpha = this.alpha; stCircle(this.x, this.y, this.radius, this.color, 10) if (this.mode == 'active') { stCircle(this.knob.x, this.knob.y, this.knob.radius, 'rgba(255,255,255,0.4)', 5) circle(this.x, this.y, this.radius * this.extension, 'rgba(200,255,200,0.3)') } this.knob.render() context.globalAlpha = this.knob.alpha context.restore(); } } function circle(x, y, radius, color) { context.beginPath() context.fillStyle = color context.arc(x, y, radius, 0, Math.PI * 2) context.closePath() context.fill() } function stCircle(x, y, radius, color, lineWidth = 5) { context.beginPath() context.fillStyle = color context.arc(x, y, radius, 0, Math.PI * 2) context.closePath() context.lineWidth = lineWidth context.stroke() } function deactivateControls(hideInfo = true) { get('buttons_section').style.display = 'none' if (hideInfo) { world.info.showInfoBox = false } } function keyPressHandler() {} document.addEventListener("keydown", function(event) { keyPressHandler(event.which) }) function keyPressHandler(keyNumber) { world.info.showControlHelpTab = false; //let factor = 1/devCam.zoom //let speed = 100; switch (keyNumber) { case 32: /*SPACEBAR*/ break; //ARROW KEYS case 37: /*LEFT*/ cam.turnLeft(); break; case 38: /*UP*/ cam.turnUp(); break; case 39: /*RIGHT*/ cam.turnRight(); break; case 40: /*dOWN*/ cam.turnDown(); break; case 81: /*Q*/ cam.moveForward(); break; case 69: /*E*/ cam.moveBackward(); break; //WASD 87, 65, 83, 69 case 65: /*A*/ cam.moveLeft(); break; case 87: /*W*/ cam.moveUp(); break; case 68: /*D*/ cam.moveRight(); break; case 83: /*S*/ cam.moveDown(); break; case 49: SetMode(1); break; case 50: SetMode(2); break; case 51: SetMode(3); break; case 52: SetMode(4); break; case 53: SetMode(5); break; case 54: SetMode(6); break; case 55: SetMode(7); break; case 56: SetMode(8); break; case 57: SetMode(9); break; case 48: SetMode(10); break; default: break; } // console.log(keyNumber) } }

3D code [Minecraft on the web(psuedo)]