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: #1B5F87;
  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);

        {
            var scene;

            var Scene = function() {
                this.speed = -0.3;        
                this.fishes = [];
                this.bubbles = [];
                this.algae = [];
                this.auto = true;
                this.sceneBack = this.getSceneBack();
                this.sceneFront = this.getSceneFront();
                this.rays = this.getRays();
                this.plant = null;
                this.maxFish = 4;
            };
        } //Scene

        {
            var Fish = function(config) {
                this.position = config.position || new PVector(random(width), random(height));
                this.velocity = new PVector(0, 0);
                this.acceleration = new PVector(0, 0);

                this.scale = config.scale || 1;
                this.direction = -1; //-1 is smaller, 1 is larger
                this.change = false;
                this.xOffset = 0;

                this.follow = config.follow || false;

                //widths of each segment
                this.segmentSizes = [
                    0, //head
                    2,
                    3,
                    4,
                    5,
                    5.5,
                    6,
                    6.5,
                    7,
                    7.3,
                    7,
                    6.5,
                    6,
                    5.5,
                    5,
                    4.5,
                    4,
                    3.5,
                    3,
                    2.5,
                    2,
                    1.5,
                    1,
                    0, //tail
                    0,
                    0,
                    0,
                    0
                ];

                this.segments = [];
                for(var i = 0; i < this.segmentSizes.length; i++) {
                    this.segments.push(new PVector(0, 0));
                }

                //length of each segment for the fish
                this.segmentLength = floor(random(5,7));

                //segment colors
                this.colors = [];
                this.colors.push(config.color1 || color(random(255), random(255), random(255), random() < 0.5 ? random(100, 200) : 255));
                this.colors.push(config.color2 || color(random(255), random(255), random(255), random() < 0.5 ? random(100, 200) : 255));
                this.colors.push(config.color3 || color(random(255), random(255), random(255), random() < 0.5 ? random(100, 200) : 255));

                //location of the fish food
                this.food = new PVector(0, 0);
            };

            Fish.prototype.update = function() {
                if(scene.auto === false && this.follow) {
                    this.food = new PVector(mouseX, mouseY);
                }
                var dir = PVector.sub(this.food, this.position);
                dir.normalize();
                dir.mult(0.1);
                this.acceleration = dir;
                this.velocity.add(this.acceleration);
                this.velocity.limit(4);
                this.position.add(this.velocity);
            };

            Fish.prototype.calculate = function(i, segment) {
                var dx = segment.x - this.segments[i].x;
                var dy = segment.y - this.segments[i].y;
                var angle = atan2(dy, dx);
                if(i <= 21) {
                    this.segments[i].x = segment.x - cos(angle) * this.segmentLength * this.scale;
                    this.segments[i].y = segment.y - sin(angle) * this.segmentLength * this.scale;
                }
                else {
                    this.segments[i].x = segment.x - cos(angle) * this.segmentLength * 0.7 * this.scale;
                    this.segments[i].y = segment.y - sin(angle) * this.segmentLength * 0.7 * this.scale;
                }
            };

            Fish.prototype.display = function(i) {
                pushMatrix();
                pushStyle();
                    rectMode(CENTER);
                    translate(this.segments[i].x, this.segments[i].y);
                    scale(this.scale);

                    var segColor = this.colors[i % this.colors.length];

                    //flesh
                    noStroke();
                    fill(segColor);
                    ellipse(this.segmentSizes[i], -this.segmentSizes[i], this.segmentSizes[i] * 4.5, this.segmentSizes[i] * 8);

                    //eyes
                    if(i === 3) {
                        stroke(36, 36, 36);
                        strokeWeight(3);
                        //right
                        ellipse(this.segmentSizes[i]*3.2, -this.segmentSizes[i] * 2, 2, 2);
                        //left
                        ellipse(-this.segmentSizes[i]*1.1, -this.segmentSizes[i] * 2, 2, 2);
                    }

                    noStroke();

                    //top fin
                    if(i >= 6 && i <= 15) {
                        rect(-this.segmentSizes[i] * -0.8, -this.segmentSizes[i] * 6, 1, pow((this.segmentSizes[i] * 0.5), 2.6));
                    }

                    //bottom fin
                    if(i >= 7 && i <= 10) {
                        //bottom fin
                        rect(-this.segmentSizes[i] * -0.8, -this.segmentSizes[i] * -4, 1, pow((this.segmentSizes[i] * 0.5), 2.2));
                    }

                    //side fins
                    if(i >= 5 && i <= 7) {
                        //side fins
                        rect(-this.segmentSizes[i] * 2, -this.segmentSizes[i] * 0.5, this.segmentSizes[i] * 4, 1);
                        rect(-this.segmentSizes[i] * -4, -this.segmentSizes[i] * 0.5, this.segmentSizes[i] * 4, 1);
                    }

                    //tail
                    if(i > 21) {
                        fill(this.colors[0]);
                        rect(0, 0, 3, 10 * (i - 21));
                    }
                popStyle();
                popMatrix();
            };

            Fish.........完整代码请登录后点击上方下载按钮下载查看