Face

by 花岡真佑

2025-05-27 11:46:07

sketch.js

function setup() {
  createCanvas(600, 600); //ウィンドウサイズの指定
  background(220, 67, 50); //背景色を指定して1回だけ塗る。
}

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

  fill(237, 106, 46);
  rect(100, 300, 400, 300);

  fill(235, 147, 70); //服
  bezier(160, 600, 210, 370, 550, 525, 530, 600);

  fill(255, 215, 201);
  rect(100, 80, 400, 280); //顔
  stroke(139, 56, 49);
  beginShape(); //首
  vertex(330, 415);
  vertex(330, 470);
  vertex(280, 485);
  vertex(260, 525);
  vertex(450, 530);
  vertex(450, 480);
  vertex(410, 455);
  vertex(410, 415);
  endShape(CLOSE);
  bezier(125, 330, 85, 500, 470, 470, 495, 330); //輪郭

  noStroke();
  fill(254, 186, 131, 100); //ほっぺっぺ
  ellipse(430, 354, 120, 70);
  ellipse(440, 350, 120, 70);
  ellipse(140, 360, 120, 70);
  ellipse(135, 355, 120, 70);

  fill(200, 63, 50);
  circle(190, 300, 64); //目
  circle(400, 297, 64);

  fill(253, 158, 97); //目ハイライト
  circle(165, 315, 15);
  circle(372, 296, 15);

  fill(255, 195, 166);
  bezier(125, 310, 160, 180, 220, 272, 220, 272); //まぶた左
  bezier(305, 270, 340, 170, 465, 270, 453, 285); //まぶた右

  fill(139, 56, 49);
  bezier(300, 285, 285, 230, 480, 270, 455, 290); //アイライン右
  bezier(125, 318, 110, 290, 240, 240, 225, 290); //アイライン左
  circle(125, 300, 16); //左まつげ
  circle(140, 288, 16);
  circle(160, 280, 16);
  circle(312, 260, 16); //右まつげ
  circle(333, 255, 16);
  circle(358, 255, 16);

  circle(145, 340, 4); //下まつげ
  circle(160, 342, 4);
  circle(170, 343, 4);
  circle(195, 343, 4);
  circle(408, 338, 4);
  circle(358, 340, 4);
  circle(378, 340, 4);
  circle(398, 339, 4);

  noFill();
  stroke(139, 56, 49);
  bezier(247, 330, 255, 314, 265, 330, 265, 330); //鼻

  noStroke();
  fill(200, 63, 50);
  bezier(237, 377, 235, 420, 343, 415, 325, 377); //口
  bezier(237, 377, 247, 360, 278, 377, 278, 377);
  bezier(265, 377, 265, 377, 313, 349, 325, 377);

  fill(128, 24, 27);
  bezier(125, 220, 150, 180, 217, 195, 217, 195);
  beginShape(); //髪
  vertex(70, 0);
  vertex(75, 600);
  vertex(110, 600);
  vertex(125, 330); //目の真横
  vertex(114, 267);
  vertex(132, 237);
  vertex(164, 90); //おでこ
  vertex(170, 212);
  vertex(183, 226);
  vertex(382, 220);
  vertex(470, 266);
  vertex(430, 600);
  vertex(600, 600);
  vertex(600, 0);
  endShape(CLOSE);
  bezier(70, 0, 0, 100, 30, 500, 80, 600);

  fill(253, 177, 83, 120);
  circle(460, 80, 80);
  circle(410, 95, 50);
  circle(350, 103, 20);

  fill(255, 215, 201);
  circle(25, 545, 80); //左手
  circle(40, 600, 80);
  circle(90, 545, 80);
  circle(122, 590, 93);
  bezier(85, 480, 26, 390, 250, 497, 230, 650);
  bezier(148, 420, 0, 440, 190, 528, 190, 528);
  bezier(75, 453, 93, 360, 152, 367, 148, 440);
  stroke(139, 56, 49);
  bezier(0, 513, 0, 513, 145, 430, 132, 535);
  bezier(60, 550, 205, 497, 177, 590, 177, 590);
  bezier(97, 600, 175, 570, 192, 600, 192, 600);

  fill(255, 215, 201);
  bezier(540, 240, 615, 180, 630, 365, 530, 330); //耳
  rect(500, 450, 100, 150); //右手
  stroke(139, 56, 49);
  bezier(502, 444, 435, 380, 552, 200, 580, 430);
  bezier(485, 540, 415, 430, 630, 380, 630, 440);
  bezier(490, 590, 415, 510, 570, 480, 570, 480);
  bezier(490, 640, 414, 560, 560, 550, 560, 550);
}
function mousePressed() {
  //マウスのボタンが押し下げられた時の処理
}

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

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

ファイル一覧

  • index.html
  • p5.min.js
  • p5.sound.min.js
  • sketch.js
  • style.css

ファイルを再アップロード


サムネイル画像を変更