使用p5.js制作极简人物动画

Posted 2020-12-01 zerlenzhang

没有特别的技巧，只是不断尝试坐标，使用绘制直线和绘制弧线的函数尝试

然后，人物说话的动画是用随机数和其他几个嘴型制作的三帧动画

var Vector2=function(xValue,yValue){
  this.x=xValue;
  this.y=yValue;
}

var Vector3=function(xValue,yValue,zValue){
  this.x=xValue;
  this.y=yValue;
  this.z=zValue;
}
function Line(start,size){
line(start.x,start.y,start.x+size.x,start.y+size.y);
}

function setup() {
  createCanvas(600, 400);
  fd=0;
}

function draw() {
  background(255);
  noFill();
  strokeWeight(2);

  DrawOthers();
  
  DrawFancyFace();


  

  

  if(mouseIsPressed){
    console.log(mouseX,mouseY);
  }
  
}

var fd=0;

function DrawFancyFace(){
  //眼睛
  strokeWeight(3);
  Line(new Vector2(115,199),new Vector2(30,-12.5));
  Line(new Vector2(168,179),new Vector2(33,-14));
  strokeWeight(2);
  fill(0,188,255);
  arc(134,195,23,40,HALF_PI*(-0.4),HALF_PI*(1.9),CLOSE);
  arc(187,175,24,40,HALF_PI*(-0.4),HALF_PI*(1.9),CLOSE);
  noFill();
  //嘴巴
  var time=0.3;
  
  var speed=0.8;
  var value=400*random(speed,1);
  
  if(frameCount%time*60<=1)
    fd=frameCount % value;
  if(fd<value*0.4){
  
  arc(178,223,30,15,HALF_PI*(-0.1),HALF_PI*(1.7));
  }
  else if(fd<value*0.7){  
    arc(175,220,30,20,HALF_PI*(0),HALF_PI*(1.4));
   arc(180,223,25,20,HALF_PI*(-0.2),HALF_PI*(1.6));
  }
  else{
    
      
  arc(178,223,30,30,HALF_PI*(-0.1),HALF_PI*(1.7));
  arc(168,220,48,16,HALF_PI*(0),HALF_PI*(1.2));
    
  }
  



}
function DrawOthers(){

  
  //头发
  arc(60, 133, 172-57, 280, 0, HALF_PI-0.1, OPEN);
  arc(54, 215, 52, 64, 0, HALF_PI, OPEN);
  line(80,215,85,133);
  arc(129,139,90,70,HALF_PI*(2.1),HALF_PI*(2.45))
  arc(74,225,60,60,HALF_PI*(0.9),HALF_PI*(1.45));
  
  
    line(78,254,74,271);
  line(99,113,155,78);
  arc(176,106,70,70,HALF_PI*(-1.4),HALF_PI*(-0.4));
  arc(291,19,220,220,HALF_PI*(1),HALF_PI*(1.575));
  arc(236,77,150,150,HALF_PI*(0.5),HALF_PI*(0.85));
  
  arc(290,52,300,280,HALF_PI*(1.27),HALF_PI*(1.7));
  arc(193,35,300,300,HALF_PI*(0.6),HALF_PI*(0.85));
  line(253,149,280,159);
  
  arc(139,126,40,40,HALF_PI*(-0.1),HALF_PI*(1.7));
  

  
  //脸右侧
  arc(192,192,60,60,HALF_PI*(-0.4),HALF_PI*(0.4));
  arc(125,180,200,150,HALF_PI*(0.2),HALF_PI*(0.4));
  
  //脸左侧
  arc(170,207,120,100,HALF_PI*(1.85),HALF_PI*(2.0));
  arc(120,230,25,25,HALF_PI*(1.5),HALF_PI*(2.5));
  arc(164,137,270,220,HALF_PI*(0.94),HALF_PI*(1.3));
  
  //头发
  arc(309,129,120,120,HALF_PI*(0.8),HALF_PI*(1.55));
  arc(250,144,180,180,HALF_PI*(0.3),HALF_PI*(0.8));
  arc(313,205,90,90,HALF_PI*(0.95),HALF_PI*(1.6));
  arc(281,225,90,90,HALF_PI*(0.4),HALF_PI*(1));
  arc(335,198,180,180,HALF_PI*(0.8),HALF_PI*(1.4));
  arc(259,238,230,230,HALF_PI*(0.25),HALF_PI*(0.9));
  
  //耳朵
  arc(231,195,25,25,HALF_PI*(-1.5),HALF_PI*(1.5));
  //蓝玉盘
  arc(230,228,20,50,HALF_PI*(-0.8),HALF_PI*(2.8));
  //脖子
  arc(213,240,35,35,HALF_PI*(1.19),HALF_PI*(2.4));  arc(176,251,10,10,HALF_PI*(-1),HALF_PI*(0.7));
  //衣领
  line(214,246,164,321);
  line(190,279,173,251);
  line(173,251,150,262);
  line(166,286,150,262);

  //身体外侧
  arc(126,370,300,300,HALF_PI*(-0.6),HALF_PI*(-0.3));
  
  //手掌
  arc(115,235,30,30,HALF_PI*(1.5),HALF_PI*(2.5));
  arc(132,215,80,80,HALF_PI*(1.2),HALF_PI*(1.5));
  
  //胳膊
  line(120,253,110,309);
  arc(127,305,38,35,HALF_PI*(0.2),HALF_PI*(1.8));
  line(146,310,135,254);
  line(141,245,135,254);
  
  
    //大衣
  arc(145,271,20,20,HALF_PI*(-1.65),HALF_PI*(-0.6));
  arc(140,307,28,50,HALF_PI*(-1),HALF_PI*(0));
  arc(196,292,90,90,HALF_PI*(1.2),HALF_PI*(1.8));
  line(235,268,212,302);
  
  line(206,317,173,349);
  arc(180,299,70,85,HALF_PI*(1),HALF_PI*(1.8));
  
  arc(215,348,140,115,HALF_PI*(-0.63),HALF_PI*(0));

  
    //左边头发
  line(85,258,95,270);
  arc(53,257,90,90,HALF_PI*(0.2),HALF_PI*(0.8));
  arc(76,247,110,110,HALF_PI*(0.8),HALF_PI*(1.1));
  arc(35,283,120,120,HALF_PI*(0.2),HALF_PI*(0.9));
  arc(90,253,200,200,HALF_PI*(0.98),HALF_PI*(1.3));
  
  //左手
  arc(220,313,28,28,HALF_PI*(0.7),HALF_PI*(3.3));
  arc(235,304,20,18,HALF_PI*(-2.1),HALF_PI*(-0));
  arc(233,312,28,32,HALF_PI*(-0.3),HALF_PI*(1.2));
  arc(238,299,20,15,HALF_PI*(-1.7),HALF_PI*(0.3));
  
    //右腿
  arc(134,338,50,50,HALF_PI*(1.5),HALF_PI*(2.5));
  arc(127,334,55,57,HALF_PI*(1.5),HALF_PI*(2.5));
  
  //右腿
  arc(223,353,90,90,HALF_PI*(-0.6),HALF_PI*(0));
  arc(226,360,110,120,HALF_PI*(-0.8),HALF_PI*(-0.4));
  arc(306,317,70,90,HALF_PI*(1.35),HALF_PI*(1.8));
  
  line(95,353,284,351);
}

全部代码