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: #DC284B;
          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 Logo = (function() {
    Logo = function(args) {
        this.scale = args.scale || 1.0;
        this.x = args.x || 600 * 0.5 * this.scale;
        this.y = args.y || 600 * 0.4 * this.scale;
        this.colors = {
            back: color(220, 40, 75),
            outline: color(5, 5, 5),
            from: color(102, 99, 98),
            to: color(13, 13, 13),
            text: color(35, 40, 60)
        };
        this.font = args.font || createFont("Trebuchet MS");
        this.gray = {
            words: "G R A Y  W O L F",
            index: 0,
            timer: 0,
            delay: 2
        };
        this.prod = {
            opacity: 0,
            y: height * 1.2,
        };
        this.img = undefined;
        this.imgs = [];
        this.splits = {
            left: undefined,
            right: undefined
        };
        this.timer = 0;
        this.states = {
            a: {
                delay: 30,
                duration: 120,
            },
            b: {
                delay: 30
            },
            c: {
                delay: 55
            },
            d: {
                delay: 45,
                x: 0
            }
        };
        this.state = "a";
        this.done = false;
        this.complete = false;
        this.hover = false;
        this.init();
    };
    Logo.prototype = {
        init: function() {
            var gx = createGraphics(600, 600, P2D);
            
            gx.background(0, 0);
            gx.fill(255);
            //inner
            gx.beginShape();
                gx.vertex(300, 137);
                gx.vertex(377, 150);
                gx.vertex(454, 118);
                gx.vertex(410, 213);
                gx.vertex(429, 202);
                gx.vertex(464, 279);
                gx.vertex(396, 361);
                gx.vertex(381, 316);
                gx.vertex(341, 399);
                gx.vertex(300, 443);
                gx.vertex(259, 399);
                gx.vertex(219, 316);
                gx.vertex(204, 361);
                gx.vertex(136, 279);
                gx.vertex(171, 202);
                gx.vertex(190, 213);
                gx.vertex(146, 118);
                gx.vertex(223, 150);
            gx.endShape(CLOSE);
            
            var shape = gx.get(115, 90, 370, 355);
            
            gx.noStroke();
            for(var i = 90; i <= 445; i++) { 
                gx.fill(gx.lerpColor(this.colors.to, this.colors.from, i/445));
                gx.rect(115, i, 370, 1);
            }
            
            gx.stroke(150, 20);
            gx.strokeWeight(1);
            for(var i = 0; i < 200; i++) {
                gx.line(random(115, 485), random(90, 445), random(115, 485), random(90, 445));
            }
            
            gx.filter(BLUR, 2.5);
            
            var grad = gx.get(115, 90, 370, 355);
            
            grad.mask(shape);
            
            gx.background(this.colors.back);
            
            gx.background(0, 0);

            gx.noStroke();
            gx.fill(this.colors.outline);
            
            //outer
            gx.beginShape();
                gx.vertex(300, 126);
                gx.vertex(376, 138);
                gx.vertex(480, 92);
                gx.vertex(437, 187);
                gx.vertex(482, 283);
                gx.vertex(396, 364);
                gx.vertex(383, 344);
                gx.vertex(354, 404);
                gx.vertex(300, 444);
                gx.vertex(246, 404);
                gx.vertex(217, 344);
                gx.vertex(204, 364);
                gx.vertex(118, 283);
                gx.vertex(163, 187);
                gx.vertex(120, 92);
                gx.vertex(224, 138);
            gx.endShape(CLOSE);

            gx.image(grad, 115, 90);

            fill(this.colors.outline);
            //nose
            gx.beginShape();
                gx.vertex(300, 372);
                gx.vertex(323, 367);
                gx.vertex(320, 382);
                gx.vertex(300, 400);
                gx.vertex(280, 382);
                gx.vertex(277, 367);
            gx.endShape(CLOSE);
            
            //left eye
            gx.beginShape();
                gx.vertex(324, 341);
                gx.vertex(320, 268);
                gx.vertex(428, 231);
                gx.vertex(378, 290);
                gx.vertex(358, 278);
                gx.vertex(372, 280);
                gx.vertex(390, 257);
                gx.vertex(334, 277);
            gx.endShape(CLOSE);
            
            //right eye
            gx.beginShape();
                gx.vertex(276, 341);
                gx.vertex(280, 268);
                gx.vertex(172, 231);
                gx.vertex(222, 290);
                gx.vertex(244, 278);
                gx.vertex(228, 280);
                gx.vertex(210, 257);
                gx.vertex(266, 277);
            gx.endShape(CLOSE);

            this.img = gx.get(115, 90, 370, 355);

            //generate pieces of image
            for(var i = 0; i < 10; i++) {
                for(var j = 0; j < 10; j++) {
                    this.imgs.push({
                        img: gx.get(115 + 37 * i, 90 + 35.5 * j, 37, 35.5),
                        w: 37,
                        h: 35.5,
                        dx: 115 + 37 * i + 18.5,
                        dy: 90 + 35.5 * j + 17.75,
                        x: random(-width, width * 2),
                        y: random(-height, height * 2),
                        angle: ~~random(3600)
                    });
                }
            }
        },
        draw: function() {
            if(!this.complete) {
                pushMatrix();
                    scale(this.scale);
                    pushStyle();
                        switch(this.state) {
                            case "a":
                                background(this.colors.back);
                                
                                if(this.timer++ >= this.states.a.delay) {
                                    for(var i = 0; i < this.imgs.length; i++) {
                                        var item = this.imgs[i];
                                        
                                        item.x = lerp(item.x, item.dx, 0.1);
                                        item.y = lerp(item.y, item.dy, 0.1);
                                        item.angle = lerp(item.angle, 0, 0.1);
                                        
                                        imageMode(CENTER);
                                        
                                        pushMatrix();
                                            translate(item.x, item.y - 28);
                                            rotate(radians(item.angle));
                                            image(item.img, 0, 0, item.w, item.h);
                                        popMatrix();
                                    }

                                    if(this.timer >= this.states.a.duration) {
                                        this.state = "b";
                                        this.timer = 0;
                                    }
                                }
                                break;
                            case "b":
                                background(this.colors.back);
                                
                                imageMode(CENTER);
                                image(this.img, this.x / this.scale, this.y / this.scale);
                                
                                if(this.timer++ >= this.states.b.delay) {
                                    textFont(this.font);
                                    textAlign(CENTER, CENTER);
                                    textSize(40);
                                    fill(this.colors.text);
                                    
                                    if(this.gray.index < this.gray.words.length && this.gray.timer++ >= this.gray.delay) {
                                        this.gray.index++;
                                        this.gray.timer = 0;
                                    }
                                    
                                    text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y * 2 / this.scale);

                                    this.prod.opacity = constrain(this.prod.opacity + 7, 0, 255);
                                    this.prod.y = ~~lerp(this.prod.y, this.y * 2.1, 0.030);
                                    textSize(30);
                                    fill(this.colors.text, this.prod.opacity);
                                    text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale);
                                }
                                
                                if(this.gray.index === this.gray.words.length) {
                                    this.state = "c";
                                    this.timer = 0;
                                }
                                    
                                break;
                            case "c":
                                background(this.colors.back);
                                
                                imageMode(CENTER);
                                image(this.img, this.x / this.scale, this.y / this.scale);
                                
                                textFont(this.font);
                                textAlign(CENTER, CENTER);
                                textSize(40);
                                fill(this.colors.text);
                                text(this.gray.words.substring(0, this.gray.in.........完整代码请登录后点击上方下载按钮下载查看