We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Syntax Questions › how to fade in or grow in object
‹ Previous Topic | Next Topic ›
Poll Poll
Question: how to fade in or grow in object?



« Created by: holger on: Jun 2nd, 2009, 1:56am »

Pages: 1 2 
how to fade in or grow in object? (Read 2205 times)
holger
how to fade in or grow in object?
Jun 2nd, 2009, 1:56am  
hi,
i want to either fade in or grow in the points using the pointillizer script as here:

Code:
void setup()
{
  a = loadImage("a1.jpg");
  size(400,600);
  noStroke();
  background(255);
  smooth();
}

void draw()
{ 
  float pointillize = map(mouseX, 0, width, 2, 78);
  int x = int(random(a.width));
  int y = int(random(a.height));
  color pix = a.get(x, y);
  fill(pix, 126);
  ellipse(x, y, pointillize, pointillize);
}


i tried doing a grow with a for structure from 0 to the pointillizer value, didn't work...

would be nice to get help!:)
Back to top
 
 
PhiLho 
Re: how to fade in or grow in object?
Reply #1 - Jun 2nd, 2009, 2:10am  
The script you show works well (although the size() should be the first line of setup(), and you miss the declaration of a).

I am not sure to understand what you want to do (nor what is the purpose of the poll...). You want to do this effect without user interaction, at a given size?
Back to top
 
WWW  
holger
Re: how to fade in or grow in object?
Reply #2 - Jun 2nd, 2009, 2:13am  
thanks for your reply!
..yes, just animated, without user interaction.
the signle points should not suddenly appear but slowly (like 10 frames) fade in or grow in size...
Back to top
 
 
PhiLho 
Re: how to fade in or grow in object?
Reply #3 - Jun 2nd, 2009, 3:22am  
There are several ways to do this, but basically you need to do a loop on all pixels (or perhaps skipping some of them, otherwise it will be too slow) and apply the effect there.
Read on loadPixels() and for loop.
Although it also depend if you want all pixels to grow at the same time, or to apply the effect on each one in turn, etc.
Back to top
 
WWW  
holger
Re: how to fade in or grow in object?
Reply #4 - Jun 2nd, 2009, 3:54am  
thanks!
..well because of the speed i thought it might be better to have the fade only on each single point, rather fast

Code:
float a = 0;

void setup()
{
 size(200, 200);
 stroke(255);
 frameRate(25);
}

void draw()
{
 background(51);
 a = a + 2;
 if (a > 30) {
   a = 30;
 }
 ellipse(100, 100, a, a);  
}


something very simple, but faster than this, could do it by framerate, and later with an easout would be nice.
but first i want to integrate it in the pointillizer script to understand the basics..
Back to top
 
 
holger
Re: how to fade in or grow in object?
Reply #5 - Jun 2nd, 2009, 4:25am  
this simple idea doesn't work...?

Code:
PImage a;
float s = 0;

void setup()
{
  a = loadImage("1.jpg");
  size(500,600);
  noStroke();
  background(255);
  smooth();
}

void draw()
{ 
 s = s + 2;
 if (s > 30) {
   s = 30;
 }

  float pointillize = map(s, 0, s, 2, 78);
  int x = int(random(a.width));
  int y = int(random(a.height));
  color pix = a.get(x, y);
  fill(pix, 126);
  ellipse(x, y, pointillize, pointillize);

}
Back to top
 
 
PhiLho 
Re: how to fade in or grow in object?
Reply #6 - Jun 2nd, 2009, 4:53am  
Still not sure if that's what you look for, but it might get you started.
Code:
PImage img;
int radius;
int dir = 2;
int MAX_RADIUS = 60;
int CIRCLE_NB = 25;
PVector[] toGrow = new PVector[CIRCLE_NB];

void setup()
{
  size(400, 400);
  img = loadImage("E:/Dev/PhiLhoSoft/Processing/SqMe.png");
  println(img);
  noStroke();
  smooth();
  for (int i = 0; i < CIRCLE_NB; i++)
  {
    toGrow[i] = new PVector();
  }
}

void draw()
{ 
  image(img, 0, 0);
  radius += dir;
  if (radius == 0)
  {
    GetPoints();
    dir = -dir;
  }
  else if (radius == MAX_RADIUS)
  {
    dir = -dir;
  }
  for (int i = 0; i < CIRCLE_NB; i++)
  {
    PVector v = toGrow[i];
    color pix = img.get(int(v.x), int(v.y));
    fill(pix, 127);
    ellipse(v.x, v.y, radius / 2, radius / 2);
  }
} 

void GetPoints()
{
  for (int i = 0; i < CIRCLE_NB; i++)
  {
    PVector v = toGrow[i];
    v.x = MAX_RADIUS / 2 + int(random(img.width - MAX_RADIUS));
    v.y = MAX_RADIUS / 2 + int(random(img.height - MAX_RADIUS));
  }
}

You can move the image(img...) call from draw() to end of setup() for a different effect.
Back to top
 
