p5实现鼠标跟随星际穿越效果代码-html代码-BFW代码库

p5实现鼠标跟随星际穿越效果代码

代码语言：html

所属分类：粒子

代码描述：p5实现鼠标跟随星际穿越效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0, 0, 0, 0.9);
}
</style>



</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script>
      <script  >
const canvasSize = {
  width: 700,
  height: 400 };


let fr = 60;

const createShip = () => {

  let vibratingAngle = 0;

  const draw = (controlDirection, vibratingShip) => {
    push();
    translate(canvasSize.width / 2, canvasSize.height / 2);
    rotate(controlDirection.heading());
    noStroke();
    const vibratingResult = sin(vibratingAngle) * vibratingShip;
    triangle(-15 + vibratingResult, 0, 15 + vibratingResult, -9, 15 + vibratingResult, 9);
    // rect(0, 0, 20, 20);
    fill(153, 10, 255, 255);

    pop();

  };

  const update = () => {
    vibratingAngle += 0.2;
  };

  return {
    draw,
    update };

};

let ship;

const createStar = () => {
  let pos = createVector(random(-canvasSize.width, canvasSize.width * 2), random(-canvasSize.height, canvasSize.height * 2));
  let vel = createVector();

  let acc = createVector();

  let mass = Math.random(1, 5);

  const draw = (controlDirection, width) => {
    push();
    translate(pos.x + width / 2, pos.y + 1.5);
    rotate(controlDirection.heading());
    fill(153, 50, 255, 170);
    noStroke();
    rect(-(width / 2), -1.5, width, 3);
    pop();
  };

  const update = () => {
    vel.add(acc);
    pos.add(vel);
  };

  const applyForce = force => {
    acc = force.copy();
  };

  const friction = () => {
    vel.div(3);
  };

  const randomExcludeWidth = x => {
  .........完整代码请登录后点击上方下载按钮下载查看