擦除粒子文本时如何加载下一个字符串？

Posted 2023-03-24

【中文标题】擦除粒子文本时如何加载下一个字符串？

【英文标题】：how to load next string when i erase particle text?

【发布时间】：2021-06-08 08:26:38

【问题描述】：

我是 vanilla js 和 webgl 内容的新手。我创建了一个粒子文本，它在鼠标悬停时会变形。并且它们的粒子通过一条线相互连接。代码如下。

const canvas = document.getElementById("canvas1");
const dpr = window.devicePixelRatio;
//console.log(dpr);
const ctx = canvas.getContext("2d");
ctx.scale(dpr, dpr);

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particleArray = [];
let adjustX = 10;
let adjustY = 0;
//handle mouse
const mouse = 
  x: null,
  y: null,
  radius: 30,
;
window.addEventListener("mousemove", function (event) 
  mouse.x = event.x;
  mouse.y = event.y;
  //console.log(mouse.x, mouse.y);
);


ctx.fillStyle = "white";
ctx.font = "35px verdana";
ctx.fillText("aman ", 0, 30);

const textCoordinates = ctx.getImageData(0, 0, 100, 100);

class Particle 
  constructor(x, y) 
    this.x = x + Math.random() * 6 - 3;
    this.y = y + Math.random() * 6 - 3;
    this.size = 1;
    this.baseX = this.x;
    this.baseY = this.y;
    this.density = Math.random() * 10 + 50;
  
  draw() 
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
  
  //distance between mouse and particle
  update() 
    let dx = mouse.x - this.x;
    let dy = mouse.y - this.y;
    let distance = Math.sqrt(dx * dx + dy * dy);
    let forceDirectionX = dx / distance;
    let forceDirectionY = dy / distance;
    let maxDistance = mouse.radius;
    let force = (maxDistance - distance) / maxDistance;
    let directionX = forceDirectionX * force * this.density;
    let directionY = forceDirectionY * force * this.density;

    if (distance < mouse.radius) 
      this.x -= directionX;
      this.y -= directionY;
     else 
      if (this.x !== this.baseX) 
        let dx = this.x - this.baseX;
        this.x += dx / 10;
      
      if (this.y !== this.baseY) 
        let dy = this.y - this.baseY;
        this.y += dy / 10;
      
    
  


//console.log(textCoordinates);
function init() 
  particleArray = [];
  for (let y = 0, y2 = textCoordinates.height; y < y2; y++) 
    for (let x = 0, x2 = textCoordinates.width; x < x2; x++) 
      if (
        textCoordinates.data[y * 4 * textCoordinates.width + x * 4 + 3] > 128
      ) 
        let positionX = x + adjustX;
        let positionY = y + adjustY;
        particleArray.push(new Particle(positionX * 4, positionY * 4));
      
    
  

init();
//console.log(particleArray);

function animate() 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < particleArray.length; i++) 
    particleArray[i].draw();
    particleArray[i].update();
  
  connect();
  requestAnimationFrame(animate);

animate();
function connect() 
  let opacityValue = 1;
  for (let a = 0; a < particleArray.length; a++) 
    for (let b = a; b < particleArray.length; b++) 
      let dx = particleArray[a].x - particleArray[b].x;
      let dy = particleArray[a].y - particleArray[b].y;
      let distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < 14) 
        opacityValue = 0.5;
        ctx.strokeStyle = "rgb(200,150,160," + opacityValue + ")";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(particleArray[a].x, particleArray[a].y);
        ctx.lineTo(particleArray[b].x, particleArray[b].y);
        ctx.stroke();
      
    
  

现在我想做的是，当我删除这个粒子文本时，下一个文本必须出现。就像在这个网站上https://animal.cc/ 一样。 任何人都可以在这方面帮助我:))

【参考方案1】：

（这与三个.js 无关） 当确定“此粒子文本”已被擦除时，可以在 animate() 中执行此操作：

ctx.fillText("NEW ", 0, 30);
textCoordinates = ctx.getImageData(0, 0, 100, 100);
init();

编辑：注释代码（如下）

  for (let y = 0, y2 = textCoordinates.height; y < y2; y++) 
    for (let x = 0, x2 = textCoordinates.width; x < x2; x++) 

【讨论】：

嗨 dcromley ，感谢您回答我的问题。实际上我试图确定文本是否已被删除，但我不知道该怎么做。

我猜您将不得不执行您之前使用的循环（请参阅代码的编辑答案）并查看是否所有（或大部分）像素都被擦除了。