bla

ShayDavidson · Mar 4, 2018 · 1c8a478 · 1c8a478
1 parent 90bb15f
commit 1c8a478
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 16 deletions.
diff --git a/public/index.html b/public/index.html
@@ -233,6 +233,18 @@ <h4>Camera</h4>
           <div>zoom</div>
           <div><input id="zoom" min="1" step="0.05" type="number" data-rerender=true/></div>
         </div>
+        <div class="row">
+          <div>xRotation</div>
+          <div><input id="xRotation" step="0.01" type="number" data-rerender=true/></div>
+        </div>
+        <div class="row">
+          <div>yRotation</div>
+          <div><input id="yRotation" step="0.01" type="number" data-rerender=true/></div>
+        </div>
+        <div class="row">
+          <div>zRotation</div>
+          <div><input id="zRotation" step="0.01" type="number" data-rerender=true/></div>
+        </div>
       </div><div id="scene">
         <canvas id="canvas0" width=800 height=800></canvas>
         <canvas id="canvas1" class="displayed" width=800 height=800></canvas>

diff --git a/public/main.bundle.js b/public/main.bundle.js
diff --git a/src/galaxy_builder.js b/src/galaxy_builder.js
@@ -22,7 +22,8 @@ export function buildGalaxy(
     systems.push({
       pos: {
         r: backToPolar.r,
-        t: backToPolar.t
+        t: backToPolar.t,
+        p: 0
       },
       type: rng.randomByWeights(
         intepolatedWeights(

diff --git a/src/helpers/math_helpers.js b/src/helpers/math_helpers.js
@@ -25,3 +25,32 @@ export function inverseLerp(min, max, val) {
 export function clamp(min, val, max) {
   return Math.max(min, Math.min(val, max));
 }
+
+export function rotationMatrix(roll, yaw, pitch) {
+  let cosa = Math.cos(yaw);
+  let sina = Math.sin(yaw);
+
+  let cosb = Math.cos(pitch);
+  let sinb = Math.sin(pitch);
+
+  let cosc = Math.cos(roll);
+  let sinc = Math.sin(roll);
+
+  let Axx = cosa * cosb;
+  let Axy = cosa * sinb * sinc - sina * cosc;
+  let Axz = cosa * sinb * cosc + sina * sinc;
+
+  let Ayx = sina * cosb;
+  let Ayy = sina * sinb * sinc + cosa * cosc;
+  let Ayz = sina * sinb * cosc - cosa * sinc;
+
+  let Azx = -sinb;
+  let Azy = cosb * sinc;
+  let Azz = cosb * cosc;
+
+  return { Axx, Axy, Axz, Ayx, Ayy, Ayz, Azx, Azy, Azz };
+}
+
+export function rotate({ x: px, y: py, z: pz }, { Axx, Axy, Axz, Ayx, Ayy, Ayz, Azx, Azy, Azz }) {
+  return { x: Axx * px + Axy * py + Axz * pz, y: Ayx * px + Ayy * py + Ayz * pz, z: Azx * px + Azy * py + Azz * pz };
+}
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import { polarToCartesian, inverseLerp } from "helpers/math_helpers";
+import { polarToCartesian, inverseLerp, rotate, rotationMatrix } from "helpers/math_helpers";
 import { buildGalaxy } from "galaxy_builder";
 import * as easing from "helpers/easing_helpers";
 import debounce from "lodash.debounce";
@@ -121,7 +121,10 @@ let config = {
   canvas3Blend: "overlay",
 
   // camera
-  zoom: 1
+  zoom: 1,
+  xRotation: 0,
+  yRotation: 0,
+  zRotation: 0
 };
 
 let stars = [];
@@ -171,7 +174,7 @@ function updateStarsAndRenderNonOptimized() {
   render();
 }
 
-let updateStarsAndRender = debounce(updateStarsAndRenderNonOptimized, 50);
+let updateStarsAndRender = debounce(updateStarsAndRenderNonOptimized, 100);
 
 function starWeights(types, easingString) {
   return {
@@ -191,7 +194,8 @@ function render() {
   document.getElementById("scene").style.backgroundColor = config.spaceColor;
   mainCanvasContext.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
   renderCanvas(mainCanvasContext, mainCanvas, 0);
-  stars.forEach(star => renderStar(star, mainCanvasContext));
+  let matrix = rotationMatrix(config.xRotation, config.yRotation, config.zRotation);
+  stars.forEach(star => renderStar(star, mainCanvasContext, matrix));
 
   for (let i = 1; i < canvases.length; i++) {
     let canvas = canvases[i];
@@ -230,16 +234,11 @@ function subscribeToInputChanges() {
     });
 }
 
-function renderStar(star, context) {
-  let { x, y } = star.pos;
-  if (x === undefined && y === undefined) {
-    const cartesian = polarToCartesian(star.pos.r, star.pos.t);
-    x = cartesian.x;
-    y = cartesian.y;
-  }
+function renderStar(star, context, rotationMatrix) {
+  const cartesian = polarToCartesian(star.pos.r, star.pos.t);
+  var { x, y, z } = rotate({ x: cartesian.x, y: cartesian.y, z: 0 }, rotationMatrix);
   const xInverseLerpValue = inverseLerp(-config.galaxyRadius / config.zoom, config.galaxyRadius / config.zoom, x);
   const yInverseLerpValue = inverseLerp(-config.galaxyRadius / config.zoom, config.galaxyRadius / config.zoom, y);
-  console.log;
   x = 800 * xInverseLerpValue * window.devicePixelRatio;
   y = 800 * yInverseLerpValue * window.devicePixelRatio;
   const size = config[`${star.size}Size`] * window.devicePixelRatio;