let penWeight = 5

​

let c;

let r1;

let r2;

​

//カラーパレットの描画

function drawColorPallet() {

  noStroke();

  fill(c[0]);

  ellipse(50, 50, 30, 30);

  fill(c[1]);

  ellipse(50, 100, 30, 30);

  fill(c[2]);

  ellipse(50, 150, 30, 30);

  fill(c[3]);

  ellipse(50, 200, 30, 30);

  fill(c[4]);

  strokeWeight(3);

  stroke(c[3]);

  rect(50, 250, 28, 28, 8);

  drawingContext.setLineDash([1, 8]);

  ellipse(width-50, 50, 40, 40);

  drawingContext.setLineDash([1, 1]);

}

​

//カラーパレットが押された時の処理

function mouseClicked() {

  if (dist(mouseX, mouseY, 50, 50) < 15) {

    pen = 0;

    penWeight = 5;

  }

  if (dist(mouseX, mouseY, 50, 100) < 15) {

    pen = 1;

    penWeight = 5;

  }

  if (dist(mouseX, mouseY, 50, 150) < 15) {

    pen = 2;

    penWeight = 5;

  }

  if (dist(mouseX, mouseY, 50, 200) < 15) {

    pen = 3;

    penWeight = 5;

  }

  if (dist(mouseX, mouseY, 50, 250) < 15) {

    pen = 4;

    penWeight = 15;

  }

  if (dist(mouseX, mouseY, 450, 50) < 20) {

    background(c[4]);

  }

}

​

//タイトルの描画

function drawTitle(){

  noStroke();

  textAlign(CENTER);

  textFont('Nanum Pen Script');

  textSize(25);

  fill(c[3]);

  text("random color paint", width/2, height -20)

}

​

function setup() {

  createCanvas(500, 500);

  rectMode(CENTER);

  colorMode(HSB);

  strokeWeight(5);

  stroke(0);

  r1 = int(random(360));

  r2 = int(random(360));

  c = [color(r1, 50, 80), //カラー１

       color((r1+120)%360, 50, 80), //カラー２

       color((r1+240)%360, 50, 80), //カラー３

       color(r2, 100, 30), //ペンの色

       color((r2+180)%360, 10, 90) //背景の色

      ];

  background(c[4]);

}

​

function draw() {

  stroke(c[pen])

  strokeWeight(penWeight);

  if (mouseIsPressed) {

    if(mouseButton === LEFT){

      line(mouseX, mouseY, pmouseX, pmouseY);

    }

  }

  drawColorPallet();

  drawTitle()

}