html5动漫人物小部件制作,使用p5.js制作极简人物动画

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

arc(178,223,30,15,HALF_PI*(-0.1),HALF_PI*(1.7));

}else if(fd

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);

}