git @ Cat's Eye Technologies HTML5-Gewgaws / e1fd19a
Use newer Range controls in Kolakoski Kurve and Two Fifty Six. Chris Pressey 6 years ago
6 changed file(s) with 224 addition(s) and 41 deletion(s). Raw diff Collapse all Expand all
+5
-0
kolakoski-kurve/index.html less more
66 #container {
77 width: 100%;
88 text-align: center;
9 }
10 #sliders-panel {
11 display: inline-block;
12 width: 50%;
13 text-align: right;
914 }
1015 </style>
1116 </head>
+34
-15
kolakoski-kurve/kolakoski-kurve.js less more
1212 var gewgaw = new KolakoskiKurve();
1313
1414 var canvas = yoob.makeCanvas(container, 800, 600);
15 yoob.makeLineBreak(container);
16 yoob.makeSliderPlusTextInput(container, "Segment length:", 2, 25, (2), 5, function(v) {
17 gewgaw.dist = v;
15 var slidersPanel = yoob.makeDiv(container);
16 slidersPanel.id = "sliders-panel";
17 yoob.makeRangeControl(slidersPanel, {
18 label: "Segment length:",
19 min: 2,
20 max: 25,
21 value: 5,
22 callback: function(v) {
23 gewgaw.dist = v;
24 }
25 });
26 yoob.makeLineBreak(slidersPanel);
27 yoob.makeRangeControl(slidersPanel, {
28 label: "Start index:",
29 min: 1,
30 max: 10000,
31 value: 1,
32 callback: function(v) {
33 gewgaw.startIndex = v - 1;
34 gewgaw.reset();
35 }
36 });
37 yoob.makeLineBreak(slidersPanel);
38 yoob.makeRangeControl(slidersPanel, {
39 label: "End index:",
40 min: 1,
41 max: 10000,
42 value: 10000,
43 callback: function(v) {
44 gewgaw.endIndex = v - 1;
45 gewgaw.reset();
46 }
1847 });
1948 yoob.makeLineBreak(container);
20 yoob.makeSliderPlusTextInput(container, "Start index", 1, 10000, 5, 1, function(v) {
21 gewgaw.startIndex = v - 1;
22 gewgaw.reset();
23 });
24 yoob.makeLineBreak(container);
25 yoob.makeSliderPlusTextInput(container, "End index", 1, 10000, 5, 10000, function(v) {
26 gewgaw.endIndex = v - 1;
27 gewgaw.reset();
28 });
29 yoob.makeLineBreak(container);
30 yoob.makeSelect(container, "Draw style", [
49 yoob.makeSelect(container, "Draw style:", [
3150 ['opaque', "Opaque"],
3251 ['translucent', "Translucent"],
3352 ['xor', "XOR"]
3655 }, 'opaque');
3756 yoob.makeLineBreak(container);
3857 var button = yoob.makeButton(container, 'Reset', function() {
39 // this circumlocution is only to avoid weird glitching when reseting 'xor' style.
58 // this circumlocution is only to avoid weird glitching when resetting 'xor' style.
4059 var style = gewgaw.style;
4160 gewgaw.setStyle('opaque');
4261 gewgaw.setStyle(style);
+77
-7
kolakoski-kurve/yoob/element-factory.js less more
00 /*
1 * This file is part of yoob.js version 0.10
1 * This file is part of yoob.js version 0.13
22 * Available from https://github.com/catseye/yoob.js/
33 * This file is in the public domain. See http://unlicense.org/ for details.
44 */
209209 };
210210 textInput.onchange = function(e) {
211211 var v = parseInt(textInput.value, 10);
212 if (v !== NaN) {
212 if (!isNaN(v)) {
213213 slider.value = "" + v;
214214 fun(v);
215215 }
221221 });
222222 };
223223
224 var RangeControl = function() {
225 this.init = function(cfg) {
226 this.slider = cfg.slider;
227 this.textInput = cfg.textInput;
228 this.callback = cfg.callback;
229 this.incButton = cfg.incButton;
230 this.decButton = cfg.decButton;
231 return this;
232 };
233
234 this.set = function(value) {
235 this.slider.value = "" + value;
236 this.textInput.value = "" + value;
237 this.callback(value);
238 };
239 };
240
241 yoob.makeRangeControl = function(container, config) {
242 var label = config.label;
243 var min_ = config['min'];
244 var max_ = config['max'];
245 var value = config.value || min_;
246 var callback = config.callback || function(v) {};
247 var textInputSize = config.textInputSize || 5;
248 var withButtons = config.withButtons === false ? false : true;
249
250 yoob.makeSpan(container, label);
251 var slider = yoob.makeSlider(container, min_, max_, value);
252 var s = "" + value;
253 var textInput = yoob.makeTextInput(container, textInputSize, s);
254 slider.onchange = function(e) {
255 textInput.value = slider.value;
256 callback(parseInt(slider.value, 10));
257 };
258 textInput.onchange = function(e) {
259 var v = parseInt(textInput.value, 10);
260 if (!isNaN(v)) {
261 slider.value = "" + v;
262 callback(v);
263 }
264 };
265 var incButton;
266 var decButton;
267 if (withButtons) {
268 decButton = yoob.makeButton(container, "-", function() {
269 var v = parseInt(textInput.value, 10);
270 if ((!isNaN(v)) && v > min_) {
271 v--;
272 textInput.value = "" + v;
273 slider.value = "" + v;
274 callback(v);
275 }
276 });
277 incButton = yoob.makeButton(container, "+", function() {
278 var v = parseInt(textInput.value, 10);
279 if ((!isNaN(v)) && v < max_) {
280 v++;
281 textInput.value = "" + v;
282 slider.value = "" + v;
283 callback(v);
284 }
285 });
286 }
287 return new RangeControl().init({
288 'slider': slider,
289 'incButton': incButton,
290 'decButton': decButton,
291 'textInput': textInput,
292 'callback': callback
293 });
294 };
295
224296 yoob.makeSVG = function(container) {
225297 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
226298 /* <svg viewBox = "0 0 200 200" version = "1.1"> */
230302
231303 yoob.makeSVGElem = function(svg, tag, cfg) {
232304 var elem = document.createElementNS(svg.namespaceURI, tag);
233 for (var key in cfg) {
234 if (cfg.hasOwnProperty(key)) {
235 elem.setAttribute(key, cfg[key]);
236 }
237 }
305 Object.keys(cfg).forEach(function(key) {
306 elem.setAttribute(key, cfg[key]);
307 });
238308 svg.appendChild(elem);
239309 return elem;
240310 };
+5
-0
two-fifty-six/index.html less more
33 <title>Two Fifty Six</title>
44 <style>
55 body { text-align: center; }
6 #sliders-panel {
7 display: inline-block;
8 width: 40%;
9 text-align: right;
10 }
611 </style>
712 </head>
813 <body>
+26
-12
two-fifty-six/two-fifty-six.js less more
4848 );
4949 canvas.style.border = Math.round(BLOCK_WIDTH / 2) + 'px solid black';
5050
51 yoob.makeLineBreak(container);
52 var slidersPanel = yoob.makeDiv(container);
53 slidersPanel.id = "sliders-panel";
5154 var speed = getIntParam('speed', 5, 0, 50);
52 yoob.makeLineBreak(container);
53 yoob.makeSliderPlusTextInput(
54 container, "Speed:", 0, 50, 5, speed, function(v) {
55 yoob.makeRangeControl(slidersPanel, {
56 label: "Speed:",
57 min: 0,
58 max: 50,
59 value: speed,
60 callback: function(v) {
5561 g.setDelay(50 - v);
5662 }
57 );
63 });
5864 g.setDelay(50 - speed);
5965
6066 var variety = getIntParam('variety', 1, 1, 256);
61 yoob.makeLineBreak(container);
62 yoob.makeSliderPlusTextInput(
63 container, "Variety:", 1, 256, 5, variety, function(v) {
67 yoob.makeLineBreak(slidersPanel);
68 yoob.makeRangeControl(slidersPanel, {
69 label: "Variety:",
70 min: 1,
71 max: 256,
72 value: variety,
73 callback: function(v) {
6474 g.setVariety(v);
6575 }
66 );
76 });
6777 g.setVariety(variety);
6878
6979 var noise = getIntParam('noise', 0, 0, 100);
70 yoob.makeLineBreak(container);
71 yoob.makeSliderPlusTextInput(
72 container, "Noise:", 0, 100, 5, noise, function(v) {
80 yoob.makeLineBreak(slidersPanel);
81 yoob.makeRangeControl(slidersPanel, {
82 label: "Noise:",
83 min: 0,
84 max: 100,
85 value: noise,
86 callback: function(v) {
7387 g.setNoise(v);
7488 }
75 );
89 });
7690 g.setNoise(noise);
7791
7892 var palette = params.palette || 'Tetrade';
+77
-7
two-fifty-six/yoob/element-factory.js less more
00 /*
1 * This file is part of yoob.js version 0.10
1 * This file is part of yoob.js version 0.13
22 * Available from https://github.com/catseye/yoob.js/
33 * This file is in the public domain. See http://unlicense.org/ for details.
44 */
209209 };
210210 textInput.onchange = function(e) {
211211 var v = parseInt(textInput.value, 10);
212 if (v !== NaN) {
212 if (!isNaN(v)) {
213213 slider.value = "" + v;
214214 fun(v);
215215 }
221221 });
222222 };
223223
224 var RangeControl = function() {
225 this.init = function(cfg) {
226 this.slider = cfg.slider;
227 this.textInput = cfg.textInput;
228 this.callback = cfg.callback;
229 this.incButton = cfg.incButton;
230 this.decButton = cfg.decButton;
231 return this;
232 };
233
234 this.set = function(value) {
235 this.slider.value = "" + value;
236 this.textInput.value = "" + value;
237 this.callback(value);
238 };
239 };
240
241 yoob.makeRangeControl = function(container, config) {
242 var label = config.label;
243 var min_ = config['min'];
244 var max_ = config['max'];
245 var value = config.value || min_;
246 var callback = config.callback || function(v) {};
247 var textInputSize = config.textInputSize || 5;
248 var withButtons = config.withButtons === false ? false : true;
249
250 yoob.makeSpan(container, label);
251 var slider = yoob.makeSlider(container, min_, max_, value);
252 var s = "" + value;
253 var textInput = yoob.makeTextInput(container, textInputSize, s);
254 slider.onchange = function(e) {
255 textInput.value = slider.value;
256 callback(parseInt(slider.value, 10));
257 };
258 textInput.onchange = function(e) {
259 var v = parseInt(textInput.value, 10);
260 if (!isNaN(v)) {
261 slider.value = "" + v;
262 callback(v);
263 }
264 };
265 var incButton;
266 var decButton;
267 if (withButtons) {
268 decButton = yoob.makeButton(container, "-", function() {
269 var v = parseInt(textInput.value, 10);
270 if ((!isNaN(v)) && v > min_) {
271 v--;
272 textInput.value = "" + v;
273 slider.value = "" + v;
274 callback(v);
275 }
276 });
277 incButton = yoob.makeButton(container, "+", function() {
278 var v = parseInt(textInput.value, 10);
279 if ((!isNaN(v)) && v < max_) {
280 v++;
281 textInput.value = "" + v;
282 slider.value = "" + v;
283 callback(v);
284 }
285 });
286 }
287 return new RangeControl().init({
288 'slider': slider,
289 'incButton': incButton,
290 'decButton': decButton,
291 'textInput': textInput,
292 'callback': callback
293 });
294 };
295
224296 yoob.makeSVG = function(container) {
225297 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
226298 /* <svg viewBox = "0 0 200 200" version = "1.1"> */
230302
231303 yoob.makeSVGElem = function(svg, tag, cfg) {
232304 var elem = document.createElementNS(svg.namespaceURI, tag);
233 for (var key in cfg) {
234 if (cfg.hasOwnProperty(key)) {
235 elem.setAttribute(key, cfg[key]);
236 }
237 }
305 Object.keys(cfg).forEach(function(key) {
306 elem.setAttribute(key, cfg[key]);
307 });
238308 svg.appendChild(elem);
239309 return elem;
240310 };