2 28025

by DOK_UA

HTML

<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HSL Color Wheel Joystick + Mixing</title>
<style>
  html,body{height:100%;margin:0;background:#505050;font-family:Inter,Arial,system-ui,sans-serif;}
  #app{position:relative;width:340px;height:380px;margin:24px auto;user-select:none;touch-action:none;}
  .layer{position:absolute;left:20px;top:20px;width:300px;height:300px}
  #hud{position:absolute;right:0;top:0;color:#fff;font-size:12px;line-height:1.35;text-align:right;opacity:.95}
  #legend{position:absolute;left:0;top:0;color:#ddd;font-size:11px;line-height:1.35;white-space:nowrap}
  #legend code{background:#3c3c3c;border-radius:4px;padding:1px 4px}
  /* плавне повернення джойстика */
  #joyGroup{transition: transform .18s ease}
  /* ховати обводку під час взаємодій */
  .no-stroke{stroke:none !important}
  /* невидимий “гак” для drag на hue-диску */
  #hueDragHandle{fill:transparent;cursor:grab}
  #hueDragHandle:active{cursor:grabbing}
  /* курсор для джойстика */
  #joy{cursor:grab}
  #joy:active{cursor:grabbing}
</style>
</head>
<body>
<div id="app">
  <div id="legend">
    Клік по сегменту: +5% &nbsp; (<code>Shift</code>: +1%)<br/>
    <code>Alt</code> = заміна HUE &nbsp;&nbsp; <code>Ctrl</code> = заміна HSL
  </div>
  <div id="hud"></div>

  <!-- Палітра змішування: 12 сегментів + білий/чорний -->
  <svg id="mix" class="layer" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg">
    <!-- 12 сегментів (використано твою геометрію) -->
    <path class="mix-seg" id="mix-1"  d="m49.8 1.9482-2.4398 9.1049a29.719 29.719 0 0 0-1.5866-0.38428 29.719 29.719 0 0 1 16.244 9.6434l4.9207-4.2697 0.37697-3.9821c-5.0834-5.0834-10.571-8.2516-17.515-10.112z" style="fill:#fb9902"/>
    <path class="mix-seg" id="mix-2"  d="m67.315 12.06-6.7021 6.7021a29.719 29.719 0 0 1 7.6206...

JavaScript

QuadrantArray= [
	["A000", "A001", "A002", "A003", "A100", "A101", "A102", "A103", "A200", "A201", "A202", "A203", "A300", "A301", "A302", "A303"],
	["A010", "A011", "A012", "A013", "A110", "A111", "A112", "A113", "A210", "A211", "A212", "A213", "A310", "A311", "A312", "A313"],
	["A020", "A021", "A022", "A023", "A120", "A121", "A122", "A123", "A220", "A221", "A222", "A223", "A320", "A321", "A322", "A323"],
	["A030", "A031", "A032", "A033", "A130", "A131", "A132", "A133", "A230", "A231", "A232", "A233", "A330", "A331", "A332", "A333"],
	["B000", "B001", "B002", "B003", "B100", "B101", "B102", "B103", "B200", "B201", "B202", "B203", "B300", "B301", "B302", "B303"],
	["B010", "B011", "B012", "B013", "B110", "B111", "B112", "B113", "B210", "B211", "B212", "B213", "B310", "B311", "B312", "B313"],
	["B020", "B021", "B022", "B023", "B120", "B121", "B122", "B123", "B220", "B221", "B222", "B223", "B320", "B321", "B322", "B323"],
	["B030", "B031", "B032", "B033", "B130", "B131", "B132", "B133", "B230", "B231", "B232", "B233", "B330", "B331", "B332", "B333"],
	["C000", "C001", "C002", "C003", "C100", "C101", "C102", "C103", "C200", "C201", "C202", "C203", "C300", "C301", "C302", "C303"],
	["C010", "C011", "C012", "C013", "C110", "C111", "C112", "C113", "C210", "C211", "C212", "C213", "C310", "C311", "C312", "C313"],
	["C020", "C021", "C022", "C023", "C120", "C121", "C122", "C123", "C220", "C221", "C222", "C223", "C320", "C321", "C322", "C323"],
	["C030", "C031", "C032", "C033", "C130", "C131", "C132", "C133", "C230", "C231", "C232", "C233", "C330", "C331", "C332", "C333"],
	["D000", "D001", "D002", "D003", "D100", "D101", "D102", "D103", "D200", "D201", "D202", "D203", "D300", "D301", "D302", "D303"],
	["D010", "D011", "D012", "D013", "D110", "D111", "D112", "D113", "D210", "D211", "D212", "D213", "D310", "D311", "D312", "D313"],
	["D020", "D021", "D022", "D023", "D120", "D121", "D122", "D123", "D220", "D221", "D222", "D223", "D320", "D321", "D322",...