Leinwand Teilchen Bogen

Question

Es geht um Cavas Animation. Wie mache ich meine Partikel nicht Würfel, sondern Kreise? Codepen Link

CSS:

body, html { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

canvas { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background:#000000; 
} 

JS

var cvs = document.createElement('canvas'), 
    context = cvs.getContext("2d"); 
document.body.appendChild(cvs); 

var numDots = 300, 
    n = numDots, 
    currDot, 
    maxRad = 900, 
    minRad = 100, 
    radDiff = maxRad-minRad, 
    dots = [], 
    PI = Math.PI, 
    centerPt = {x:0, y:0}; 

resizeHandler(); 
window.onresize = resizeHandler; 

while(n--){ 
    currDot = {}; 
    currDot.radius = minRad+Math.random()*radDiff; 
    currDot.radiusV = 0+Math.random()*200, 
    currDot.radiusVS = (0.5-Math.random()*10)*0.00000005, 
    currDot.radiusVP = Math.random()*0, 
    currDot.ang = (1-Math.random()*2)*PI; 
    currDot.speed = (1+Math.random()*0); 
    //currDot.speed = 1-Math.round(Math.random())*2; 
    //currDot.speed = 1; 
    currDot.intensityP = Math.random()*PI; 
    currDot.intensityS = Math.random()*0.0005; 
    currDot.intensityO = 64+Math.round(Math.random()*64); 
    currDot.intensityV = Math.min(Math.random()*255, currDot.intensityO); 
    currDot.intensity = Math.round(Math.random()*255); 
    currDot.fillColor = "rgb("+currDot.intensity+","+currDot.intensity+","+currDot.intensity+")"; 
    dots.push(currDot); 
} 

function drawPoints(){ 
    n = numDots; 
    var _centerPt = centerPt, 
     _context = context, 
     dX = 0, 
     dY = 0; 

    _context.clearRect(0, 0, cvs.width, cvs.height); 

    var radDiff; 
    //draw dots 
    while(n--){ 
    currDot = dots[n]; 
    currDot.radiusVP += currDot.radiusVS; 
    radDiff = currDot.radius+Math.sin(currDot.radiusVP)*currDot.radiusV; 
    dX = _centerPt.x+Math.sin(currDot.ang)*radDiff; 
    dY = _centerPt.y+Math.cos(currDot.ang)*radDiff; 

    //currDot.ang += currDot.speed; 
    currDot.ang += currDot.speed*radDiff/400000; 
    currDot.intensityP += currDot.intensityS; 
    currDot.intensity = Math.round(currDot.intensityO+Math.sin(currDot.intensityP)*currDot.intensityV); 

    //console.log(currDot); 
    _context.fillStyle= "rgb("+currDot.intensity+","+currDot.intensity+","+currDot.intensity+")";; 
    _context.fillRect(dX, dY, 2, 2); 

    } //draw dot 
    window.requestAnimationFrame(drawPoints); 
} 

function resizeHandler(){ 
    var box = cvs.getBoundingClientRect(); 
    var w = box.width; 
    var h = box.height; 
    cvs.width = w; 
    cvs.height = h; 
    centerPt.x = Math.round(w/2); 
    centerPt.y = Math.round(h/2); 
} 

drawPoints(); 

Vielen Dank allen

Answer 1

EDIT

Sie sind nicht Ihre Farben richtig zu konfigurieren! Wenn Sie Kreise machen legen Sie ein fillStyle und ein strokeStyle, und da Sie keine strokeStyle einstellen, werden die Kreise nicht Rendering (siehe Leinwand mit weißen Hintergrund)

Nach beginPath() vor dem .stroke() Befehl, müssen Sie stellen Sie den Hub:

_context.strokeStyle= "rgb("+currDot.intensity+","+currDot.intensity+","+currDot.intensity+")"; 

---

Sie sind bereits Quadrate Rendering, was bedeutet, dass Sie einen Punkt erzeugt haben für jedes Objekt zu besetzen. Jetzt einen Radius holen, wahrscheinlich etwas klein wie 1 oder 2, und verwenden Sie _context.arc anstelle von _context.fillRect, etwa so:

_context.beginPath(); 
_context.arc(dX, dY, 2, 0, 2 * Math.PI); 
_context.stroke(); 

Dadurch werden die Quadrate mit Kreisen mit einem Radius von 2 machen ersetzt (wie durch den dritten angegeben Parameter)

Answer 2

Ich bin nicht sicher, was Sie wollen, aber wenn Sie einen Kreis auf einem HTML5 Leinwand zeichnen Dies ist der Code:

context.beginPath();  
context.arc(centerX, centerY, radius, 0, 2 * Math.PI); 
context.stroke(); 

Wo

:

Zentrum (X, Y) ist Ihr Ausgangspunkt auf der Leinwand (die auf dem Code von der Suche wird zufällig)

Radius selbsterklärend ist, werden Sie wahrscheinlich wollen, dass es klein für Ihren Fall

0 ist der Startwinkel für den Bogen

(2 * Math.PI) ist der Endwinkel des Bogens (in Bezug auf Pi), die einen Vollkreis

Hoffentlich half vervollständigen!