Постоянно генерируя частицы и заставляя их следовать по одному и тому же пути

Question

Постоянно генерируя частицы и заставляя их следовать по одному и тому же пути

0

Я пытаюсь создать объект (что-то вроде частиц) и заставить его следовать определенному пути. Я уже создал одну частицу и сделал ее по тому пути, который я хотел. Моя проблема в том, что я не могу непрерывно создавать частицы, которые следуют по тому же пути.

Это путь, которым я хочу следовать, и код:

var requestAnimationFrame = window.mozRequestAnimationFrame    ||
             window.webkitRequestAnimationFrame ||
               window.msRequestAnimationFrame     ||
              window.oRequestAnimationFrame
            ;  
var pathArray=[];
pathArray.push({x:490,y:290});
pathArray.push({x:330,y:380});
pathArray.push({x:110,y:300});
//pathArray.push({x:570,y:40});
//pathArray.push({x:570,y:175});
var polypoints = makePolyPoints(pathArray);

var width = 10;
var height = 10;
var position = 0;
var speed = 2;
//var rotation = 0;
//var rotationSpeed = 0.1;
var TimeInterval;

function anim() {

  TimeInterval=setTimeout(function () {
           requestId=requestAnimationFrame(anim);

        // calc new position
        position += speed;
        if (position > polypoints.length) {
            return;
        }
        var pt = polypoints[position];

        //rotation += rotationSpeed;

        // draw
        ctx2.clearRect(0, 0, layer1.width,layer1.height);
        ctx2.save();
        ctx2.beginPath();
        ctx2.translate(pt.x, pt.y);
        //ctx2.rotate(rotation);
        ctx2.rect(-width / 2, -height / 2, 10, 10);
        ctx2.fill();
        ctx2.stroke();
        ctx2.restore();

    }, 100);
}

function makePolyPoints(pathArray) {

    var points = [];

    for (var i = 1; i < pathArray.length; i++) {
        var startPt = pathArray[i - 1];
        var endPt = pathArray[i];
        var dx = endPt.x - startPt.x;
        var dy = endPt.y - startPt.y;
        for (var n = 0; n <= 90; n++) {
            var x = startPt.x + dx * n / 90;
            var y = startPt.y + dy * n / 90;
            points.push({
                x: x,
                y: y
            });
        }
    }
    return (points);
}

И код для генерации частиц cotinuously:

var packets={}; 
var packetIndex=0;
var packetNum=5;
ctx.clearRect(0,0,canvas.width,canvas.height);

function packet(){
this.x1=670;
this.y1=350;
this.vx1= Math.random()*5;
//this.vy1=Math.random()*10-5;
packetIndex++;
packets[packetIndex] = this;
this.id = packetIndex;
this.life=0;
this.maxLife=1000;
}
packet.prototype.draw=function(){
this.x1 -=this.vx1;
//this.y +=this.vy;
this.life++;
if(this.life>=this.maxLife){
delete packets[this.id];
}
ctx.fillStyle="black";
ctx.fillRect(this.x1,this.y1,10,10);
};

setInterval(function(){ 
//ctx.fillStyle="white";
ctx.clearRect(0,0,canvas.width,canvas.height);
for (var i1=0; i1<0.018; i1++){
new packet();
}
for(var i1 in packets){
packets[i1].draw();
}
},40);
};

Пожалуйста, дайте идею, чтобы я мог объединить эти два.

Заранее спасибо..

user2928041 12 нояб. 2013, в 14:56

Источник

Теги:

javascript

jquery

html

html5

html5-canvas

1 ответ

Ещё вопросы

markE · Accepted Answer · 2013-11-12T15-54-00.000Z

Если вы разрешите немного рефакторинга...

Демонстрация: http://jsfiddle.net/m1erickson/TXa82/

Каждый из ваших отдельных пакетов должен знать:

#steps завершено вдоль вашего фиксированного пути полилинии,
его скорости, угла поворота и скорости вращения.

Таким образом, свойства вашего класса Packet могут быть определены следующим образом:

function Packet(){
    this.currentStep=0;
    this.velocity=parseInt(Math.random()*4)+1;
    this.rotation=0;
    this.rotationSpeed=Math.PI/180*Math.random()*10;
    this.width=15;
    this.height=10;
    this.fill=randomColor();
    this.isActive=true;
}

Каждый из ваших отдельных пакетов должен двигаться и рисовать сам.

Таким образом, методы вашего класса Packet могут быть определены следующим образом:

//
Packet.prototype.move=function(){
    this.currentStep+=this.velocity;
    this.rotation+=this.rotationSpeed;
    if(this.currentStep>polypoints.length-1){
        this.isActive=false;
    }
}
//
Packet.prototype.draw=function(){
    if(!this.isActive){ return; }
    var point=polypoints[this.currentStep];
    // draw
    ctx.save();
    ctx.beginPath();
    ctx.translate(point.x,point.y);
    ctx.rotate(this.rotation);
    ctx.rect(-this.width/2,-this.height/2,10,20);
    ctx.fillStyle=this.fill;
    ctx.fill();
    ctx.stroke();        
    ctx.restore();
}

Затем ваш цикл анимации просто запрашивает, чтобы каждый пакет перемещался и рисовал сам.

Таким образом, ваш цикл анимации может выглядеть так:

function animate() {

        // request another loop if the animation is not done

        if(isAnimationDone){return;}
        requestAnimFrame(animate);

        // set the isAnimationDone flag 

        isAnimationDone=true;

        // clear the canvas

        ctx.clearRect(0,0,canvas.width,canvas.height);

        // ask all packets to move and draw themselves

        for(var i=0;i<packets.length;i++){
            var packet=packets[i];

            // if this packet has completed the trip, don't process it

            if(!packet.isActive){continue;}


            // tell this packet to move and draw

            packet.move();
            packet.draw();

            // clear the isAnimationDone flag so we get another loop next time

            isAnimationDone=false;
        }

}

Ты снова спас меня. Огромное спасибо..