for another project we are trying to fade through the RGB color space (from one color to another). As a proof of concept we build the logic in JavaScript. As a final result, the background of a div should be changed to the given color, step by step. But in our example the div just get set to the final color and doesn't show the steps between the start and end color.
Since we can't get it to work, our qustion: What is wrong here? is the logic flawed or our JS skills :) ?
<html>
<head>
<script src="http://ift.tt/13qgtmt"></script>
</head>
<body>
<script>
$(function() {
var colors = [];
$('#go').click(function() {
console.log($('#red1').val()+" "+$('#green1').val()+" "+$('#blue1').val()+" "+$('#red2').val()+" "+$('#green2').val()+" "+$('#blue2').val());
slidecolor($('#red1').val(), $('#green1').val(), $('#blue1').val(), $('#red2').val(), $('#green2').val(), $('#blue2').val());
readArray();
});
function slidecolor(StartsR, StartsG, StartsB, aimR, aimG, aimB) {
StartsR = parseInt(StartsR);
StartsG = parseInt(StartsG);
StartsB = parseInt(StartsB);
aimR = parseInt(aimR);
aimG = parseInt(aimG);
aimB = parseInt(aimB);
if(aimR >= StartsR)
{
var directionR = 1;
console.log("größer");
var distanceR = aimR - StartsR;
}
else
{
var directionR = 0;
console.log("kleiner");
var distanceR = StartsR - aimR;
}
if(aimB >= StartsB)
{
var directionB = 1;
var distanceB = aimB - StartsB;
}
else
{
var directionB = 0;
var distanceB = StartsB - aimB;
}
if(aimG >= StartsG)
{
var directionG = 1;
var distanceG = aimG - StartsG;
}
else
{
var directionG = 0;
var distanceG = StartsG - aimG;
}
if((distanceR >= distanceB) && (distanceR >= distanceG)) { var distance = distanceR; }
if((distanceG >= distanceR) && (distanceG >= distanceB)) { var distance = distanceG; }
if((distanceB >= distanceR) && (distanceB >= distanceG)) { var distance = distanceB; }
var stepsR = Math.round(distance/distanceR);
var stepsG = Math.round(distance/distanceG);
var stepsB = Math.round(distance/distanceB);
console.log(distance+" "+distanceR);
console.log(stepsR+" "+stepsG+" "+stepsB);
var tmpstepsR = 0;
var tmpstepsG = 0;
var tmpstepsB = 0;
for(i=0; i<=distance; i++) {
console.log(i);
if(i==0)
{
console.log("FIRST RUN");
if(directionR == 1) {
var tmpR = StartsR + 1;
tmpstepsR = stepsR;
}
else
{
var tmpR = StartsR - 1;
tmpstepsR = stepsR + 1;
}
if(directionG == 1) {
var tmpG = StartsG + 1;
tmpstepsG = stepsG;
}
else
{
var tmpG = StartsG - 1;
tmpstepsG = stepsG;
}
if(directionB == 1) {
var tmpB = StartsB + 1;
tmpstepsB = stepsB;
}
else
{
tmpstepsB = stepsB;
var tmpB = StartsB - 1;
}
}
else
{
console.log("NEXT RUN");
if(((stepsR == i) || (tmpstepsR == i)) && tmpR != aimR)
{
tmpstepsR = tmpstepsR + stepsR;
if(directionR == 1) {
var tmpR = tmpR + stepsR;
}
else
{
var tmpR = tmpR - stepsR;
}
}
if(((stepsG == i) || (tmpstepsG == i)) && tmpG != aimG)
{
tmpstepsG = tmpstepsG + stepsG;
if(directionG == 1) {
var tmpG = tmpG + stepsG;
}
else
{
var tmpG = tmpG - stepsG;
}
}
if(((stepsB == i) || (tmpstepsB == i)) && tmpB != aimB)
{
tmpstepsB = tmpstepsB + stepsB;
if(directionB == 1) {
var tmpB = tmpB + stepsB;
}
else
{
var tmpB = tmpB - stepsB;
}
}
}
console.log('rgb('+ tmpR +','+ tmpG +','+ tmpB +')');
colors.push('rgb('+ tmpR +','+ tmpG +','+ tmpB +')');
}
}
function readArray(){
colors.forEach(function(entry){
timeOut(entry);
$('#color').css("background-color", entry);
});
}
function timeOut(entry){
setTimeout(function(){$('#color').css("background-color", entry);}, 3000);
}
});
</script>
<h1>Farbe 1</h1>
red: <input id="red1">
green: <input id="green1">
blue: <input id="blue1">
<h1>Farbe 2</h2>
red: <input id="red2">
green: <input id="green2">
blue: <input id="blue2">
<button id="go">LET'S GO</button>
<div id="color" style="width:500px;height:500px"></div>
</body>
</html>
Please note that some parts may be a bit buggy or ugly since it's just a first try. The last part were we added some time out were some last resort and may be not best practice...
EDIT: jsfiddle
Aucun commentaire:
Enregistrer un commentaire