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

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

代码语言：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-valu.........完整代码请登录后点击上方下载按钮下载查看