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(touch.x, touch.y);
  }
}

function addMagicParticle(x, y) {
  if (x >= 0 && y >= 0 && x <= width && y <= height) {
    let particle = new MagicParticle(x, y);
    magicParticles.push(particle);
  }
}

class MagicParticle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(10, 30);
    this.baseColor = color(
      random([
        "#e84e66",
        "#67c69e",
        "#edf1f4",
        "#80acc9",
        "#73a8b0",
        "#fe817f",
        "#68d2a4",
        "#1d203f",
        "#c9a30d"
      ])
    );
    this.color = this.baseColor;
    this.rotation = random(TWO_PI);
    this.speed = random(1, 3);
    this.opacity = 255;
    this.fadeOutRate = random(1, 3);
    this.shapeType = r.........完整代码请登录后点击上方下载按钮下载查看