How to add the speeding effect for a rect object

UsamaRehan

I have a rectangle which moves from bottom to top and repeats itself. Like 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--;    
}

 }`

I want to have the effect which happens when any obstacles moves at a fast speed like leaving a trail for a second.

How can I achieve this?

Kajuna

If I got it right, you coud replace the background with a semi-transparent fullscreen rect. That would slowly erase the previous rects.

fill(0,50);
rect(0,0,width,height);

Edit: and remove the stroke of your red rect by calling noStroke();

jeremydouglass

@Kajuna this works and is simple if you have no other objects -- however note that for low alpha settings this leaves behind traces that are never fully erased.

@UsamaRehan -- The most common method for producing object trails is to:

1. create an object
2. store a history of previous positions
3. draw each one with a different alpha and/or color

For an in-depth tutorial, see:

9.7: Drawing Object Trails - p5.js Tutorial

UsamaRehan

I was searching for a way without doing this,seems like there isn't. I have already seen this. Thanks anyway.

GoToLoop

http://Studio.ProcessingTogether.com/sp/pad/export/ro.9Q6oRai8-41WJ

jeremydouglass

@UsamaRehan -- GoToLoop's example demonstrates the fading background effect that Kajuna suggested -- try changing BG to see what is happening. This works great as long as the fade rate is sufficient, and as long as there are no non-fading objects -- in other words, if everything leaves trails.

If not, you can put only things that leave trails onto a separate buffer, then copy it to the canvas and draw non-trailing things on top of it. At a certain point, however, this isn't really less complex than implementing object trails as location histories.