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: #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);
            }.........完整代码请登录后点击上方下载按钮下载查看