pick colors

meeees · Jan 2, 2020 · 2f48e37 · 2f48e37
1 parent a9a4a32
commit 2f48e37
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 13 deletions.
diff --git a/webgl/index.html b/webgl/index.html
@@ -1,6 +1,7 @@
 <html>
     <head>
         <title>lol 3</title>
+        <link rel="stylesheet" type="text/css" href="style.css">
     </head>
     <body>
         <canvas id="glCanvas" width="600" height="600" style="border:1px solid #000000;"></canvas>
@@ -9,9 +10,31 @@
             import {run} from './webgl.mjs';
             run();
         </script>
-        <p>Click to add voxels</p>
-        <p>Hold alt and click to remove voxels</p>
-        <p>Scroll to zoom</p>
-        <p>Press middle mouse and drag to rotate</p>
+        <div class="row">
+            <div class="column">
+                <p>Click to add voxels</p>
+                <p>Hold alt and click to remove voxels</p>
+                <p>Scroll to zoom</p>
+                <p>Press middle mouse and drag to rotate</p>
+            </div>
+            <div class="column">
+                <p>Scroll these to choose the color, or hold ctrl and click to choose from the voxels</p>
+                <div class="slidecontainer">
+                    <input type="range" min="0" max="255" value="100" class="slider" id="rSlider">
+                    Red
+                </div>
+                <div class="slidecontainer">
+                    <input type="range" min="0" max="255" value="100" class="slider" id="gSlider">
+                    Green
+                </div>
+                <div class="slidecontainer">
+                    <input type="range" min="0" max="255" value="100" class="slider" id="bSlider">
+                    Blue
+                </div>
+            </div>
+            <div class="colorDisplay" id="colorDisplay">
+            </div>
+          </div>
+
     </body>
 </html>
diff --git a/webgl/input.mjs b/webgl/input.mjs
@@ -3,7 +3,7 @@ class InputManager {
     static mouseX = 0;
     static mouseY = 0;
     static middleDown;
-    static initialize(canvas, addCallback, removeCallback, cameraCallback, zoomCallback)
+    static initialize(canvas, callbacks)
     {
         InputManager.mouseX = 0;
         InputManager.mouseY = 0;
@@ -13,20 +13,24 @@ class InputManager {
             InputManager.mouseY = mousePos.y;
             if(InputManager.middleDown)
             {
-                cameraCallback(evt.movementX, evt.movementY);
+                callbacks.cameraCallback(evt.movementX, evt.movementY);
             }
             //console.log(mousePos);
         });
         canvas.addEventListener('mousedown', function(evt) {
             if(evt.button == 0)
             {
-                if(evt.altKey)
+                if(evt.ctrlKey)
                 {
-                    removeCallback();
+                    callbacks.colorPickCallback();
+                }
+                else if(evt.altKey)
+                {
+                    callbacks.removeCallback();
                 }
                 else
                 {
-                    addCallback();
+                    callbacks.addCallback();
                 }
             }
             else if(evt.button == 1){
@@ -40,7 +44,7 @@ class InputManager {
             }
         });
         canvas.addEventListener('wheel', function(evt) {
-            zoomCallback(evt.deltaY);
+            callbacks.zoomCallback(evt.deltaY);
         })
     }
 

diff --git a/webgl/style.css b/webgl/style.css
@@ -0,0 +1,18 @@
+.column {
+    float: left;
+    width: 300px;
+  }
+
+  .colorDisplay {
+      float: left;
+      width: 50px;
+      height: 50px;
+      border: 1px solid;
+  }
+
+  /* Clear floats after the columns */
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
diff --git a/webgl/voxels.mjs b/webgl/voxels.mjs
@@ -17,6 +17,7 @@ class Voxel {
         this.pos = [x, y, z];
         this.texture = makeColorTexture(gl, new Uint8Array(col));
         this.ghost = ghost;
+        this.col = col;
         if(!this.ghost)
         {
             this.voxelIndex = voxelCount;

diff --git a/webgl/webgl.mjs b/webgl/webgl.mjs
@@ -7,6 +7,7 @@ var mat4 = glMatrix.mat4;
 
 var canvas;
 var gl;
+var colorSliders;
 var shaderInfo;
 var buffers;
 var screenBuffers;
@@ -15,7 +16,6 @@ var voxels;
 var ghostVoxel;
 var ghostVisible = false;
 var targetedVoxel;
-var newVoxelColor = [100, 100, 100, 255];
 
 var cameraPos = [0.0, 0.0, 0.0 ];
 var cameraRot = [0.0, 0.0, 0.0];
@@ -26,13 +26,28 @@ var renderTextures;
 function main() {
     canvas = document.getElementById('glCanvas');
     gl = canvas.getContext('webgl2', {alpha: false});
+    colorSliders = {
+        r: document.getElementById('rSlider'),
+        g: document.getElementById('gSlider'),
+        b: document.getElementById('bSlider'),
+        display: document.getElementById('colorDisplay')
+    }
+    colorSliders.r.oninput = sliderUpdate;
+    colorSliders.g.oninput = sliderUpdate;
+    colorSliders.b.oninput = sliderUpdate;
+    sliderUpdate();
 
     if(gl === null) {
         const dContext = canvas.getContext('2d');
         dContext.fillText('Your browser no like webgl2, use better browser', 10, 10);
     }
 
-    InputManager.initialize(canvas, addVoxel, removeVoxel, rotateCamera, zoomCamera);
+    InputManager.initialize(canvas, {
+        addCallback: addVoxel,
+        removeCallback: removeVoxel,
+        colorPickCallback: pickColor,
+        cameraCallback: rotateCamera,
+        zoomCallback: zoomCamera });
 
     shaderInfo = initPrograms(gl);
     buffers = Voxel.initBuffers(gl);
@@ -259,7 +274,8 @@ function addVoxel()
 {
     if(ghostVisible)
     {
-        var toAdd = new Voxel(gl, ghostVoxel.pos[0] - 0.05, ghostVoxel.pos[1] - 0.05, ghostVoxel.pos[2] - 0.05, newVoxelColor);
+        var color = [colorSliders.r.value, colorSliders.g.value, colorSliders.b.value, 255];
+        var toAdd = new Voxel(gl, ghostVoxel.pos[0] - 0.05, ghostVoxel.pos[1] - 0.05, ghostVoxel.pos[2] - 0.05, color);
         voxels.push(toAdd);
     }
 }
@@ -299,6 +315,38 @@ function zoomCamera(delta)
     }
 }
 
+function sliderUpdate()
+{
+    colorSliders.display.style.backgroundColor = '' + fullColorHex(colorSliders.r.value, colorSliders.g.value, colorSliders.b.value);
+}
+
+function rgbToHex (rgb) { 
+    var hex = Number(rgb).toString(16);
+    if (hex.length < 2) {
+         hex = "0" + hex;
+    }
+    return hex;
+  }
+
+function fullColorHex(r,g,b) {   
+    var red = rgbToHex(r);
+    var green = rgbToHex(g);
+    var blue = rgbToHex(b);
+    return red+green+blue;
+}
+
+function pickColor()
+{
+    if(targetedVoxel != null)
+    {
+        var col = targetedVoxel.col;
+        colorSliders.r.value = col[0];
+        colorSliders.g.value = col[1];
+        colorSliders.b.value = col[2]; 
+    }
+    sliderUpdate();
+}
+
 
 export function run() {
     main();