将速度效果添加到矩形对象中
问题描述:
我有一个从底部到顶部移动并重复自身的矩形。像这样,将速度效果添加到矩形对象中
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--;
}
}
我想有当任何障碍,在移动速度快像留下痕迹的第二才会发生作用。
我该如何做到这一点?
答
您可以通过替换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
}
移动的矩形会在其后面留下部分可见的矩形的尾迹。
答
通常情况下,你会这样做的方式是维护一个以前的职位阵列,然后绘制这些。这里有一个例子:
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;
}
}
你必须发挥它一点点让你要去的效果,但其基本思想是一样的:只需使用一个数组来保存先前的立场,然后绘制它们来创建你的踪迹。
答
做你不过是每一帧,在draw()函数:
background(0, 100);
此设置背景的不透明度...它会工作。相信我