canvas实现彩色小球喷射鼠标悬浮躲避粒子动画交互效果代码-html代码-BFW代码库

canvas实现彩色小球喷射鼠标悬浮躲避粒子动画交互效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现彩色小球喷射鼠标悬浮躲避粒子动画交互效果代码

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

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

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

  
  
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  font-family: Arial;
}

.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;
}

h4 {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: none;
}
</style>


  
  
</head>

<body >
  <h4>play with 'em!</h4>

  
      <script>
let centerVec, mouseVec;
let total = 200;
let initialForce = 2;
let friction = .8;
let springForce = 1;
let k = 0.1;
let mouseThreshold = 60;
let mouseRepelForce = 0.1;
let forceToCenter = 0.008;
let minDist = 25;
let minDistSQ = minDist * minDist;
let particles = [];
let count = 0;
let instructionVisible = false;

function init() {
  centerVec = new Vector(window.innerWidth / 2, window.innerHeight / 2);
  mouseVec = new Vector();

  window.addEventListener("mousemove", inputMove);
  window.addEventListener("touchmove", inputMove, { passive: false });
  window.addEventListener("resize", resize);

  update();
}

function inputMove(e) {
  if (e.type == "touchmove")
  e.preventDefault();

  var x, y;
  if (e.type.indexOf("mouse") >= 0) {
    x = e.clientX;
    y = e.clientY;
  } else {
    x = e.changedTouches[0].clientX;
    y = e.changedTouches[0].clientY;
  }

  mouseVec.x = x;
  mouseVec.y = y;
}

function resize() {
  centerVec.x = window.innerWidth / 2;
  centerVec.y = window.innerHeight / 2;
}

function create() {
  const color = {
    h: 250 + Math.floor(Math.random() * 150),
    s: 100,
    l: 70 };


  const colorStr = `hsl(${color.h}deg, ${color.s}%, ${color.l}%)`;

  const particle = new Particle(
  colorStr,
  centerVec.x,
  centerVec.y,
  friction);


  particle.velocity.x = Math.random() * initialForce - initialForce * 0.5;
  particle.velocity.y = Math.random() * initialForce - initialForce * 0.5;

  particles.push(particle);
  count = particles.length;
}

function update() {
  requestAnimationFrame(update);
  if (count < total)
  create();


  for (let i = 0; i < count; i++) {
    particles[i].update();
    repelToMouse(particles[i]);
    if (count == total) {
      attactToCenter(particles[i]);
      if (!instructionVisible) {
        instructionVisible = true;
        document.querySelector("h4").style.display = "block";
      }
    }
  }

  //   for(let i = 0; i < count-1; i++){
  //     const particleA = particles[i]

  //     for(let j = i + 1; j < count; j++){
  //       const particleB = particles[j]
  //       //repel(particleA, particleB)
  //     }
  //   }

  for (let i = 0; i < count; i++) {
    const particleA = particles[i];

    for (let j = 0; j < count; j++) {
      const particleB = particles[j];
      repel2(particleA, particleB);
    }
  }

}

function repel(particleA, particleB) {
  const force = Vector.sub(particleB.position, particleA.position);
  const dist = force.mag();

  if (dist < minDist) {
    const x = dist - minDist;
    force.normalize();
    force.mult(-1 * k * x);

    particleA.velocity.sub(force);
    particleB.velocity.add(force);
  }
}

// from generative-design book: 
// https://editor.p5js.org/generative-design/sketches/M_6_1_03
function repel2(particleA, particleB) {
  const force = Vector.sub(particleA.position, particleB.position);
  const dist = force.mag();

  if (dist > 0 && dist < minDist) {
    const ramp = 0.5;
    const strength = -5;
    const s = Math.pow(dist / minDist, 1.........完整代码请登录后点击上方下载按钮下载查看