processing实现canvas动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：processing实现canvas动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

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

body {
  background: #222;
  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();
    
textFont(createFont("Trebuchet MS"), 30);

var app;
    
var clicked = false, hover = false;
mousePressed = function () {
    clicked = true;
};
    
var Button = (function() {
    var Button = function(args) {
        this.x = args.x;
        this.y = args.y;
        this.w = args.w || 100;
        this.h = args.h || 50;
        this.content = args.content;
        this.textSize = args.textSize || this.w * 0.18;
        this.enabled = true;
        this.hover = false;
        this.func = args.func;
        this.backColor = args.backColor || color(240);
        this.textColor = args.textColor || color(25);
    };
    Button.prototype = {
        over: function() {
            return (mouseX > this.x && 
                    mouseX < this.x + this.w && 
                    mouseY > this.y && 
                    mouseY < this.y + this.h);
        },
        draw: function() {
            noStroke();
            
            this.hover = this.over();

            if(this.enabled && this.hover) {
                hover = true;
            }

            fill(this.backColor, this.enabled && this.hover ? 50 : 100);
            rect(this.x, this.y, this.w, this.h);
    
            pushStyle();
                textAlign(CENTER, CENTER);
                textSize(this.textSize);
                fill(this.enabled ? this.textColor : color(this.textColor, 100));
                text(this.content, this.x + this.w / 2, this.y + this.h / 2);
            popStyle();
    
            if(this.enabled && clicked && this.hover) {
                this.func();
            }
        }
    };
    return Button;
})();

var Person = (function() {
    Person = function(args) {
        this.x = args.x || 300;
        this.y = args.y || 150;
        this.length = args.length || 160;
        this.diameter = args.diameter || this.length / 2;
        this.thickness = args.thickness || 2;
        this.timer = 0;
        this.speed = args.speed || 5;
        this.angle = -10;
        this.colors = args.colors || {
            skin: color(250, 225, 200),
            stroke: color(60),
            feet: color(40)
        };
        this.canChangeSpeed = true;
        this.limbs = args.limbs || [
            { //left arm
                x: 0,
                y: 0,
                offset: 60,
                color: color(252, 101, 106),
                upper: {
                    angle: 10,
                    dist: 70,
                    length: this.length * 0.4
                },
                lower: {
                    angle: -60,
                    dist: 50,
                    length: this.length * 0.34
                }
            },
            { //right arm
                x: 0,
                y: 0,
                offset: 240,
                color: color(222, 89, 93),
                upper: {
                    angle: 10,
                    dist: 70,
                    length: this.length * 0.4
                },
                lower: {
                    angle: -60,
                    dist: 50,
                    length: this.length * 0.34
                }
            },
            { //left leg
                x: 0,
                y: 0,
                offset: 180,
                color: color(252, 101, 106),
                upper: {
                    angle: -10,
                    dist: 60,
                    length: this.length / 2
                },
                lower: {
                    angle: 60,
                    dist: 50,
                    length: this.length * 0.37
                },
                foot: {
                    angle: -70,
                    dist: 20,
                    length: this.length * 0.125
                }
            },
            { //right leg
                x: 0,
                y: 0,
                offset: 0,
                color: color(222, 89, 93),
                upper: {
                    angle: -10,
                    dist: 60,
                    length: this.length / 2
                },
                lower: {
                    angle: 60,
                    dist: 50,
                    length: this.length * 0.37
                },
                foot: {
                    angle: -70,
                    dist: 20,
                    length: this.length * 0.125
                }
            }
        ];
        this.sine = 0;
        this.init();
    };
    Person.prototype = {
        init: function() {
            this.limbs[0].x = this.x;
            this.limbs[0].y = this.y + this.diameter * 0.6;
            
            this.limbs[1].x = this.x;
            this.limbs[1].y = this.y + this.diameter * 0.6;
            
            this.limbs[2].x = this.x;
            this.limbs[2].y = this.y + this.length;
            
            this.limbs[3].x = this.x;
            this.limbs[3].y = this.y + this.length;
        },
        moveArm: function(limb, point) {
            stroke(this.colors.stroke);
            strokeWeight(this.thickness);
            pushMatrix();
                translate(limb.x - point, limb.y);
                rotate(radians(limb.upper.angle + sin(radians((this.timer * this.speed) + limb.offset)) * limb.upper.dist));
                line(0, 0, 0, limb.upper.length);

                translate(0, limb.upper.length);
                rotate(radians(limb.lower.angle + cos(radians((this.timer * this.speed) + limb.offset)) * limb.lower.dist));
                line(0, 0, 0, limb.lower.length);
                
                stroke(this.colors.stroke);
                strokeWeight(this.thickness / 2);
                fill(this.colors.skin);
                //hands
                ellipse(0, limb.lower.length, this.diameter * 0.2, this.diameter * 0.2);
            popMatrix();
        },
        moveLeg: function(limb) {
            stroke(this.colors.stroke);
            strokeWeight(this.thickness);
            pushMatrix();
                translate(limb.x - this.angle, limb.y);
                rotate(radians(limb.upper.angle + cos(radians((this.timer * this.speed) + limb.offset)) * limb.upper.dist));
                line(0, 0, 0, limb.upper.length);
                
                translate(0, limb.upper.length);
                rotate(radians(limb.lower.angle + sin(radians((this.timer * this.speed) + limb.offset)) * limb.lower.dist));
                line(0, 0, 0, limb.lower.length);
                
                translate(0, limb.lower.length);
                rotate(radians(limb.foot.angle + sin(radians((this.timer * this.speed) + limb.offset)) * limb.foot.dist));
                stroke(this.colors.feet);
                strokeWeight(this.thickness * 2.5);
                line(0, 0, 0, limb.foot.length);
            popMatrix();
        },
        draw: function() {
            this.timer++;

            var point = this.angle / dist(this.x, this.y, this.x, this.limbs[2].y) * this.diameter * 0.6;
            
            this.sine = sin(radians(this.timer * this.speed * 2));
            
            pushMatrix();
                translate(0, this.sine * 10);
                
                strokeWeight(this.thickness);
                stroke(this.colors.stroke);
                line(this.x, this.y, this.x - this.angle, this.limbs[2].y);
                
                this.moveArm(this.limbs[0], point);
                this.moveArm(this.limbs[1], point);
                this.moveLeg(this.limbs[2]);
                this.moveLeg(this.limbs[3]);
                
                //hair
                noFill();
                stroke(this.colors.stroke);
                strokeWeight(this.thickness / 4);
                var cosine = cos(radians(this.timer * this.speed * 2));
                bezier( this.x - this.diameter * 0.3, this.y - this.diameter * 0.35,
                        this.x - this.diameter * 0.4, this.y - this.diameter * 0.40 + cosine * 3,
                        this.x - this.diameter * 0.6, this.y - this.diameter * 0.45 + cosine * 3,
                        this.x - this.diameter * 0.7, this.y - this.diameter * 0.4 + cosine * 3);
                        
                bezier( this.x - this.diameter * 0.3, this.y - this.diameter * 0.33,
                        this.x - this.diameter * 0.4, this.y - this.diameter * 0.30 + cosine * 3,
                        this.x - this.diameter * 0.6, this.y - this.diameter * 0.35 + cosine * 3,
                        this.x - this.diameter * 0.7, this.y - this.diameter * 0.30 + cosine * 3.5);
                
                //head
                stroke(this.colors.stroke);
                strokeWeight(this.thickness / 2);
                fill(this.colors.skin);
                ellipse(this.x, this.y, this.diameter, this.diameter);
                
                //eyes
                noStroke();
                fill(80);
                ellipse(this.x + this.diameter * 0.35, this.y - this.diameter * 0.12, this.diameter * 0.15, this.diameter * 0.2);
                ellipse(this.x + this.diameter * 0.18, this.y - this.diameter * 0.10, this.diameter * 0.15, this.diameter * 0.2);
                
                //lines above/below eyes
                noFill();
                stroke(80, 150);
                //above
                arc(this.x + this.diameter * 0.32, this.y - this.diameter * 0.14, 
                    this.diameter * 0.40, this.diameter * 0.25, radians(260), radians(280));
                arc(this.x + this.diameter * 0.15, this.y - this.diameter * 0.12, 
                    this.diameter * 0.40, this.diameter * 0.25, radians(260), radians(280));
                //below
                arc(this.x + this.diameter * 0.36, this.y - this.diameter * 0.10, 
                    this.diameter * 0.40, this.diameter * 0.25, radians(80), radians(100));
                arc(this.x + this.diameter * 0.19, this.y - this.diameter * 0.08, 
                    this.diameter * 0.40, this.diameter * 0.25, radians(80), radians(100));
                
                //mouth
                stroke(80);
                noFill();
                bezier( this.x + this.diameter * 0.45, this.y + this.diameter * 0.15,
                        this.x + this.diameter * 0.45, this.y + this.diameter * 0.10,
                        this.x, this.y + this.diameter * 0.22,
                        this.x, this.y + this.diameter * 0.30);
            
            popMatrix();
        }
    };
    return Person;
})();

var Cog = (function() {
    Cog = function(args) {
        this.x = args.x || 300;
        this.y = args.y || 300;
        this.diameter = args.diameter || 200;
        this.circumference = PI * this.diameter;
        this.angle = 0;
        this.speed = args.speed || 5;
        this.timer = 0;
        this.cog = this.getCog();
    };
    Cog.prototype = {
        getCog: function() {
            background(0, 0);
            pushMatrix();
                translate(this.x, this.y);
                
                pushMatrix();

                    noStroke();
                    for(var i = 0; i < 360; i+= 30) {
                        rotate(radians(30));
                        
                        fill(189, 189, 189);
                        triangle(  -this.diameter * 0.03, -this.diameter * 0.5,
                                    0, -this.diameter * 0.54,
                                    this.diameter * 0.03, -this.diameter * 0.5);
                        
                        fill(102, 102, 102);
                        beginShape();
                            vertex(-this.diameter * 0.1,  -this.diameter * 0.38);
                            vertex(-this.diameter * 0.1,  -this.diameter * 0.45);
                            vertex(-this.diameter * 0.05, -this.diameter * 0.5);
                            vertex( this.diameter * 0.05, -this.diameter * 0.5);
                            vertex( this.diameter * 0.1,  -this.diameter * 0.45);
                            vertex( this.diameter * 0.1,  -this.diameter * 0.38);
                        endShape();
                    }
                    
                    rotate(radians(10));
                    
                    for(var i = 0; i < 360; i+= 60) {
                        rotate(radians(60));
                        fill(102, 102, 102);
                        beginShape();
                            vertex(this.diameter * 0.10, -this.diameter * 0.4);
                            bezierVertex(this.diameter * 0.04, -this.diameter * 0.35,
                                    this.diameter * 0.01, -this.diameter * 0.1,
                                    this.diameter * 0.12, 0);
                            vertex(-this.diameter * 0.12, 0);
                            bezierVertex(-this.diameter * 0.04, -this.diameter * 0.1,
                                    -this.diameter * 0.01, -this.diameter * 0.35,
                                    -this.diameter * 0.10, -this.diameter * 0.4);
                        endShape();
                        
                        fill(145, 145, 145, 50);
                        ellipse(0, -this.diameter * 0.33, this.diameter * 0.02, this.diameter * 0.02);
                        ellipse(0, -this.diameter * 0.18, this.diameter * 0.02, this.diameter * 0.02);
                    }
                popMatrix();
                
                noFill();
                stroke(79, 78, 79);
                strokeWeight(15);
                ellipse(0, 0, this.diameter * 0.8, this.diameter * 0.8);
                noStroke();
                fill(87, 85, 87);
                ellipse(0, 0, this.diameter * 0.3, this.diameter * 0.3);
    
                strokeWeight(2);
                stroke(153, 153, 153, 30);
                for(var i = 0; i < 360; i+= 45) {
                    rotate(radians(i));
                    line(0, 0,.........完整代码请登录后点击上方下载按钮下载查看