processing实现卡通舞台一家三口跳舞动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：processing实现卡通舞台一家三口跳舞动画效果代码，还可对爸爸、妈妈、孩子的舞蹈单独设置速度。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
* {
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

body {
  background: #15686B;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body canvas {
  box-shadow: 0.2em 0.2em 2em #0008;
  border: none;
  outline: none;
}
</style>



</head>

<body>
  <canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.min.js"></script>
  
      <script >
var sketchProc = function(processingInstance) {
  with (processingInstance) {
    size(600, 600); 
    frameRate(60);    
    smooth();
    
var clicked = false, hover = false;
mouseClicked = function () {
    clicked = true;
};

smooth();

var scene;

var Button = function(args) {
    this.x = args.x;
    this.y = args.y;
    this.w = args.w || 80;
    this.h = args.h || 30;
    this.content = args.content;
    this.func = args.func;

    this.over = function() {
        return (mouseX > this.x && 
                mouseX < this.x + this.w && 
                mouseY > this.y && 
                mouseY < this.y + this.h);
    };
    this.draw = function() {
        noStroke();

        if(this.over()) {
            fill(69, 66, 69, 200);
            hover = true;
        }
        else {
            fill(37, 38, 38, 200);
        }

        rect(this.x, this.y, this.w, this.h);

        pushStyle();
            textAlign(CENTER, CENTER);
            textSize(14);
            fill(255);
            text(this.content, this.x + this.w / 2, this.y + this.h / 2);
        popStyle();

        if(clicked && this.over()) {
            this.func();
        }
    };
};

var Curtain = function(args) {
    this.x = 0;
    this.speed = args.speed || 10;
    this.show = args.show || false;
    this.weight = args.weight || 2;
    this.colors = args.colors || {
        // curtain: color(112, 20, 49),
        // border: color(41, 11, 23)
        curtain: color(26, 117, 122),
        border: color(9, 70, 71)
    };

    this.draw = function() {
        fill(this.colors.curtain);
        stroke(this.colors.border);
        strokeWeight(this.weight);
        noStroke();
        beginShape();
            vertex(300 + this.x * 0.25, -this.weight);
            bezierVertex(
                300 + this.x * 0.33, 300 + this.x * 0.33, 
                300 + this.x * 0.66, 600 + this.x * 0.66, 
                300 + this.x, 900 + this.x);
            vertex(-this.weight, 900);
            vertex(-this.weight, -this.weight);
        endShape(CLOSE);
        
        beginShape();
            vertex(300 - this.x * 0.25, -this.weight);
            bezierVertex(
                300 - this.x * 0.33, 300 + this.x * 0.33, 
                300 - this.x * 0.66, 600 + this.x * 0.66, 
                300 - this.x, 900 + this.x);
            vertex(600 + this.weight, 900);
            vertex(600 + this.weight, -this.weight);
        endShape(CLOSE);
        
        noStroke();
        for(var i = 0; i < 300; i+=50) {
            fill(this.colors.border, 40);
            beginShape();
                vertex(300 - i + this.x * 0.25, -this.weight);
                bezierVertex(
                    300 - i + this.x * 0.33, 300 + this.x * 0.33, 
                    300 - i + this.x * 0.66, 600 + this.x * 0.66, 
                    300 - i + this.x, 900 + this.x);
                vertex(-this.weight, 900);
                vertex(-this.weight, -this.weight);
            endShape(CLOSE);
            
            beginShape();
                vertex(300 + i - this.x * 0.25, -this.weight);
                bezierVertex(
                    300 + i - this.x * 0.33, 300 + this.x * 0.33, 
                    300 + i - this.x * 0.66, 600 + this.x * 0.66, 
                    300 + i - this.x, 900 + this.x);
                vertex(600 + this.weight, 900);
                vertex(600 + this.weight, -this.weight);
            endShape(CLOSE);
        }
    };
    this.update = function() {
        if(this.show) {
            this.x = constrain(this.x - this.speed, -600 - this.weight, this.weight);
        }
        else {
            this.x = constrain(this.x + this.speed, -600 - this.weight, this.weight);
        }
    };
    this.go = function() {
        this.draw();
        this.update();
    };
};

var Man = function(args) {
    this.x = args.x || 0;
    this.y = args.y || 0;
    this.colors = args.colors || {
        hair: color(20),
        skin: color(250, 200, 200),
        shading: color(150, 30),
        // shirt: color(255, 221, 0),
        shirt: color(255, 0, 230),
        pants: color(50),
        eyes: color(223, 145, 171),
        mouth: color(223, 145, 171)
    };
    this.timer = 0;
    this.sin = sin;
    this.cos = cos;
    this.speed = args.speed || 0;
    this.move = {
        s: 0,
        c: 0,
        bs: 0,
        ls: 0
    };
    this.arms = {
        left: {
            sleeve: {
                a: {
                    x: 0,
                    y: 0
                },
                b: {
                    x: 0,
                    y: 0
                },
                c: {
                    x: 0,
                    y: 0
                }
            },
            active: {
                x1: 100,
                y1: 342,
                x2: 125,
                y2: 342,
                x3: 150,
                y3: 342,
                x4: 175,
                y4: 342
            },
            rest: {
                x1: 100,
                y1: 342,
                x2: 126,
                y2: 337,
                x3: 142,
                y3: 368,
                x4: 144,
                y4: 393
            },
            value: {
                x1: 100,
                y1: 342,
                x2: 125,
                y2: 342,
                x3: 150,
                y3: 342,
                x4: 175,
                y4: 342
            }
        },
        right: {
            sleeve: {
                a: {
                    x: 0,
                    y: 0
                },
                b: {
                    x: 0,
                    y: 0
                },
                c: {
                    x: 0,
                    y: 0
                }
            },
            active: {
                x1: 100,
                y1: 342,
                x2: 75,
                y2: 342,
                x3: 50,
                y3: 342,
                x4: 25,
                y4: 342
            },
            rest: {
                x1: 100,
                y1: 342,
                x2: 74,
                y2: 337,
                x3: 58,
                y3: 368,
                x4: 56,
                y4: 393
            },
            value: {
                x1: 100,
 .........完整代码请登录后点击上方下载按钮下载查看