feedc0de/Gummi-Engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented rainbow color generator

Browse Source
This commit is contained in:
Daniel Brunner
2016-12-01 09:29:57 +01:00
parent c1951f8bd5
commit e0fe3b6cf4
2 changed files with 34 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -90,7 +90,7 @@
<div class="form-group"> <div class="form-group">
<label for="input_bounce">BOUNCE:</label> <label for="input_bounce">BOUNCE:</label>
<div class="input-group"> <div class="input-group">
<input type="range" id="input_bounce" class="form-control" value=".75" min="-2" max="2" step=".001" aria-describedby="display_bounce" /> <input type="range" id="input_bounce" class="form-control" value=".75" min="-2" max="10" step=".001" aria-describedby="display_bounce" />
<span id="display_bounce" class="input-group-addon"></span> <span id="display_bounce" class="input-group-addon"></span>
</div> </div>
</div> </div>
@@ -125,6 +125,7 @@
<legend>Segmente:</legend> <legend>Segmente:</legend>
<button id="button_add" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Hinzuf&uuml;gen</button> <button id="button_add" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Hinzuf&uuml;gen</button>
<button id="button_rainbow" class="btn btn-success"><i class="glyphicon glyphicon glyphicon-tint"></i> Regenbogen</button>
<table class="table table-striped table-condensed"> <table class="table table-striped table-condensed">
<thead> <thead>

33
script.js
View File

@@ -154,7 +154,7 @@ $(document).ready(function($) {
color: $('<td>').appendTo(this.row), color: $('<td>').appendTo(this.row),
actions: $('<td>').appendTo(this.row), actions: $('<td>').appendTo(this.row),
} }
$('<input />') this.colorPicker = $('<input />')
.attr('type', 'color') .attr('type', 'color')
.change(function(){ .change(function(){
entity.elem.css('background-color', $(this).val()); entity.elem.css('background-color', $(this).val());
@@ -182,6 +182,37 @@ $(document).ready(function($) {
entities.push(new Entity()); entities.push(new Entity());
}); });
$('#button_rainbow').click(function(){
var generateColors = function(count) {
var generateColor = function(position) {
var makeCode = function(r, g, b) {
return '#' +
(r < 16 ? '0' : '') + Math.round(r).toString(16) +
(g < 16 ? '0' : '') + Math.round(g).toString(16) +
(b < 16 ? '0' : '') + Math.round(b).toString(16);
}
if(position >= 0 && position <= 255) return makeCode(255, position, 0);
else if(position >= 256 && position <= 511) return makeCode(255 - (position - 256), 255, 0);
else if(position >= 512 && position <= 767) return makeCode(0, 255, position - 512);
else if(position >= 768 && position <= 1023) return makeCode(0, 255 - (position - 768), 255);
else if(position >= 1024 && position <= 1279) return makeCode(position - 1024, 0, 255);
else if(position >= 1280 && position <= 1535) return makeCode(255, 0, 255 - (position - 1280));
};
var colors = [];
for(var position = 0; position <= 1535; position += (1536 / count))
colors.push(generateColor(position));
return colors;
};
var colors = generateColors(entities.length);
for(var i = 0; i < entities.length; i++) {
entities[i].elem.css('background-color', colors[i]);
entities[i].colorPicker.val(colors[i]);
}
});
for (var i = 0; i < 8; i++) { for (var i = 0; i < 8; i++) {
$('#button_add').click(); $('#button_add').click();
} }