動く似顔絵?泣

by かなめ

2025-05-26 18:37:14

sketch.js

let l = 30; //左目
let r = 50; //右目
let blink = 0;
let blinkSpeed = 1;

function setup() {
  createCanvas(600, 600);
  background(50, 206, 180);
  frameRate(30);
}

function draw() {
  background(50, 206, 180, 20); // 残像、、?

  // 顔
  noStroke();
  rect(50, 50, 500, 500); //丸を書く
  fill(50, 206, 80);

  // 目
  fill(255, 0, 200); // 赤っぽピンク
  ellipse(200, 300, 150, l + blink); // 左目
  ellipse(360, 270, 60, r - blink); // 右目

  // まぶた
  noFill();
  stroke(0);
  strokeWeight(1);
  arc(200, 300, 150, l + blink, PI, 0); // 左上まぶた
  arc(360, 270, 60, r - blink, PI, 0); // 右上まぶた

  // 鼻だと信じたい
  stroke(0, 0, 0);
  strokeWeight(1);
  noFill();
  arc(300, 350, 80, 40, 0, PI); // 円弧

  //口なのか?
  bezier(100, 500, 300, 400, 600, 400, 500, 500); //曲線

  // 目の開閉?
  blink = blink + blinkSpeed;

  if (blink > 20 || blink < -10) {
    blinkSpeed = -blinkSpeed;
  }

  if (frameCount % 60 == 0) {
    l = l + int(random(-5, 10));
    r = r + int(random(-10, 5));
  }
}

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

ファイル一覧

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

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


サムネイル画像を変更