Tests colorcircle #1

Détecter la position de la teinte dans un cercle

by toubia95

HTML

<div id="result"></div>
<div id="myhue"></div>
<div id="hopp"></div>

CSS

#myhue, #hopp {
    width: 20px;
    height : 20px;
    float: left;
    margin : 5px;
    background-color : hsl(0, 100%, 50%);
}

JavaScript

var myhue = 221;

var huecircle = [0, 11, 23, 28, 34, 41, 47, 53, 60, 69, 78, 96, 115, 153, 191, 200, 208, 221, 234, 255, 276, 299, 322, 341];
var huestart, hueend, thehue;
var myhuealt = (myhue+360)%360;
thehue = (myhuealt == myhue) ? myhue : myhuealt+' ('+myhue+')';

// détecter la position de myhue dans le huecircle
for (i = 0; i < huecircle.length; i++) {
    if ((myhuealt >= huecircle[i]) && (myhuealt <= huecircle[i + 1])) {
        huestart = huecircle[i];
        hueend = huecircle[i + 1];
        curr = i;
        next = i+1;
        copp = (curr+12)%24;
        nopp = (next+12)%24;
        oppstart = huecircle[copp];
        oppend = huecircle[nopp];
        n = (oppend == 0) ? oppstart + (((oppend-oppstart)+360) * ((1/(hueend-huestart))*(myhuealt-huestart))) : oppstart + ((oppend-oppstart) * ((1/(hueend-huestart))*(myhuealt-huestart)));
        hopp = parseInt(n,10);
    }
    if (myhuealt >= huecircle[huecircle.length-1]) {
        huestart = huecircle[huecircle.length-1];
        hueend = huecircle[0];
        curr = huecircle.length-1;
        next = 0;
        copp = (curr+12)%24;
        nopp = (next+12)%24;
        oppstart = huecircle[copp];
        oppend = huecircle[nopp];
        // calculer hopp
        n = oppstart + ((oppend-oppstart) * ((1/((hueend-huestart)+360))*(myhuealt-huestart)));
        hopp = parseInt(n,10);
    }
}

$('#result').append(thehue+' se situe entre '+huestart+' et '+hueend+'<br>');
$('#result').append('current: '+curr+', next: '+next+'<br>');
$('#result').append('current-opposite: '+copp+', next-opposite: '+nopp+'<br>');
$('#result').append('start-opposite: '+oppstart+', end-opposite: '+oppend+'<br>');
$('#result').append('hue-opposite: '+hopp);

$('#myhue').css('background-color','hsl('+myhue+', 100%, 50%)');
$('#hopp').css('background-color','hsl('+hopp+', 100%, 50%)');