var can; var scene; var camera; var controlCamera; var sphere; document.addEventListener("mousedown", function(e){ e.preventDefault(); controlCamera.mouseEventStart(e); }); document.addEventListener("mousemove", function(e){ e.preventDefault(); controlCamera.mouseEventMove(e); }); document.addEventListener("mouseup", function(e){ e.preventDefault(); controlCamera.mouseEventStop(e); }); document.addEventListener("touchstart", function(e){ e.preventDefault(); controlCamera.mouseEventStart(e); }); document.addEventListener("touchmove", function(e){ e.preventDefault(); controlCamera.mouseEventMove(e); }); document.addEventListener("touchend", function(e){ e.preventDefault(); controlCamera.mouseEventStop(e); }); document.addEventListener("keydown", function(e){ controlCamera.keyEventStart(e); }); document.addEventListener("keyup", function(e){ controlCamera.keyEventStop(e); }); window.addEventListener("devicemotion", function(e){ controlCamera.deviceMotion(e); }); window.onload = function() { can = document.getElementById("can"); can.width = window.innerHeight; can.height = window.innerHeight; scene = new Scene(can); camera = scene.addCamera(0, 0, 0, 0*Math.PI, 0*Math.PI, can.width/8, can.height/8); // /72 controlCamera = new ControlCamera(camera); sphere = scene.addSphere(200, 200, 0, 30); scene.addSphere(0, 500, 100, 100); scene.addCube(300, 100, 100, 100, 100, 10); var cube = scene.addCube(300, 150, 85, 10, 10, 10); cube.setColor(100, 100, 100, 1); animate(); } function animate() { controlCamera.update(); scene.renderScene(); requestAnimationFrame(animate); } function dist(x1, y1, z1, x2, y2, z2) { return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2) + (z1 - z2) * (z1 - z2)); } function Scene(can) { this.can = can; this.c = can.getContext("2d"); this.mainCameraIndex = 0; this.cameras = []; this.bodys = []; this.renderScene = function() { if (this.cameras[this.mainCameraIndex] != undefined) { for (var i = 0; i < this.cameras.length; i++) { this.cameras[i].film(this.bodys); } var picture = this.cameras[this.mainCameraIndex].getFilmed(); //console.log(picture); var pixelWidth = this.can.width / picture.length; var pixelHeight = this.can.height / picture[0].length; for(var i=0;i otherD){ d = otherD; index = i; } } ray.travelDistance(d); } while (ray.len < this.renderDistance && d > 1 && ray.steps < 50); //console.log(ray); if(d < 1){ var arr = bodys[index].getColor() this.filmed[y][x] = "rgba(" + Math.max(arr[0] - Math.max(ray.steps * 5, 0), 0) + ", " + Math.max(arr[1] - Math.max(ray.steps * 5, 0), 0) + ", " + Math.max(arr[2] - Math.max(ray.steps * 5, 0), 0) + ", " + arr[3] + ")";//Math.min(ray.steps * 5, 255); }else{ this.filmed[y][x] = "rgba(0, 0, 0, 1)"; } } } } this.getFilmed = function() { return this.filmed; } this.leftBy = function(angle) { this.xyAngle -= angle; } this.rightBy = function(angle) { this.xyAngle += angle; } this.upBy = function(angle) { this.yzAngle -= angle; } this.downBy = function(angle) { this.yzAngle += angle; } this.moveXDirection = function(amount){ this.middleX += amount; } this.moveYDirection = function(amount){ this.middleY += amount; } this.moveZDirection = function(amount){ this.middleZ += amount; } this.moveForwardBy = function(d) { this.middleX += d * Math.sin(this.xyAngle); this.middleY += d * Math.cos(this.xyAngle) * Math.cos(this.yzAngle); this.middleZ += d * Math.sin(this.yzAngle); } } function ControlCamera(camera) { this.camera = camera; this.movingLeft = false; this.movingRight = false; this.movingUp = false; this.movingDown = false; this.movingForward = false; this.movingBackward = false; this.mousePressed = false; this.mouseX = 0; this.mouseY = 0; this.keyEventStart = function(e) { console.log(e.keyCode); if (e.keyCode == 87) { this.movingForward = true; } else if (e.keyCode == 83) { this.movingBackward = true } else if (e.keyCode == 65) { this.movingLeft = true; } else if (e.keyCode == 68) { this.movingRight = true; } else if (e.keyCode == 32) { this.movingUp = true; } else if (e.keyCode == 67) { this.movingDown = true; } } this.keyEventStop = function(e) { if (e.keyCode == 87) { this.movingForward = false; } else if (e.keyCode == 83) { this.movingBackward = false; } else if (e.keyCode == 65) { this.movingLeft = false; } else if (e.keyCode == 68) { this.movingRight = false; } else if (e.keyCode == 32) { this.movingUp = false; } else if (e.keyCode == 67) { this.movingDown = false; } } this.mouseEventStart = function(e) { this.mousePressed = true; this.mouseX = e.pageX; this.mouseY = e.pageY; } this.mouseEventMove = function(e) { if (this.mousePressed) { var xAmount = e.pageX - this.mouseX; var yAmount = e.pageY - this.mouseY; this.mouseX = e.pageX; this.mouseY = e.pageY; //console.log(xAmount) this.camera.leftBy(-xAmount / 500); this.camera.upBy(-yAmount / 500); } } this.mouseEventStop = function(e) { this.mousePressed = false; } this.update = function() { if (this.movingLeft) { this.camera.moveLeftBy(5); } if (this.movingRight) { this.camera.moveRightBy(5); } if (this.movingUp) { this.camera.moveUpBy(5); } if (this.movingDown) { this.camera.moveDownBy(5); } if (this.movingForward) { this.camera.moveForwardBy(5); } if (this.movingBackward) { this.camera.moveBackwardBy(5); } } this.deviceMotion = function(e){ this.camera.xyAngle = e.accelerationIncludingGravity.x / 5; this.camera.yzAngle = e.accelerationIncludingGravity.y / 5 + 1; } } function Ray(middleX, middleY, middleZ, xyAngle, yzAngle) { this.middleX = middleX; this.middleY = middleY; this.middleZ = middleZ; this.xyAngle = xyAngle; this.yzAngle = yzAngle; this.len = 0; this.steps = 0; this.travelDistance = function(d) { // True this.middleX += d * Math.sin(this.xyAngle); //sin xy this.middleY += d * Math.cos(this.xyAngle) * Math.cos(this.yzAngle); //cos xy cos yz this.middleZ += d * Math.sin(this.yzAngle); //sin yz /* this.middleX += d * Math.cos(this.xyAngle); //sin xy this.middleY += d * Math.sin(this.xyAngle) * Math.sin(this.yzAngle); //cos xy cos yz this.middleZ += d * Math.sin(this.yzAngle); //sin yz */ this.len += d; this.steps++; } this.length = function(){ return length; } this.getSteps = function(){ return this.steps; } }

Raymarching || devicemotion version