How to make a shape appear progressively in Processing

corinnev

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); }

koogs

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

You aren't clearing the screen between frames.

koogs

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

koogs

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

corinnev

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 ?

koogs

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?

corinnev

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); }

kfrajer

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.

Kf

final int MAXVAL=256;

int myAlpha;

void setup() { 
  size(400, 600);
  colorMode(RGB, MAXVAL, MAXVAL, MAXVAL, MAXVAL);
  frameRate(15);
}

void draw() { 
  background(0);
  fill(255, myAlpha);
  ellipse(width/2, height/2, 120, 120);

  //Next updates every 10 frames
  if(frameCount%10==0)
  surface.setTitle("Current alpha="+myAlpha);

  myAlpha++;
  if (myAlpha>MAXVAL)
    myAlpha=0;

  //////Above three lines can be replaced with:
  // myAlpha =(++myAlpha)%MAXVAL;
}

koogs

Gah, delay is worse than a for loop! It just stops everything, including the updating of the screen.

koogs

That faq:

https://forum.processing.org/two/discussion/8087/what-are-setup-and-draw

corinnev

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

jeremydouglass

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

• Indoor Navigation https://forum.processing.org/two/discussion/comment/88082/#Comment_88082

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

See also:

• How can I make an animation like this? (calligraphy) https://forum.processing.org/two/discussion/comment/87574/#Comment_87574

corinnev

ok. Thank you.