How to add the speeding effect for a rect object

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(){
       rect(50, h, 200, 20);

     if(h < 0){
    h = height; 


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?



  • edited November 2017

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


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

  • @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

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

  • @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.

Sign In or Register to comment.