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

代码语言:html

所属分类:动画

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

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

网友评论0