p5实现字符雨动画效果代码
代码语言:html
所属分类:动画
代码描述: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