p5实现涡旋线条动画绘制效果代码
代码语言:html
所属分类:动画
代码描述:p5实现涡旋线条动画绘制效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
overflow: hidden;padding:0;margin:0;
}
</style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<script>
var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}console.clear();
var config = {
attractor: 'lorenz',
dt: 0.005,
maxLife: 1000,
minLife: 100,
maxTailLength: 80,
minTailLength: 5,
numberOfParticles: 75,
segmentsPerFrame: 1,
spawnRange: 10,
strokeWeight: 0.5,
tailOpacity: 190,
zoom: 12,
minRed: 0,
maxRed: 100,
minGreen: 100,
maxGreen: 255,
minBlue: 100,
maxBlue: 255 };
var particles = [];
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
loadUI();
}
function draw() {
while (particles.length < config.numberOfParticles)
{
var c = color(random(config.minRed, config.maxRed), random(config.minGreen, config.maxGreen), random(config.minBlue, config.maxBlue), config.tailOpacity),
life = random(config.minLife, config.maxLife),
tailLength = random(config.minTailLength, config.maxTailLength),
x = random(-config.spawnRange, config.spawnRange),
y = random(-config.spawnRange, config.spawnRange),
z = random(-config.spawnRange, config.spawnRange);
particles.push(new Particle({ x: x, y: y, z: z }, config.dt, c, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0