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

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

代码语言：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 = f.........完整代码请登录后点击上方下载按钮下载查看