processing实现canvas可爱卡通寿司跳舞被筷子夹起动画效果代码-html代码-BFW代码库

processing实现canvas可爱卡通寿司跳舞被筷子夹起动画效果代码

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