p5实现彩色粒子碰撞发散动画效果代码

代码语言:html

所属分类:粒子

代码描述:p5实现彩色粒子碰撞发散动画效果代码

代码标签: 粒子 碰撞 发散 动画 效果

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

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

<head>

 
<meta charset="UTF-8">
 

 
 
<style>
body
{
 
margin: 0;
 
overflow: clip;
 
background: #1B2021;
}

main
{
 
display: flex;
 
height: 100vh;
}

canvas
{
 
margin: auto;
}
</style>



</head>

<body>
 

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
     
<script >
const colors = ["#2f3136", "#2a2b30", "#7d8187", "#1e1f23", "#5f6a89"];
const backgroundColor = "#000";
const width = window.innerWidth;
const height = window.innerHeight;
const totalFrames = 1000;
let frameCount = 0;
let recording = false;
let recordingStarted = false;
let frameDelta = 0;
let m;
let b;
let particles = [];

let c01 = (g) => {
  return constrain(g, 0, 1);
};

let ease = (p) => {
  p = c01(p);
  return 3 * p * p - 2 * p * p * p;
};

function easeInQuint(x) {
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0