WWW  
holger
Re: how to fade in or grow in object?
Reply #7 - Jun 2nd, 2009, 4:57am  
i checked the loadPixels() function.
not really shure if i can use that, since it seems to apply values to the whole stage as image...? so it would look as the whole drawn image scales...? not shure if i'm right about that...
Back to top
 
 
holger
Re: how to fade in or grow in object?
Reply #8 - Jun 2nd, 2009, 5:10am  
thank you PhiLho!
great!
i took the first line in draw() out: image(img, 0, 0);
to have the points stay and not see the image itself.
looks perfect!
this PVector function you used is probabely also possible for any vectors like beziers to use?

much more complicated than i thought but really useful to adjust all kinds of values.
thank you very much!Smiley
Back to top
 
 
PhiLho 
Re: how to fade in or grow in object?
Reply #9 - Jun 2nd, 2009, 5:54am  
PVector is a class, not a function. And that's actually a simple container of two (or three if doing 3D) values (coordinates, in general).
It is a bit cleaner than having two arrays (one for x, one for y) for example.

About loadPixels: you can use it on a PImage (actually, I think you can access the pixels[] array of an image without even using it).
It is slightly faster than using get(), but you will see a difference only if using get() a lot (eg. looping on all pixels of the image).
Back to top
 
WWW  
holger
Re: how to fade in or grow in object?
Reply #10 - Jun 2nd, 2009, 7:40am  
i see...
will check loadPixels further.
thank you!
Back to top
 
 
holger
Re: how to fade in or grow in object?
Reply #11 - Jun 2nd, 2009, 8:28am  
may i bother you with some more questions?
..i can't find how to stop the scale at a certain size. it keeps on scaleing big and small.
and
i tried to give MAX_RADIUS a random bvalue, doesn't work eith with the float random();...?
thanks for your time and knowledge!
Back to top
 
 
PhiLho 
Re: how to fade in or grow in object?
Reply #12 - Jun 2nd, 2009, 12:16pm  
Code:
PImage img;
int radius;
int speed = 2;
int maxRadius;
int MIN_RADIUS = 4;
int MAX_RADIUS = 32;
int CIRCLE_NB = 16;
PVector[] toGrow = new PVector[CIRCLE_NB];
boolean bRandom = true; // Set to true for a variant!

void setup()
{
  size(400, 400);
  img = loadImage("D:/_PhiLhoSoft/Processing/SqMe.png");
  noStroke();
  smooth();
  background(255);
  for (int i = 0; i < CIRCLE_NB; i++)
  {
    toGrow[i] = new PVector();
  }
  if (!bRandom)
  {
    maxRadius = MAX_RADIUS * 2;
  }
}

void draw()
{ 
//  image(img, 0, 0);
  radius += speed;
  for (int i = 0; i < CIRCLE_NB; i++)
  {
    PVector v = toGrow[i];
    color pix = img.get(int(v.x), int(v.y));
    fill(pix);
    ellipse(v.x, v.y, radius / 2, radius / 2);
  }
  if (radius >= maxRadius)
  {
    GetPoints();
    radius = 0;
  }
} 

void GetPoints()
{
  if (bRandom)
  {
    maxRadius = int(MIN_RADIUS + random(MAX_RADIUS - MIN_RADIUS));
  }
  else
  {
    if (maxRadius > MIN_RADIUS / 2)
    {
	maxRadius--;
    }
  }
  for (int i = 0; i < CIRCLE_NB; i++)
  {
    PVector v = toGrow[i];
    v.x = maxRadius / 4 + int(random(img.width - maxRadius / 2));
    v.y = maxRadius / 4 + int(random(img.height - maxRadius / 2));
  }
}

Fixing a margin bug in the same stroke...
Back to top
 
WWW  
holger
Re: how to fade in or grow in object?
Reply #13 - Jun 3rd, 2009, 2:54am  
oh! thats so kind!Smiley it works great, completely as i dreamed of. i wish i would understand all its principles. oops, the random look pretty sophisticated, wonder why it didn't work with a simple random float or int value...
thank you!
h.
Back to top
 
 
PhiLho 
Re: how to fade in or grow in object?
Reply #14 - Jun 3rd, 2009, 4:26am  
holger wrote on Jun 3rd, 2009, 2:54am:
wonder why it didn't work with a simple random float or int value...

Because I am stupid Smiley
I just forgot random() could have a lower bound:
Code:
void GetPoints()
{
  if (bRandom)
  {
    maxRadius = int(random(MIN_RADIUS, MAX_RADIUS - MIN_RADIUS));
  }
  else
  {
    if (maxRadius > MIN_RADIUS / 2)
    {
	maxRadius--;
    }
  }
  for (int i = 0; i < CIRCLE_NB; i++)
  {
    PVector v = toGrow[i];
    v.x = random(maxRadius / 4, img.width - maxRadius / 2);
    v.y = random(maxRadius / 4, img.height - maxRadius / 2);
  }
}
is better, no?
I wanted my circles to be whole on the surface, but if you don't mind them being half cut, you can remove these margins.
Back to top
 
WWW  
Pages: 1 2 
‹ Previous Topic | Next Topic ›