How to make a shape appear progressively in Processing

edited August 2017 in Questions about Code

Hello, I am beginner - discovered Processing code 2 weeks ago -. I drawn some lines and should like to let them appear progressively. I tried with stroke(#FFFFFF,0) (0 as alpha and it doesn't appear), and stroke(#FFFFFF,500) and it is perfectly white. But I can't do it progressively. Here the code. Thanks for your help.

int i;

void setup() { size(1000, 800); background(0); }

void draw() { strokeWeight(6); for (int i = 0; i < 1000; i = i+1) { stroke(#FFFFFF,i); } line(422,0,564,213); line(564,217,570,647); line(640,653,617,288); line(619,290,809,575); line(809,575,819,648); line(902,648,553,1); }


  • Edit post, highlight code, press Ctrl-o to format.

    You aren't clearing the screen between frames.

  • Also, alpha values are typically 0 to 255, so the last 750 or so of yours will do nothing.

  • Also, draw is a loop, your for loop is unnecessary, actually harmful. Read the FAQ entry about this.

  • Thank you. ok for CTRL-o, ok for 255 as alpha. If this loop is unnecessary, yet not in the setup, so ... I should like to try something else, with 3 steps (black line, grey line and white ), in the draw (?) and with if and else. What do you think ?

  • I'm on my phone and the FAQ post explains it better but, in short, the screen only gets updated at the end of draw so if you draw 1000 things in the draw you'll only see the last one.

    Instead draw one thing every frame and let draw do the looping for you.

    Maybe use frameCount as your alpha value?

  • thank you. I'll try. And I'll see in the FAQ. For the moment I just succeed to make a sort of on/off with the lines and the ellipse on a photo. I post my code, not to have an answer :) but just to see on it works with the format of code. Have a good day ...

    PImage img; int i,j;

    void setup() { size(1000, 800); img = loadImage("pont.png");
    colorMode(RGB,100); }

    void draw() { image(img, 0, 0); strokeWeight(6); stroke(#FFFFFF,i); i=0; delay(2000); i=255; line(422,0,564,213); line(564,217,570,647); line(640,647,617,288); line(619,290,809,575); line(809,575,819,648); line(902,648,553,1); fill(#F57D5B,j); j=0; delay(2000); noStroke(); j=255; ellipse(417,247,120,120); }

  • Answer ✓

    Please edit your post (gear icon in the top right corner of your post), select your code and hit ctrl+o to format it. Make sure there is an empty line above and below your code.

    You should not use delay() within draw(). Draw is a while loop, in a sense, that executes at a typical rate of 60fps. If you want to run slower, it is better to use frameRate() and you can find this info in the reference as how it works. Also, any effect on the canvas will happen at the end of each draw() execution. Any changes you do to the same feature within draw, only the latest is shown. Below is a demo. Notice that using a value of 100 for an alpha didn't work for me. Not sure why as we are setting the upper limits with the colorMode. I will need to read the reference closer to figure out this. For now, I tested with 256 and 100 and both works fine.


    final int MAXVAL=256;
    int myAlpha;
    void setup() { 
      size(400, 600);
    void draw() { 
      fill(255, myAlpha);
      ellipse(width/2, height/2, 120, 120);
      //Next updates every 10 frames
      surface.setTitle("Current alpha="+myAlpha);
      if (myAlpha>MAXVAL)
      //////Above three lines can be replaced with:
      // myAlpha =(++myAlpha)%MAXVAL;
  • Gah, delay is worse than a for loop! It just stops everything, including the updating of the screen.

  • Thank you very much. It is that. But I think I have to learn and learn to be able to apply it.

  • @corinnev -- For discussion of stepwise animation of a path using PShape / shape, see:

    Note that this is very similar problem to progressively revealing a shape.

    See also:

  • ok. Thank you.

Sign In or Register to comment.