processing.js实现canvas大小蚂蚁走路动画效果代码-html代码-BFW代码库

processing.js实现canvas大小蚂蚁走路动画效果代码

代码语言：html

所属分类：动画

代码描述：processing.js实现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 id="rendered-js">
        var sketchProc = function (processingInstance) {
          with (processingInstance) {
            size(600, 600);
            frameRate(60);
            smooth();
        
            const Ant = function () {
              const _Ant = function (args) {
                this.x = args.x;
                this.y = args.y;
                this.size = args.size;
                this.speed = 1 + args.speed * 4 || 1;
                this.anim = {
                  body: 0,
                  abdomen: 0,
                  feelers: {
                    left: 0,
                    right: 0 },
        
                  blink: {
                    active: false,
                    timer: 0 } };
        
        
                this.legs = {
                  fl: { //front right
                    angles: [0, 0, 0] },
        
                  fr: { //front left
                    angles: [0, 0, 0] },
        
                  ml: { //middle left
                    angles: [0, 0] },
        
                  mr: { //middle right
                    angles: [0, 0] },
        
                  bl: { //back left
                    angles: [0, 0, 0] },
        
                  br: { //back right
                    angles: [0, 0, 0] } };
        
        
                this.timer = 0;
              };
    .........完整代码请登录后点击上方下载按钮下载查看