Hinzufügen von Geschwindigkeitseffekten zu einem Rect-Objekt

Question

Ich habe ein Rechteck, das sich von unten nach oben bewegt und sich wiederholt. Wie so,

var h ; 

function setup(){ 
    createCanvas(710, 400); 
    h = height; 
} 

function draw(){ 
    background(0); 
    fill(255,0,0); 
    rect(50, h, 200, 20); 

    if(h < 0){ 
     h = height; 
    } 
    else{ 
     h--;  
    } 

} 

möchte ich die Wirkung haben, die passiert, wenn Hindernisse mit einer schnellen Geschwindigkeit bewegt sich wie eine Spur für eine Sekunde zu verlassen.

Wie kann ich das erreichen?

Answer 1

Sie können interessante Effekte erhalten, indem Sie background(0) in Zeichen durch ein Vollfensterrechteck ersetzen, das teilweise transparent ist. Beispiel:

function draw(){ 
    fill(0,20); //experiment with other alpha values 
    rect(0,0,width,height); 
    fill(255,0,0); 
    rect(50, h, 200, 20); 

    if(h < 0){ 
     h = height; 
    } 
    else{ 
     h -=3; //experiment with different speeds 
    } 

Die sich bewegenden Rechtecke hinterlassen eine Spur aus teilweise sichtbaren Rechtecken.

Answer 2

Im Allgemeinen sollten Sie ein Array von vorherigen Positionen beibehalten und diese dann zeichnen. Hier ein Beispiel:

var h; 
var trail = []; 

function setup(){ 
    createCanvas(710, 400); 
    h = height; 
} 

function draw(){ 
    background(0); 
    noStroke(); 
    fill(255,0,0); 
    rect(50, h, 200, 20); 

    // add to beginning of array 
    trail.unshift(h); 

    // chop off end of array 
    if(trail.length > 10){ 
     trail.length = 10; 
    } 

    //loop over tail 
    for(var i = 0; i < trail.length; i++){ 
     // you can do stuff like set the opacity based on the index 
     fill(255, 0, 0, 100-i*5); 
     // you can also set the position and width based on the index 
     rect(50+i*10, trail[i], 200-i*20, 20); 
    } 

    if(h < 0){ 
     h = height; 
    } 
    else{ 
     h-=5;  
    } 
} 

Sie müssen mit ihm ein wenig spielen, um den Effekt zu bekommen Sie gehen für, aber die Grundidee ist die gleiche: nur ein Array verwenden, um die vorherigen Positionen zu halten und zeichne sie dann, um deine Spur zu erstellen.

Answer 3

tun, wie Sie, aber jeder Rahmen waren, in der draw() Funktion:

background(0, 100); 

dies den Hintergrund mit einer Opazität setzt ... wird es funktionieren. Vertrauen Sie mir