sketch.js

let speedX = 1;
let x = 200;
function setup() {
  createCanvas(600, 600); //ウィンドウサイズの指定
  background(255, 215, 201); //背景色を指定して1回だけ塗る。
}

function draw() {
  fill(220, 67, 50); //背景色を指定して1回だけ塗る。
  rect(0, 0, 90, 600);

  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, 215, 201);
  rect(155, x + 10, 70, 70);
  rect(370, x + 10, 70, 70);

  fill(255, 195, 166);
  stroke(255, 195, 166);
  bezier(125, x + 110, 160, x - 20, 220, x + 72, 220, x + 72); //まぶた左
  bezier(305, x + 70, 340, x - 30, 465, x + 70, 453, x + 85); //まぶた右

  noStroke();
  fill(139, 56, 49);
  bezier(300, x + 85, 285, x + 30, 480, x + 70, 455, x + 90); //アイライン右
  bezier(125, x + 118, 110, x + 90, 240, x + 40, 225, x + 90); //アイライン左
  circle(125, x + 100, 16); //左まつげ
  circle(140, x + 88, 16);
  circle(160, x + 80, 16);
  circle(312, x + 60, 16); //右まつげ
  circle(333, x + 55, 16);
  circle(358, x + 55, 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, x + 345, 80); //左手
  circle(40, x + 400, 80);
  circle(90, x + 345, 80);
  circle(122, x + 390, 93);
  circle(130, x + 400, 155);
  bezier(85, x + 280, 26, x + 190, 250, x + 297, 230, x + 450);
  bezier(148, x + 220, 0, x + 240, 190, x + 328, 190, x + 328);
  bezier(75, x + 253, 93, x + 160, 152, x + 167, 148, x + 240);
  stroke(139, 56, 49);
  bezier(0, x + 313, 0, x + 313, 145, x + 230, 132, x + 335);
  bezier(60, x + 350, 205, x + 297, 177, x + 390, 177, x + 390);
  bezier(97, x + 400, 175, x + 370, 192, x + 400, 192, x + 400);
  fill(255, 215, 201);
  bezier(540, 240, 615, 180, 630, 365, 530, 330); //耳
  noStroke();
  rect(x + 310, x + 240, 150, 150); //右手
  rect(x + 300, x + 340, 150, 150);
  stroke(139, 56, 49);
  bezier(x + 352, x + 234, x + 275, x + 160, x + 392, x - 40, x + 420, x + 230);
  bezier(
    x + 285,
    x + 340,
    x + 215,
    x + 230,
    x + 430,
    x + 180,
    x + 430,
    x + 240,
  );
  bezier(
    x + 290,
    x + 390,
    x + 215,
    x + 310,
    x + 370,
    x + 280,
    x + 370,
    x + 275,
  );
  bezier(
    x + 300,
    x + 440,
    x + 214,
    x + 360,
    x + 380,
    x + 343,
    x + 380,
    x + 338,
  );

  x = x + speedX;
  if (x > 240) {
    speedX = -1;
  }
  if (x < 195) {
    speedX = 2;
  }
}
function mousePressed() {
  //マウスのボタンが押し下げられた時の処理
}

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

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