p5实现海上日出动画效果代码-html代码-BFW代码库

p5实现海上日出动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现海上日出动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

</head>

<body>
    <div id="controls"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
    <script>
 class Cloud{
  constructor(){
    this.x = random(width);
    let amt = pow(random(), .5)*scale;
    this.y = (scale-amt)*height/3;
    amt = amt*.8 + .2;
    this.w = amt*random(200, 600);
    this.h = amt*random(100, 200);
    this.amt = amt;
  }
  render(buffer){
    buffer.push();
    buffer.translate(this.x, this.y);
    buffer.noStroke();
    for (let i = 200; i > 0; i--){
      let amt = i/200;
      let s = random(40, 100)*this.amt;
      buffer.fill(.1, amt*.8, (amt)*.6 + .4, .4);
      let a = (1-abs(amt*2-1))*.8 + .2;
      let x = random(-.5, .5)*this.w*a;
      let y = amt*this.h;
      buffer.ellipse(x, y, s);
    }
    buffer.pop();
  }
}

function setup (){
  pixelDensity(1);
  createCanvas();
  colorMode(HSB, 1, 1, 1);
  windowResized();
}

let buffer;
let scale;
let init = () => {
  buffer = createGraphics(width, height);
  buffer.colorMode(HSB, 1, 1, 1);

  scale = height/800;
  
  buffer.background(0);
  for (let i = 0; i < height/2; i++){
    let amt = i/(height/2);
    let amt2 = pow(amt, 1.5);
    let hue = .05 + .6*(1 -.........完整代码请登录后点击上方下载按钮下载查看