p5实现可交互可修改参数粒子碎片动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：p5实现可交互可修改参数粒子碎片动画效果代码

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

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

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

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Space+Mono&display=swap");

body,
html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #0a0e29;
	font-family: "Space Mono", sans-serif;
	font-size: 0.9rem;
}
#canvas {
	position: absolute;
	top: 0;
	left: 0;
}
#config-panel {
	position: absolute;
	top: 20px;
	left: -250px;
	width: 250px;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 20px;
	box-sizing: border-box;
	transition: left 0.3s ease;
	border-radius: 0 10px 10px 0;
	max-height: calc(100% - 40px);
	overflow-y: auto;
}
#config-panel.open {
	left: 60px;
}
#config-toggle {
	position: absolute;
	top: 20px;
	left: 20px;
	font-size: 24px;
	background: none;
	border: none;
	color: white;
	cursor: pointer;
}
.slider-container {
	margin-bottom: 15px;
}
label {
	display: block;
	margin-bottom: 5px;
}
input[type="range"] {
	width: 100%;
}
.slider-value {
	display: inline-block;
	width: 50px;
	text-align: right;
	margin-left: 10px;
	right: 0px;
}
.color-picker-container {
	margin-bottom: 15px;
}
#background-color {
	width: 100%;
	height: 30px;
	padding: 0;
	border: none;
	cursor: pointer;
}
</style>


  
  
</head>

<body translate="no">
  <canvas id="canvas"></canvas>
<button id="config-toggle">☰</button>
<div id="config-panel">
	<h3>Configurations</h3>
	<div class="slider-container">
		<label for="particle-size">Particle Size: <span class="slider-value" id="particle-size-value">3.5</span></label>
		<input type="range" id="particle-size" min="1" max="10" value="3.5" step="0.5">
	</div>
	<div class="slider-container">
		<label for="particle-count">Particle Count: <span class="slider-value" id="particle-count-value">1000</span></label>
		<input type="range" id="particle-count" min="500" max="5000" value="1000">
	</div>
	<div class="slider-container">
		<label for="max-speed">Max Speed: <span class="slider-value" id="max-speed-value">2</span></label>
		<input type="range" id="max-speed" min="0.5" max="5" value="2" step="0.1">
	</div>
	<div class="slider-container">
		<label for="mouse-force">Mouse Force: <span class="slider-value" id="mouse-force-value">0.05</span></label>
		<input type="range" id="mouse-force" min="0" max="0.2" value="0.05" step="0.01">
	</div>
	<div class="slider-container">
		<label for="color-force">Color Force: <span class="slider-value" id="color-force-value">0.5</span></label>
		<input type="range" id="color-force" min="0" max="1" value="0.5" step="0.05">
	</div>
	<div class="slider-container">
		<label for="depth-range">Depth Range: <span class="slider-value" id="depth-range-value">500</span></label>
		<input type="range" id="depth-range" min="100" max="1000" value="500" step="10">
	</div>
	<div class="slider-container">
		<label for="exposure">Exposure: <span class="slider-value" id="exposure-value">1</span></label>
		<input type="range" id="exposure" min="0.1" max="2" value="1" step="0.1">
	</div>
	<div class="color-picker-container">
		<label for="background-color">Background Color:</label>
		<input type="color" id="background-color" value="#0a0e29">
	</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
  
      <script>
      
      let img;
let particles = [];
let config = {
	particleCount: 1000,
	maxSpeed: 2,
	mouseForce: 0.05,
	colorForce: 0.5,
	particleSize: 3.5,
	depthRange: 500,
	exposure: 1,
	backgroundColor: "#0a0e29"
};

function preload() {
	img = loadImage(
		"//repo.bfw.wiki/bfwrepo/image/61132edb7fba9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_600,/quality,q_90"
	);
}

function setup() {
	createCanvas(windowWidth, windowHeight, WEBGL);
	img.resize(width, height);
	img.loadPixels();
	colorMode(RGB, 255);

	createParticles();
	setupConfigPanel();
}

function createParticles() {
	particles = [];
	for (let i = 0; i < config.particleCount; i++) {
		particles.push(
			new Particle(
				random(-width / 2, width / 2),
				random(-height / 2, height / 2),
				.........完整代码请登录后点击上方下载按钮下载查看