let serial = new Serial();

let RGB_x;

let RGB_y;

const num = 87;

let c;

let pos;

let value = 0;

let col;

let rgbValue = [];

​

var serial_values = [];

function gotSerialValues(values) {

  for (let value of values) {

    serial_values.push(value);

    if (value == 255) {

      console.log("from Arduino", serial_values.length, serial_values);

      serial_values = [];

    }

  }

}

​

function preload() {

  img = loadImage(`RGB.png`);

}

​

function setup() {

  createCanvas(1000, 3000);

  stroke(255);

​

  RGB_x = 0;

  RGB_y = 0;

​

  for (let i = 0; i < num; i++) {

    b.push(

      new Button(

        20,

        createVector(

          350 * cos((i * 2 * PI) / 87) + 500,

          400 * sin((i * 2 * PI) / 87) + 450

        ),

        false,

        color(0, 0, 0)

      )

    );

  }

}

​

function draw() {

  background(0);

  // fill(255,255,255);

  // ellipse(500,30,500,600);

  image(img, RGB_x, RGB_y, 100, 100);

  for (let i = 0; i < num; i++) {

    b[i].colorChange();

    b[i].display();

  }

​

}

​

function keyPressed() {

  if (keyCode === LEFT_ARROW) {

    let rgbV = [];

    for (let i = 0; i < 87 * 3; i++) {

      rgbV[i] = 1;

    }

    rgbV[87 * 3] = 255;

​

    serial.writes(rgbV);

    console.log("console", rgbV.length, rgbV);

    value = 1;

  }

}

​

//クラス

class Button {

  constructor(diameter, position, status, c) {

    this.diameter = diameter;

    this.position = position;

    this.status = status;

    this.color = c;

    this.previouse_mousePressed = false;

    this.d = [];

    this.color2 = (100, 200, 0);

    this.col = [];

  }

​

  //display

  display() {

    fill(this.color2);

    rect(110, 30, 40, 40);

    fill(this.color);

    circle(this.position.x, this.position.y, this.diameter);

  }

​

  //colorChange

  colorChange() {

    if (mouseX < 100 && mouseY < 100) {

      if (mouseIsPressed) {

        this.color2 = get(mouseX, mouseY);

      }

    }

​

    //マウスがボタン上にあるとき（ボタン押下処理）

    if (

      dist(this.position.x, this.position.y, mouseX, mouseY) <

      this.diameter / 2

    ) {

      //マウスボタンが押されている、且つ一つ前の状態では押されていなかったとき

      if (mouseIsPressed == true && this.previouse_mousePressed == false) {

        this.status = !this.status; //falseならtrue, trueならfalseにする

        //console.log(this.status);

        //trueなら明るく

        if (this.status == true) {

          this.color = this.color2;

        }

        //falseならグレー

        else {

          this.color = [0, 0, 0, 255];

        }

        this.d = this.color.levels; //色の４つの配列

        //console.log(this.color);//色の４次元配列

      }

    }

    this.previouse_mousePressed = mouseIsPressed;

  }

}

​