Wie füllen Text mit Partikeln p5js

Ich möchte füllen einen Text mit Teilchen wie dieseWie füllen Text mit Partikeln p5js

Ich habe versucht, dies mit p5.js zu tun, aber ich bin fest, wo die Partikel nur erscheinen auf der Verwendung die Kanten. Irgendeine Idee, dies zu erreichen, anstatt es an den Rändern zu haben?

Hier ist mein Versuch. Dank einer Tonne im Voraus :)

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); 
    } 
}

Quelle

2017-04-13 Anonymous

[Craig Reynold-] (http://www.red3d.com/cwr /) Steueralgorithmen? –

ja Lenkalgorithmus. –

jemand hier bitte um mir zu helfen? –

Obwohl Sie könnten aber, Sie müssen nicht p5 _* js verwenden, um erreiche diese Animation. Glücklicherweise bin ich auf eine Javascript-Bibliothek namens Particle Slider gestoßen und wie sich herausstellt, yalantis auch die gleiche Bibliothek für ihre Animation verwenden.

Hier ist, wie Sie eine solche Animation mit dieser Bibliothek erreichen können.

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 -->

Ja! Es ist wirklich so einfach :)

auch für zukünftige Referenz demo on jsFiddle

, Check-out beziehen sich immer auf dieofficial documentation

Quelle

2017-04-15 09:56:39

du weißt, bro du bist retter danke danke und vielen Dank !! : D :) –

@BhavikBamania Du bist am meisten Willkommen :) –

@BhavikBamania BTW, bitte bearbeiten Sie die Frage zu einem bestimmten Problem (wahrscheinlich, um diese Antwort unterzubringen) oder die Frage könnte gelöscht werden :) –

Wie füllen Text mit Partikeln p5js

Antwort

Verwandte Themen