p5实现颜色取色器调色器代码-html代码-BFW代码库

p5实现颜色取色器调色器代码

代码语言：html

所属分类：选择器

代码描述：p5实现颜色取色器调色器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin: 0;
  overflow: hidden;
}
</style>


  
  
</head>

<body translate="no">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5-1.9.0.js"></script>
      <script  >

//part of december adventure on : https://budgies.netlify.app/

let angle = 0;
let saturation = 100;
let lightness = 100;
let draggingAngle = false;
let draggingSaturation = false;
let dragginglightness = false;
let ringWidth;
let radius;
let dx, dy;
let touchR = 15;

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSL);
  angleMode(DEGREES);
  radius = min(width, height) / 5;
  ringWidth = min(width, height) / 8;
  dx = width / 5;
  dy = height / 5;
  angle = random(0, 360);
  saturation = random(0, 100);
  lightness = random(0, 100);
  textSize(16);
  textAlign(CENTER);
}

function draw() {
  background(angle, saturation, lightness);
  translate(width / 2, height / 2);
  noFill();
  drawRing();
  drawBBar();
  drawSBar();
  angleSelector();
  saturationSelector();
  lightnessSelector();
  borderAndText();
}

function borderAndText() {
  noFill();
  stroke((angle + 180) % 360, 100 - saturation, 100 - lightness);
  rect(
    -width / 2 + dx / 4,
    -height / 2 + dy / 4,
    width - dx / 2,
    height - dy / 2
  );
  rect(
    -width / 2 + dx / 4,
    -height / 2 + dy / 4,
    width - dx / 2,
    height - dy / 2
  );
  if (lightness >= 70) {
    b = 100;
  } else {
    b = 0;
  }
  fill((360 - angle) % 360, 0, 100 - b);
  noStroke();
  text(
    "hsl(" +
      round(angle) +
      "deg, " +
      round(saturation) +
      "%, " +
      round(lightness) +
      "%)",
    0,
    height / 2 - dy / 2
  );
  rgb1 = hslToRgb(angle, saturation, lightness);
  text(
    "rgb(" + round(rgb1.r) + ", " + round(rgb1.g) + ", " + round(rgb1.b) + ")",
    0,
    -height / 2 + dy / 2
  );
  hexStr = rgbToHex(rgb1.r, rgb1.g, rgb1.b);
  text(hexStr, 0, -height / 2 + dy / 2 + 20);
}

function mousePressed() {
  let selX = cos(angle) * radius;
  let selY = sin(angle) * radius;
  let d = dist(mouseX - width / 2, mouseY - height / 2, selX, selY);
  if (d < 20) {
    draggingAngle = true;
    return;
  }

  let satX = -width / 2 + dx;
  let satY = map(saturation, 0, 100, height / 2 - dy, -height / 2 + dy);
  let satD = dist(mouseX - width / 2, mouseY - height / 2, satX, satY);
  if (satD < 20) {
    draggingSaturation = true;
    return;
  }

  let brightX = width / 2 - dx;
  let brightY = map(lightness, 0, 100, height / 2 - dy, -height / 2 + dy);
  let brightD = dist(mouseX - width / 2, mouseY - height / 2, brightX, brightY);
  if (brightD < 20) {
    dragginglightness = true;
  }
}

function touchStarted() {
  let touchX = touches[0].x - width / 2;
  let touchY = touches[0].y - height / 2;

  let selX = cos(angle) * radius;
  let selY = sin(angle) * radius;
  let d = dist(touchX, touchY, selX, selY);
  if (d < 20) {
    draggingAngle = true;
    return false;
  }

  let satX = -width / 2 + dx;
  let satY = map(saturation, 0, 100, height / 2 - dy, -height / 2 + dy);
  let satD = dist(touchX, touchY, satX, satY);
  if (satD < 20) {
    draggingSaturation = true;
    return false;
  }

  let brightX = width / 2 - dx;
  let brightY = map(lightness, 0, 100, height / 2 - dy, -height / 2 + dy);
  let brightD = dist(touchX, touchY, brightX, brightY);
  if (brightD < 20) {
    dragginglightness = true;
    return false;
  }
  return false;
}

function mouseDragged() {
  if (draggingAngle) {
    angle = atan2(mouseY - height / 2, mouseX - width / 2);
    if (angle &.........完整代码请登录后点击上方下载按钮下载查看