sketch.js

let x = 440; //「x」という変数を作る
let speedX = 1; //「speedX」という変数を作る
let time = 0; //「time」という変数を作る

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

  stroke(0, 0, 255); //線の色
  fill(225, 230, 200); //塗りの色
  noStroke(); //線をなしに

  fill(100, 120, 120);
  circle(100, 200, 500); //丸を描く 髪の毛
  fill(225, 230, 200);
  circle(330, 200, 550); //丸を描く 肌
  //rect(150, 150, 100, 50); //長方形を描く
  rect(55, 0, 200, 190);

  fill(255, 195, 180);
  ellipse(100, 260, 250, 90); //楕円を描く ほっぺ

  fill(100, 120, 120);
  noStroke();
  triangle(450, 0, 800, 0, 470, 500); //三角形を描く　髪の毛
  triangle(470, 300, 800, 200, 400, 460);
  triangle(560, 300, 800, 400, 520, 480);
  triangle(300, 0, 500, 0, 470, 100);
  triangle(200, 0, 300, 0, 400, 170);

  fill(255, 195, 180);
  ellipse(500, 260, 200, 80); //楕円を描く ほっぺ
  fill(204, 153, 153);
  ellipse(300, 400, 200, 80); //口
  fill(255, 255, 255);
  ellipse(230, 373, 30, 20);
  ellipse(250, 370, 30, 20);
  ellipse(270, 368, 30, 20);
  ellipse(290, 368, 30, 20); //歯
  ellipse(310, 368, 30, 20);
  ellipse(330, 370, 30, 20);
  ellipse(350, 373, 30, 20);
  ellipse(370, 378, 30, 20);

  ellipse(230, 421, 30, 20);
  ellipse(250, 428, 30, 20);
  ellipse(270, 433, 30, 20);
  ellipse(290, 433, 30, 20); //歯
  ellipse(310, 433, 30, 20);
  ellipse(330, 430, 30, 20);
  ellipse(350, 428, 30, 20);
  ellipse(370, 423, 30, 20);

  //triangle(330, 450, 315, 500, 345, 500); //よだれ
  //ellipse(330, 500, 29, 38);

  fill(255, 255, 255);
  //ellipse(160, 200, 80, 30); //楕円を描く　目
  //ellipse(120, 224, 30, 20);
  ellipse(400, 200, 100, 50);
  ellipse(350, 240, 90, 40);
  ellipse(430, 250, 60, 30);
  ellipse(403, 280, 30, 20);
  ellipse(460, 230, 30, 20);

  stroke(255, 255, 255);
  strokeWeight(8);
  //line(200, 380, 230, 400); //直線を描く
  //line(230, 400, 260, 380);
  bezier(400, 200, 300, 200, 300, 200, 300); //ベジュ曲線
  angleMode(DEGREES); //角度の単位を360に変える
  noFill();
  //arc(240, 340, 50, 50, 45, 200); //円弧
}

function draw() {
  //color(HSB); //カラーモードをHSBに変える（アルファの最大値が１になる）
  //background(0, 0, 0, 0.6); //背景色を指定して1回だけ塗る。
  fill(255, 255, 255);
  //triangle(330, x - 50, 315, x, 345, x); //よだれ
  ellipse(330, x, 19, 28);

  x = x + speedX; //xにspeedXを足す
  //time = time + 1;
  //xの値が一定の値を超えたらspeedXの値を変える
  //if (time > 100) {
  //  x = 0;
  //  time = 0;
  //}
  if (x > 700) {
    speedX = -1;
  }
  if (x < 500) {
    speedX = 1;
  }
}

function mousePressed() {
  //マウスのボタンが押し下げられた時の処理
}

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

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