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

代码语言：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;
              };
              _Ant.prototype = {
                update: function () {
                  this.timer++;
        
                  //body/feelers
                  this.anim.body = -abs(sin(radians(this.timer * this.speed)) * 5);
                  this.anim.abdomen = -abs(sin(radians(this.timer * this.speed)) * 8);
                  this.anim.feelers.left = cos(radians(this.timer * this.speed * 2)) * 5;
                  this.anim.feelers.right = sin(radians(this.timer * this.speed * 2)) * 5;
        
                  //legs
        
                  //front left
                  this.legs.fl.angles[0] = 15 + sin(radians((this.timer + 90) * this.speed)) * 15;
                  this.legs.fl.angles[1] = 90 + sin(radians((this.timer + 90) * this.speed)) * -20;
                  this.legs.fl.angles[2] = -80 + sin(radians((this.timer + 180) * this.speed)) * 15;
        
                  //front right
                  this.legs.fr.angles[0] = 15 + sin(radians((this.timer - 90) * this.speed)) * 15;
                  this.legs.fr.angles[1] = 90 + sin(radians((this.timer - 90) * this.speed)) * -20;
                  this.legs.fr.angles[2] = -80 + sin(radians(this.timer * this.speed)) * 15;
        
                  //middle left
                  this.legs.ml.angles[0] = 60 + sin(radians(this.timer * this.speed)) * 15;
                  this.legs.ml.angles[1] = -70 + cos(radians(this.timer * this.speed)) * -15;
        
                  //middle right
                  this.legs.mr.angles[0] = 60 + sin(radians((this.timer + 180) * this.speed)) * 15;
                  this.legs.mr.angles[1] = -70 + cos(radians((this.timer + 180) * this.speed)) * -20;
        
                  //back left
                  this.legs.bl.angles[0] = -20 + cos(radians((this.timer - 90) * this.speed)) * -15;
                  this.legs.bl.angles[1] = -85 + cos(radians((this.timer - 90) * this.speed)) * 40;
                  this.legs.bl.angles[2] = 0 - this.legs.bl.angles[1] + sin(radians((this.timer - 90) * this.speed)) * -15;
        
                  //back right
                  this.legs.br.angles[0] = -20 + cos(radians((this.timer + 90) * this.speed)) * -15;
                  this.legs.br.angles[1] = -85 + cos(radians((this.timer + 90) * this.speed)) * 40;
                  this.legs.br.angles[2] = 0 - this.legs.br.angles[1] + sin(radians((this.timer + 90) * this.speed)) * -15;
                },
                draw: function () {
                  pushMatrix();
                  translate(this.x, this.y + this.anim.body);
        
                  //head
                  noFill();
        
                  //nose/mouth
                  stroke(240, 200, 130);
                  strokeWeight(this.size * 0.035);
                  line(0, 0, -this.size * 0.11, this.size * 0.01);
        
                  //feelers
                  noFill();
                  stroke(240, 200, 130);
                  strokeWeight(this.size * 0.015);
                  bezier(-this.size * 0.01, 0,
                  -this.size * -0.01, -this.size * 0.12,
                  -this.size * -0.02, -this.size * 0.19,
                  -this.size * -0.01 + this.anim.feelers.left, -this.size * 0.29);
                  bezier(-this.size * -0.06, 0,
                  -this.size * -0.08, -this.size * 0.12,
                  -this.size * -0.08, -this.size * 0.19,
                  -this.size * -0.08 + this.anim.feelers.right, -this.size * 0.29);
                  noStroke();
                  fill(240, 200, 130);
                  ellipse(-this.size * -0.01 + this.anim.feelers.left, -this.size * 0.29, this.size * 0.05, this.size * 0.05);
                  ellipse(-this.size * -0.08 + this.anim.feelers.right, -this.size * 0.29, this.size * 0.05, this.size * 0.05);
        
                  //middle right leg
                  pushMatrix();
                  translate(this.size * 0.34, this.size * 0.12);
                  rotate(radians(this.legs.mr.angles[0]));
                  stroke(180, 145, 75);
                  strokeWeight(this.size * 0.045);
                  line(0, 0, 0, this.size * 0.15);
        
                  translate(0, this.size * 0.15);
                  rotate(radians(this.legs.mr.angles[1]));
                  stroke(175, 110, 50);
                  line(0, 0, 0, this.size * 0.38);
                  popMatrix();
        
                  //front right leg
                  pushMatrix();
                  translate(this.........完整代码请登录后点击上方下载按钮下载查看