p5实现字符雨动画效果代码

代码语言:html

所属分类:动画

代码描述:p5实现字符雨动画效果代码

代码标签: p5 字符 动画

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

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

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

  
  
<style>
body {margin: 0; overflow: hidden;}
</style>


  
</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.6.0.js"></script>
      <script >

var Chars = ["*","X","+","-","1","0","1","0","六"];
var Cells = [];	
var tileSize = 16;
var dropspeed = 8;
var tiles = 119;
var x = 0;
function setup() {
  
  noStroke();
  colorMode(HSB, 360, 100, 50, .1);
  createCanvas(window.innerWidth, window.innerHeight);
  for (var i = 0; i < tiles; i++) {
  console.log(width / tileSize);
    x += tileSize;
    var y = round(random(height / dropspeed) * tileSize) - window.innerHeight;	
    var r = tileSize;
    var h = random(100, 150);
	var t = random(.8, 8);
	var u = random(.3, .8);
    Cells[i] = new Covid(x, y, r, h, t, u);
  }
}



function draw() {

   background(100, 100, 0, .009);

  for (var i =0; i < tiles; i++) {
    Cells[i].spread();
    Cells[i].update();
  }
}

function Covid(isX, isY, myD, myHue, newX, newY) {
  this.x = isX;
  this.y = isY;
  this.tS = newX;
  this.tU = newY;
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0