sketch.js

let mode = 1;
function setup() {
  createCanvas(600, 600); //ウィンドウサイズの指定
  background(100, 150, 250); //背景色を指定して1回だけ塗る。

  fill(255, 255, 100);
  noStroke(); //線なし
  rect(250, 200, 100, 400);
  fill(255, 255, 100); //塗りの色を指定
  noStroke(); //線なし
  ellipse(300, 200, 200, 250); //円
  fill(255, 0, 0); //塗りの色を指定
  ellipse(300, 50, 50, 100); //円
  ellipse(250, 300, 50, 50); //円
  fill(255, 0, 0); //塗りの色を指定
  ellipse(300, 50, 50, 100); //円
  ellipse(250, 300, 50, 70); //円
  fill(255, 0, 0); //塗りの色を指定
  ellipse(355, 300, 50, 70); //円
  stroke(255, 0, 0);
  noFill();
  ellipse(300, 250, 50, 100); //円
  stroke(255, 0, 0);
  fill(255, 0, 0);
  ellipse(300, 250, 49, 99); //円
  noStroke();
  fill(240, 200, 0);
  ellipse(300, 250, 40, 90); //円
  stroke(200, 200, 200);
  fill(250, 250, 250);
  ellipse(260, 180, 40, 90); //円
  ellipse(340, 180, 40, 90); //円
  noStroke();
  fill(0, 0, 0); //塗りの色を指定
  ellipse(260, 160, 20, 20); //円
  ellipse(340, 160, 20, 20);
  fill(255, 0, 0);
  noStroke(); //線なし
  rect(250, 500, 100, 20);
  //説明
  fill(0, 100, 0);
  noStroke();
  text(
    "１で鳥肌、２でハイライトの色になります。自由に鳥肌を配置しよう",
    20,
    580,
  );
}

function draw() {
  // background(0, 0, 0); //背景色を指定して1回だけ塗る。

  if (mouseIsPressed == true) {
    if (mode == 1) {
      fill(240, 200, 0);
      noStroke();
      circle(mouseX, mouseY, 30);
    }
    if (mode == 2) {
      fill(250, 250, 250);
      noStroke();
      circle(mouseX, mouseY, 10);
    }
  }
  //マウスのボタンが押し下げられた時の処理
}

function mouseReleased() {
  //マウスのボタンが離された時の処理
}

function keyPressed() {
  if (key == "1") {
    mode = 1;
  }
  if (key == "2") {
    mode = 2;
  }
  if (key == "s") {
    saveCanvas();
  }
}