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
strok.........完整代码请登录后点击上方下载按钮下载查看
网友评论0