将速度效果添加到矩形对象中

我有一个从底部到顶部移动并重复自身的矩形。像这样，将速度效果添加到矩形对象中

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

}

我想有当任何障碍，在移动速度快像留下痕迹的第二才会发生作用。

我该如何做到这一点？

来源

2017-11-25 Rehan

您可以通过替换background(0)绘制一个部分透明的全窗口矩形来获得有趣效果。例如：

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 
    }

移动的矩形会在其后面留下部分可见的矩形的尾迹。

来源

2017-11-26 01:21:26

通常情况下，你会这样做的方式是维护一个以前的职位阵列，然后绘制这些。这里有一个例子：

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

你必须发挥它一点点让你要去的效果，但其基本思想是一样的：只需使用一个数组来保存先前的立场，然后绘制它们来创建你的踪迹。

来源

2017-11-27 17:48:32

做你不过是每一帧，在draw（）函数：

background(0, 100);

此设置背景的不透明度...它会工作。相信我

来源

2017-12-02 23:11:41

将速度效果添加到矩形对象中

回答

相关问题