如何使用p5js用粒子填充文本

Question

我想用这样的粒子填充文本

我尝试使用 p5.js 来做到这一点，但我被困在粒子只出现在边缘的地方。有什么想法可以完成这个而不是把它放在边缘吗？

这是我的尝试。提前致谢:)

SteeringDemo.html

<body>
<script>
var font;
var vehicles=[];
var x=1360;
var y=400;
function preload() {
    font=loadFont('Poppins-Medium.ttf')
}
function setup() {
    var canvasDiv = document.getElementById('canvas');
    var width = canvasDiv.offsetWidth;
    var sketchCanvas = createCanvas(width,450);
    console.log(sketchCanvas);
    sketchCanvas.parent("canvas");
    background('#fff');

    var points=font.textToPoints('B',x/3,y/2,240);
    console.log(points);
    for(i=0;i<points.length;i++){
        var pt=points[i];
        var vehicle = new Vehicle(pt.x, pt.y);
        vehicles.push(vehicle);
    }
}
function draw() {
    background('#fff');
    for(var i=0; i< vehicles.length;i++){
        var v=vehicles[i];
        v.behaviors();
        v.update();
        v.show();
    }
}
</script>
<div class="container">
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div id="canvas"></div>
    </div>
</div>
</div>
</body>

Vehicle.js

function Vehicle(x,y) {
  this.pos= createVector(random(width),random(height));
  this.target=createVector(x,y);
  this.vel= p5.Vector.random2D();
  this.acc= createVector();
  this.radius=8;
  this.maxspeed=10;
  this.maxForce=1;
}
Vehicle.prototype.behaviors=function () {
  var arrive=this.arrive(this.target);
  var mouse= createVector(mouseX,mouseY);
  var flee=this.flee(mouse);
  arrive.mult(1);
  flee.mult(5);
  this.applyForce(arrive);
  this.applyForce(flee);
}
Vehicle.prototype.applyForce =function (f) {
  this.acc.add(f);
}
Vehicle.prototype.update=function () {
  this.pos.add(this.vel);
  this.vel.add(this.acc);
  this.acc.mult(0);
}
Vehicle.prototype.show=function () {
  stroke('#0097a7');
  strokeWeight(4);
  point(this.pos.x,this.pos.y);
}
Vehicle.prototype.arrive= function (target) {
  var desired=p5.Vector.sub(target,this.pos);
  var d=desired.mag();
  var speed=this.maxspeed;
  if(d < 100) {
    speed=map(d,0,100,0,this.maxspeed)
  }
  desired.setMag(speed);
  var steer=p5.Vector.sub(desired,this.vel);
  steer.limit(this.maxForce);
  return steer;
}

Vehicle.prototype.flee= function (target) {
  var desired=p5.Vector.sub(target,this.pos);
  var d= desired.mag();
  if(d <50) {
    desired.setMag(this.maxspeed);
    desired.mult(-1);
    var steer=p5.Vector.sub(desired,this.vel);
    steer.limit(this.maxForce);
    return steer;
  } else {
    return createVector(0,0);
  }
 }

Answer 1

虽然可以，但是您不必使用 p5_*js 来实现该动画。幸运的是，我遇到了一个名为 Particle Slider 的 javascript 库事实证明，yalantis 也使用相同的库制作动画。

以下是使用该库完成此类动画的方法。

let init = () => {
    PS.renderText({
        text: 'B',
        fontFamily: 'Arial',
        fontSize: 200,
        fontColor: '#00E2FA',
        fontWeight: 'bold'
    });
    var myPS = new ParticleSlider({
        ptlGap: 3,
        ptlSize: 1,
        mouseForce: 70
    });
    window.onresize = () => {
        myPS.width = window.innerWidth;
        myPS.height = window.innerHeight;
    }
}
window.onload = init;

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}

<script src="https://istack.000webhostapp.com/PS.js"></script>
<!-- DO NOT CHANGE ANYTHING AFTER THIS LINE -->
<div class="slides">
    <div class="slide"> </div>
</div>
<canvas class="draw"></canvas>
<!-- DO NOT CHANGE ANYTHING BEFORE THIS LINE -->

是的！真的是容易 :)

另外，结帐一个 demo on jsFiddle

为了将来参考总是参考 official documentation

如何使用p5js用粒子填充文本

How to fill text with particles using p5js

javascript

canvas

html5-canvas

p5.js