p5实现跟随鼠标的哈利波特魔法棒释放泡泡动画效果代码-html代码-BFW代码库

p5实现跟随鼠标的哈利波特魔法棒释放泡泡动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现跟随鼠标的哈利波特魔法棒释放泡泡动画效果代码

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

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

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

  
  
<style>
body {
        background: #17191a;
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
}

.card {
        width: 100%;
        height: 100%;
        cursor: url(//repo.bfw.wiki/bfwrepo/images/Harry_Potter_SeverusSnapeWandCursor.png),
                default !important;
        position: relative;
}
.footer {
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: white;
        font-size: 12px;
        text-align: right;
        font-family: monospace;
}

.footer a {
        color: white;
        text-decoration: none;
}
</style>

  
  
  
</head>

<body >
  <div class="card" id="star-card"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.6.0.js"></script>
      <script >
let magicParticles = [];
let stars = [];

function setup() {
  let canvas = createCanvas(windowWidth, windowHeight);
  canvas.parent("star-card");

  for (let i = 0; i < 200; i++) {
    let star = new Star();
    stars.push(star);
  }
}

function draw() {
  clear();

  for (let i = 0; i < stars.length; i++) {
    stars[i].update();
    stars[i].display();
  }

  for (let i = magicParticles.length - 1; i >= 0; i--) {
    let particle = magicParticles[i];
    particle.update();
    particle.display();

    if (particle.opacity <= 0) {
      magicParticles.splice(i, 1);
    }
  }
}

function mouseMoved() {
  addMagicParticle(mouseX, mouseY);
}

function touchMoved() {
  if (touches.length > 0) {
    let touch = touches[0];
    addMagicParticle(tou.........完整代码请登录后点击上方下载按钮下载查看