processing实现圣诞老人下雪天送礼物舌头被黏在电话柱上动画效果代码
代码语言：html
所属分类：动画
代码描述：processing实现圣诞老人下雪天送礼物舌头被黏在电话柱上动画效果代码
代码标签： processing 圣诞 老人 下雪 天 送 礼物 舌头 被黏 电话 柱上 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
body {
background: #cdebf0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body canvas {
box-shadow: 0.2em 0.2em 2em #0004;
border: none;
outline: none;
}
</style>
</head>
<body translate="no">
<canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.1.4.8.js"></script>
<script >
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(600, 600);
frameRate(60);
smooth();
/* jshint esnext: true */
//santa object
const Santa = (function() {
const _Santa = function(args) {
this.x = 400;
this.y = 430;
this.diameter = 180;
this.tounge = {
x1: 0,
y1: 0,
x2: 0,
y2: 0,
x3: 0,
y3: 0,
x4: 0,
y4: 0
};
this.arms = {
left: {
x1: 0,
y1: 0,
x2: 0,
y2: 0,
x3: 0,
y3: 0,
x4: 0,
y4: 0
},
right: {
x1: 0,
y1: 0,
x2: 0,
y2: 0,
x3: 0,
y3: 0,
x4: 0,
y4: 0
}
};
this.eyes = 0;
this.offset = 0;
this.timer = 0;
this.state = "base";
this.setup();
};
_Santa.prototype = {
setup: function() {
//left arm
this.arms.left.x1 = this.x + this.diameter * 0.18;
this.arms.left.y1 = this.y - this.diameter * 0.25;
this.arms.left.x2 = this.x + this.diameter * 0.18;
this.arms.left.y2 = this.y + this.diameter * 0.0;
this.arms.left.x3 = this.x + this.diameter * 0.18;
this.arms.left.y3 = this.y + this.diameter * 0.3;
this.arms.left.x4 = this.x + this.diameter * 0.18;
this.arms.left.y4 = this.y + this.diameter * 0.55;
//right arm
this.arms.right.x1 = this.x - this.diameter * 0.37;
this.arms.right.y1 = this.y - this.diameter * 0.25;
this.arms.right.x2 = this.x - this.diameter * 0.37;
this.arms.right.y2 = this.y + this.diameter * 0.0;
this.arms.right.x3 = this.x - this.diameter * 0.37;
this.arms.right.y3 = this.y + this.diameter * 0.3;
this.arms.right.x4 = this.x - this.diameter * 0.37;
this.arms.right.y4 = this.y + this.diameter * 0.55;
},
update: function() {
switch(this.state) {
case "pull":
this.timer++;
this.offset = constrain(this.offset + 0.5, 0, 80);
this.eyes = constrain(this.eyes + 0.1, 0, 20);
if(this.offset === 80) {
this.state = "base";
this.timer = 0;
}
break;
case "base":
this.timer++;
this.offset = lerp(this.offset, 0, 0.1);
this.eyes = lerp(this.eyes, 0, 0.1);
if(this.timer === 180) {
this.state = "pull";
this.timer = 0;
}
break;
}
},
draw: function() {
pushMatrix();
translate(this.offset, 0);
//right arm
stroke(195, 70, 90);
strokeWeight(40);
bezier( this.arms.right.x1, this.arms.right.y1,
this.arms.right.x2 + this.offset, this.arms.right.y2,
this.arms.right.x3 + this.offset, this.arms.right.y3,
this.arms.right.x4, this.arms.right.y4 - this.offset * 0.3);
//right hand
noStroke();
fill(50);
ellipse(this.arms.right.x4, this.arms.right.y4 - this.offset * 0.3, 40, 40);
fill(255);
pushMatrix();
translate( bezierPoint(this.arms.right.x1, this.arms.right.x2 + this.offset, this.arms.right.x3 + this.offset, this.arms.right.x4, 0.90),
bezierPoint(this.arms.right.y1, this.arms.right.y2, this.arms.right.y3, this.arms.right.y4 - this.offset * 0.3, 0.90));
let dx = bezierTangent(this.arms.right.x1, this.arms.right.x2 + this.offset, this.arms.right.x3 + this.offset, this.arms.right.x4, 0.90);
let dy = bezierTangent(this.arms.right.y1, this.arms.right.y2, this.arms.right.y3, this.arms.right.y4 - this.offset * 0.3, 0.90);
rotate(radians(90) + atan2(dy, dx));
rectMode(CENTER);
rect(0, 0, 42, 20);
rectMode(CORNER);
popMatrix();
//legs
pushMatrix();
translate(-this.offset, 0);
noFill();
stroke(195, 70, 90);
strokeWeight(20);
bezier( this.x - this.diameter * 0.15 + this.offset, this.y + this.diameter * 0.35,
this.x - this.diameter * 0.15, this.y + this.diameter * 0.6,
this.x - this.diameter * 0.15, this.y + this.diameter * 0.8,
this.x - this.diameter * 0.15, this.y + this.diameter * 1);
bezier( this.x + this.diameter * 0.15 + this.offset, this.y + this.diameter * 0.35,
this.x + this.diameter * 0.15 + this.offset * 0.2, this.y + this.diameter * 0.6,
this.x + this.diameter * 0.15 + this.offset * 0.2, this.y + this.diameter * 0.8,
this.x + this.diameter * 0.15 + this.offset * 0.4, this.y + this.diameter * 1);
popMatrix();
//body
noStroke();
fill(215, 70, 85);
ellipse(this.x, this.y, this.diameter, this.diameter);
//left arm
stroke(195, 70, 90);
strokeWeight(40);
bezier( this.arms.left.x1, this.arms.left.y1,
this.arms.left.x2 + this.offset, this.arms.left.y2,
this.arms.left.x3 + this.offset, this.arms.left.y3,
this.arms.left.x4, this.arms.left.y4 - this.offset * 0.3);
//left hand
noStroke();
fill(50);
ellipse(this.arms.left.x4, this.arms.left.y4 - this.offset * 0.3, 40, 40);
fill(255);
pushMatrix();
translate( bezierPoint(this.arms.left.x1, this.arms.left.x2 + this.offset, this.arms.left.x3 + this.offset, this.arms.left.x4, 0.90),
bezierPoint(this.arms.left.y1, this.arms.left.y2, this.arms.left.y3, this.arms.left.y4 - this.offset * 0.3, 0.90));
dx = bezierTangent(this.arms.left.x1, this.arms.left.x2 + this.offset, this.arms.left.x3 + this.offset, this.arms.left.x4, 0.90);
dy = bezierTangent(this.arms.left.y1, this.arms.left.y2, this.arms.left.y3, this.arms.left.y4 - this.offset * 0.3, 0.90);
rotate(radians(90) + atan2(dy, dx));
rectMode(CENTER);
rect(0, 0, 42, 20);
rectMode(CORNER);
popMatrix();
//head
pushMatrix();
translate(this.x - this.diameter * 0.2, this.y - this.diameter * 0.35);
rotate(radians(this.offset * 0.2));
//face and hat
noStroke();
fill(240, 195, 195);
rect(-this.diameter * 0.29, -this.diameter * 0.2, this.diameter * 0.49, this.diameter * 0.5);
//ear
ellipse(this.diameter * 0.19, -this.diameter * 0.08, this.diameter * 0.10, this.diameter * 0.10);
//eyebrows
stroke(255);
strokeWeight(3);
line(-this.diameter * 0.23, -this.diameter * 0.11, -this.diameter * 0.18, -this.diameter * 0.11 + this.eyes * 0.2);
line(-this.diameter * 0.05, -this.diameter * 0.11 + this.eyes * 0.2, -this.diameter * -0.00, -this.diameter * 0.11);
//eyes
noStroke();
fill(40);
ellipse(-this.diameter * 0.20, -this.diameter * 0.05, this.diameter * 0.04, this.diameter * 0.04 - constrain(this.eyes, 0, this.diameter * 0.030));
ellipse(-this.diameter * 0.03, -this.diameter * 0.05, this.diameter * 0.04, this.diameter * 0.04 - constrain(this.eyes, 0, this.diameter * 0.030));
//hat
noStroke();
fill(255);
ellipse(this.diameter * 0.19, -this.diameter * 0.45, this.diameter * 0.18, this.diameter * 0.18);
fill(215, 70, 85);
arc(-this.diameter * 0.08, -this.diameter * 0.25, this.diameter * 0.4, this.diameter * 0.4, radians(180), radians(360));
rect(-this.diameter * 0.08, -this.diameter * 0.45, this.diameter * 0.28, this.diameter * 0.22, 0, 10, 0, 0);
stroke(255);
strokeWeight(20);
line(-this.diameter * 0.28, -this.diameter * 0.22, this.diame.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0