diff options
| -rw-r--r-- | rectangles.html | 51 |
1 files changed, 39 insertions, 12 deletions
diff --git a/rectangles.html b/rectangles.html index 0c054d5..94bca0f 100644 --- a/rectangles.html +++ b/rectangles.html @@ -15,6 +15,11 @@ body > div { <div id="map"></div> <div id="info"> + <select id="palette"> + <option>colors</option> + <option>redblue</option> + <option selected>gray</option> + </select> <span id="intersects"></span> </div> @@ -24,6 +29,40 @@ body > div { <script type="text/javascript" src="vec2.js"></script> <script type="text/javascript"> +(function(){ + var color_palettes = { + redblue: [ + "rgba(0,0,0,0.2)", + "rgba(255,0,0,0.2)", + "rgba(0,0,255,0.2)", + "rgba(200,200,200,0.2)", + ], + gray: [ + "rgba(0,0,0,0.1)", + "rgba(0,0,0,0.2)", + "rgba(0,0,0,0.3)", + "rgba(0,0,0,0.4)", + ], + colors: [ + "rgba(255,0,0,0.5)", + "rgba(255,128,0,0.5)", + "rgba(128,255,0,0.5)", + "rgba(0,255,0,0.5)", + "rgba(0,255,128,0.5)", + "rgba(0,128,255,0.5)", + "rgba(0,0,255,0.5)", + "rgba(128,0,255,0.5)", + "rgba(255,0,255,0.5)", + "rgba(255,0,128,0.5)", + ] + } + + var select = document.querySelector("#palette") + select.addEventListener("change", function(){ colors = color_palettes[select.value] }) + + window.colors = color_palettes[select.value] +})() + var canvas = document.createElement("canvas") var ctx = canvas.getContext("2d") var w = canvas.width = 500 @@ -164,18 +203,6 @@ function solve_rects(){ document.getElementById("intersects").innerHTML = regions.join("<br>") - var colors = [ - "rgba(255,0,0,0.5)", - "rgba(255,128,0,0.5)", - "rgba(128,255,0,0.5)", - "rgba(0,255,0,0.5)", - "rgba(0,255,128,0.5)", - "rgba(0,128,255,0.5)", - "rgba(0,0,255,0.5)", - "rgba(128,0,255,0.5)", - "rgba(255,0,255,0.5)", - "rgba(255,0,128,0.5)", - ] regions = regions.filter(function(r){ return !!r }) for (var i = 0; i < regions.length; i++) { ctx.fillStyle = colors[i % colors.length] |