p5光环动画效果-html代码-BFW代码库

p5光环动画效果

代码语言：html

所属分类：动画

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

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

<style>
* {
  box-sizing: border-box;
}

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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  background: #000000;
  overflow: hidden;
}

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

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


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

let SETTINGS = {
	total: 10,
	rotate_offset: 4,
	scale_offset: 2.5,
	time_offset: 50,
	location_offset: 50,
	location_division_offset: 2,
	noFill: false,
	noStroke: true,
	noLoop: false,
	color: {
		r: 255,
		g: 255,
		b: 255,
		a: 10,
	},
	background: {
		r: 0,
		g: 0,
		b: 0,
	},
	clear: function() {
		reset();
	},
};
const GUI = new dat.GUI();

function setup() {
	createCanvas(600, 600);
	reset();
}
function draw() {
	let t = frameCount;
	push();
	translate(width / 2, height / 2);
	let xLocation = (width / 2) * sin(t / SETTINGS.time_offset);
	let yLocation = (height / 2) * cos(t / SETTINGS.time_offset);
	for (let i = 0; i < SETTINGS.total; i++) {
		rotate(Math.PI / SETTINGS.rotate_offset);
		drawCircle(xLocation,.........完整代码请登录后点击上方下载按钮下载查看