#Codevember day14: Coffee

色を取得して，RGBの3つの値をXYZのような距離として，特徴的な色を抽出するテスト． ……と思ったがあまりうまくいかなかった．

p5.js Web Editor

let img;

let rows; //行（Y方向）
let cols; //列（X方向）
let colors = [];

//画像の読み込み
function preload() {
  img = loadImage("coffee-171653_960×640.jpg");
}

function setup() {
  createCanvas(1460, 500);
}

function draw() {
  background(255,255,255);
  //グリッドの数
  rows = 5;
  cols = 5;

  let n = 0;
  do {
    // 画像の幅高さからランダムにxyを変数に
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    //ランダムな点の色を取得
    let c = img.get(x, y);
    let r = red(c);
    let g = green(c);
    let b = blue(c);

    if (colors.length == 0) {
      colors.push(c);
      n++;
    } else {
      let addCount = 0;
      for (let i = 0; i < colors.length; i++) {
        let pc = colors[i];
        let pr = red(pc);
        let pg = green(pc);
        let pb = blue(pc);

        let distance = dist(r, g, b, pr, pg, pb);
        if (distance > 150) {
          addCount++;
        }
      }
      if (addCount > floor(colors.length / 2)) {
        colors.push(c);
        n++;
      }
    }
  } while (n < rows * cols);

  let k = 0;
  for (let j = 0; j < rows; j++) {
    for (let i = 0; i < cols; i++) {
      let xn = map(i, 0, cols, 0, 500);
      let yn = map(j, 0, rows, 0, height);
      let cn = colors[k];
      fill(cn);
      noStroke();
      rect(xn, yn, 500 / cols, height / rows);
      k++;
    }
  }
  colors = [];
  image(img, 500, 0);
  noLoop();
}

function mousePressed(){
    redraw();
}