p5实现文字落地动画效果-html代码-BFW代码库

p5实现文字落地动画效果

代码语言：html

所属分类：动画

代码描述：p5实现文字落地动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"rel="stylesheet'>
<style>
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
}

body {
  width: 100%;
  height: 100vh;
  background: #ededed;
  overflow: hidden;
}

.support {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex;
}
.support a {
  margin: 0 10px;
  color: green;
  font-size: 1.8rem;
  backface-visibility: hidden;
  transition: all 150ms ease;
}
.support a:hover {
  transform: scale(1.1);
}
</style>

</head>
<body translate="no">


<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<script>
console.clear();

let drops = [],
	 droplets = [];

let spawnTimeRate = 25;

function setup() {
	createCanvas(innerWidth, innerHeight);
}

function draw() {
	background(0);

	drops.forEach((drop, index) => {
		drop.update();
		if (drop.destroyed) {
			let n = floor(random(8, 15));
			for (let i = 0; i < n; i++) {
				droplets.push(
					new Droplets(drop.position.x, drop.position.y, {
						velocity: p5.Vector.random2D().setMag(random(8, 10)),
						gravity: createVector(0, 0.1),
						radius: random(6, 8),
						timeToLive: 180,
						friction: 0.2,
					})
				);
			}
			drops.splice(index, 1);
		}
	});

	droplets.forEach((droplet, index) => {
		droplet.update();
		if (droplet.timeToLive <= 0) droplets.splice(index, 1);
	});

	if (frameCount % spawnTimeRate == 0) {
		drops.push(new Drop(random(width), random(-100, -200)));
		spawnTimeRate = floor(random(45, 100));
	}
}

function windowResized() {
	drops = [];
	droplets = [];
	resizeCanvas(innerWidth, innerHeight);
}


class Drop {
	constructor(x, y, options = {}) {
		this.velocity.........完整代码请登录后点击上方下载按钮下载查看