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