Processing 向rect对象添加速度效果

Processing 向rect对象添加速度效果,processing,shadow,p5.js,Processing,Shadow,P5.js,我有一个从下到上移动并重复自身的矩形。这样, var h; 功能设置{ CreateCanvas710400; h=高度; } 函数图{ 背景0; 填充255,0,0; rect50,h,200,20; ifh10{ trail.length=10; } //绕尾 forvar i=0;i

我有一个从下到上移动并重复自身的矩形。这样,

var h; 功能设置{ CreateCanvas710400; h=高度; } 函数图{ 背景0; 填充255,0,0; rect50,h,200,20; ifh<0{ h=高度; } 否则{ h-; } } 我想要的是当任何障碍物以很快的速度移动时产生的效果,比如离开一条小径一秒钟


如何实现这一点?

您可以通过将绘图中的背景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  
    }

移动的矩形将在其后面留下一条部分可见的矩形的轨迹。

一般来说,这样做的方法是保留一个先前位置的数组,然后绘制这些位置。下面是一个例子:

var h; var-trail=[]; 功能设置{ CreateCanvas710400; h=高度; } 函数图{ 背景0; 仰泳; 填充255,0,0; rect50,h,200,20; //添加到数组的开头 trail.unshifth; //切掉数组的末尾 如果轨道长度>10{ trail.length=10; } //绕尾 forvar i=0;i你必须稍微使用它才能获得你想要的效果,但基本思想是一样的:只需使用一个数组来保持以前的位置,然后绘制它们来创建你的轨迹。

在“绘制”功能中,只需按原样做每一帧:

background(0, 100);
这将使用不透明度设置背景。。。它会起作用的。相信我