Color Picker

What

グラデーション画面にマウスを重ねるとその部分のカラーコード(RGB)が表示されます。
下部のスライドバーで赤色の強度を変えることができます。

hex関数を使うことで、10進数から16進数へ変換してくれます。

How

var w = 255 / 3;
var h = w;
var slider;
var rate = 255 / w;
var redValue;
function setup() {
  createCanvas(w * 3 + 50, h * 3);
  slider = createSlider(0, w, 0);
  slider.position(10, 280);
  frameRate(30);
}

function draw() {
  redValue = slider.value() * 3;
  noStroke();
  for(i = 0;i < w;i++){
    for(j = 0;j < h;j++){
      fill(redValue, rate * i, rate * j);
      rect(i*3, j*3, 3,3);
    }
  }
  var redH = hex(int(redValue), 2);
  var greenH = hex(int(mouseX, 2);
  var blueH = hex(int(mouseY), 2);
  fill(0);
  text("color:#" + str(redH) + str(greenH) + str(blueH), 10, 240);
  fill("#" + str(redH) + str(greenH) + str(blueH));
  rect(w * 3 + 10, h / 2, 40,40);
}