Add palette selection to Two Fifty Six.
Chris Pressey
9 years ago
| 7 | 7 | |
| 8 | 8 | var CELL_WIDTH = BLOCK_WIDTH * 2; |
| 9 | 9 | var CELL_HEIGHT = BLOCK_HEIGHT * 2; |
| 10 | ||
| 11 | ||
| 12 | var makeSelect = function(container, labelText, optionsArray, fun) { | |
| 13 | var label = document.createElement('label'); | |
| 14 | label.innerHTML = labelText; | |
| 15 | container.appendChild(label); | |
| 16 | ||
| 17 | var select = document.createElement("select"); | |
| 18 | ||
| 19 | for (var i = 0; i < optionsArray.length; i++) { | |
| 20 | var op = document.createElement("option"); | |
| 21 | op.value = optionsArray[i][0]; | |
| 22 | op.text = optionsArray[i][1]; | |
| 23 | if (optionsArray[i].length > 2) { | |
| 24 | op.selected = optionsArray[i][2]; | |
| 25 | } else { | |
| 26 | op.selected = false; | |
| 27 | } | |
| 28 | select.options.add(op); | |
| 29 | } | |
| 30 | ||
| 31 | if (fun) { | |
| 32 | select.onchange = function(e) { | |
| 33 | fun(optionsArray[select.selectedIndex][0]); | |
| 34 | }; | |
| 35 | } | |
| 36 | ||
| 37 | container.appendChild(select); | |
| 38 | return select; | |
| 39 | }; | |
| 40 | ||
| 10 | 41 | |
| 11 | 42 | function launch(prefix, containerId, config) { |
| 12 | 43 | var config = config || {}; |
| 55 | 86 | } |
| 56 | 87 | ); |
| 57 | 88 | |
| 89 | yoob.makeLineBreak(container); | |
| 90 | makeSelect(container, "Palette:", [ | |
| 91 | ['RGB', 'RGB'], | |
| 92 | ['Greyscale', 'Greyscale'] | |
| 93 | ], function(value) { | |
| 94 | var pals = { | |
| 95 | 'RGB': [ | |
| 96 | '#ffffff', | |
| 97 | '#ff0000', | |
| 98 | '#00ff00', | |
| 99 | '#0000ff' | |
| 100 | ], | |
| 101 | 'Greyscale': [ | |
| 102 | '#ffffff', | |
| 103 | '#aaaaaa', | |
| 104 | '#555555', | |
| 105 | '#000000' | |
| 106 | ] | |
| 107 | }; | |
| 108 | g.setMasterPalette(pals[value]); | |
| 109 | }); | |
| 110 | ||
| 58 | 111 | g.init({ |
| 59 | 112 | canvas: canvas, |
| 60 | 113 | delay: startDelay, |
| 66 | 119 | } |
| 67 | 120 | |
| 68 | 121 | |
| 69 | var COLOURS = [ | |
| 70 | '#ffffff', | |
| 71 | '#ff0000', | |
| 72 | '#00ff00', | |
| 73 | '#0000ff' | |
| 74 | ]; | |
| 75 | ||
| 76 | ||
| 77 | 122 | function shuffle(ary) { |
| 78 | 123 | var oldAry = ary.map(function(x) { return x; }) |
| 79 | 124 | var newAry = []; |
| 88 | 133 | this.init = function(cfg) { |
| 89 | 134 | this.canvas = cfg.canvas; |
| 90 | 135 | this.ctx = this.canvas.getContext('2d'); |
| 136 | this.masterPalette = [ | |
| 137 | '#ffffff', | |
| 138 | '#ff0000', | |
| 139 | '#00ff00', | |
| 140 | '#0000ff' | |
| 141 | ]; | |
| 91 | 142 | this.palettes = new Array(256); |
| 92 | 143 | this.makePalettes(); |
| 93 | 144 | this.delay = cfg.delay || 0; |
| 145 | 196 | this.animation.start(); |
| 146 | 197 | }; |
| 147 | 198 | |
| 199 | this.setMasterPalette = function(pal) { | |
| 200 | this.masterPalette = pal; | |
| 201 | this.draw(); | |
| 202 | }; | |
| 203 | ||
| 148 | 204 | this.makePalettes = function() { |
| 149 | 205 | for (var i = 0; i < 256; i++) { |
| 150 | this.palettes[i] = shuffle(COLOURS); | |
| 206 | this.palettes[i] = shuffle(this.masterPalette); | |
| 151 | 207 | } |
| 152 | 208 | }; |
| 153 | 209 | |