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.run = function() {
                for(var i = 0; i < scene.fishes.length; i++) {
                    var fish = scene.fishes[i];

                    if(scene.auto === true && fish.change === true) {
                        fish.food = new PVector(fish.xOffset, fish.position.y);
                        if((fish.xOffset === -70 && fish.position.x < fish.xOffset) || (fish.xOffset === width + 70 && fish.position.x > fish.xOffset)) {
                            fish.direction *= -1;
                            fish.scale = constrain(fish.scale - 0.001 * fish.direction, 0.5, 1);
                            fish.change = false;   
                        }
                    }
                    else if(random() < 0.05) {
                        fish.food = new PVector(random(width), random(height));
                    }

                    fish.update();

                    if(scene.auto === false && fish.follow) {
                        fish.direction = -1;   
                    }

                    if(fish.change === false && (fish.scale === 0.5 || fish.scale === 1)) {
                        if(random() < 0.5) {
                            fish.xOffset = -70;
                        }
                        else {
                            fish.xOffset = width + 70;
                        }
                        fish.change = true;
                    }

                    fish.scale = constrain(fish.scale - 0.001 * fish.direction, 0.5, 1);

                    fish.calculate(0, fish.position);
                    for(var j = 0; j < fish.segments.length - 1; j++) {
                        fish.calculate(j + 1, fish.segments[j]);
                    }

                    if(fish.direction === -1) {
                        for(var k = fish.segments.length - 1; k >= 0; k--) {
                            fish.display(k);
                        }
                    }
                    else {
                        for(var k = 0; k < fish.segments.length; k++) {
                            fish.display(k);
                        }
                    }
                }

                //sort the fish so larger ones are in front
                var len = scene.fishes.length;
                for (var i = len - 1; i >= 0; i--){
                    for(var j = 1; j <= i; j++){
                        if(scene.fishes[j-1].scale > scene.fishes[j].scale){
                            var temp = scene.fishes[j-1];
                            scene.fishes[j-1] = scene.fishes[j];
                            scene.fishes[j] = temp;
                        }
                    }
                }
            };
        } //Fish

        {
            var Bubble = function(position, size) {
                this.position = position || new PVector(random(30, 70), height);
                this.velocity = new PVector(0, 0);
                this.acceleration = new PVector(0, 0);
                this.size = size || random(5, 20);
                this.color = random(100, 200);
            };

            Bubble.prototype.update = function() {
                var target = new PVector(this.position.x, -this.size);
                var dir = PVector.sub(target, this.position);
                dir.normalize();
                dir.mult(0.1);
                this.acceleration = dir;
                this.velocity.add(th.........完整代码请登录后点击上方下载按钮下载查看