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 › [noob] Creating a simple() animation with circles
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
[noob] Creating a simple(?) animation with circles (Read 1773 times)
marcalexandre
[noob] Creating a simple(?) animation with circles
Apr 17th, 2010, 4:06pm  
Hi everyone !

I'm a very beginner in programming. I've learned a few basics of the C and Python langage and since Processing is not very far away from thoses I wanted to experiment something.

I want to do a tiny animation only with circles (kind of a menu, but don't mind about it).

Here are the step of how the animation will be
...
(sorry for drawing only with my mouse)

As you can guess this is what will happen
1) Tiny grey circle
2) When clicked...
3) ... a darker circle grows from behind the first circle (i want it to be not too fast so you can quickly see it growing)
4) Second circle have reached the size (maybe with a little eye candy, like bouncing on the predefined edge... I don't know how to explain that)
5 and 6) then three cicles appears and stop near the darker circle with their center linked to the center of the main circle

My explainations are messy, I wish I was better in English.

Anyway, I can't figure out how to make the second circle grow slowly and also how to make it appear behind the first circle. Once that passed, I think the rest will be simple... I hope

As I am a beginner, I don't expect and I don't want people who want to help me to give me the answer, but to give me clues on how to achieve that. This will be more interesting to figure out most of the thing by myself.

Thank you very much in advance for your answers !
Back to top
 
 
ekenei
Re: [noob] Creating a simple(?) animation with circles
Reply #1 - Apr 17th, 2010, 9:41pm  
Hey marcalexandre. I would say you should use an animation library such as Motionlib, ShapeTween, or Ani which use tweens (easing/smoothing equations) to do animations. Using these you can do it in about 25 lines or less. You can download motionlib at: http://ekeneijeoma.com/processing/motionlib/. For example to do the first animation you would write:

Code:

import ijeoma.motion.tween.*;

float circleX = 100;
float circleY = 100;

public float circleSize = 20;

//tweened variable must be public
public float darkCircleSize = 20;

int circleColor = color(191);
int darkCircleColor = color(95);

Tween t1;

void setup() {
  size(200,200);

  t1 = new Tween(this, "t1", "darkCircleSize: 30", 25);
  t1.setEasing(Tween.BOUNCE_EASE_OUT);
}

void draw() {
  background(255);

  noStroke();

  fill(darkCircleColor);
  ellipse(circleX, circleY, darkCircleSize, darkCircleSize);

  fill(circleColor);
  ellipse(circleX, circleY, circleSize, circleSize);
}

void mousePressed() {
  float dX = circleX - mouseX;
  float dY = circleY - mouseY;

  if(sqrt(sq(dX) + sq(dY)) < circleSize/2 ) {
    t1.play();
  }
}


You can look at the documentation and examples to see what else you can do with it.
Back to top
 
http://ekeneijeoma.com/processing/tween/
WWW  
Cedric
Re: [noob] Creating a simple(?) animation with circles
Reply #2 - Apr 18th, 2010, 12:59am  
this way might be ok, if you want to go for a static animation.
If you wish to have something more physic like, that reacts to your movement. I would recommend to also take a look at traer physics.
http://www.cs.princeton.edu/~traer/physics/random_arboretum/index.html
Especially this example is pretty close to what you want.
http://www.cs.princeton.edu/~traer/physics/
Back to top
 
... twitter.com/CedricKiefer
WWW CedricKiefer 9570393 CedricKiefer  
ekenei
Re: [noob] Creating a simple(?) animation with circles
Reply #3 - Apr 18th, 2010, 9:53am  
That's a great example too I hadn't seen that before. But I think it'd be easier for a beginner to start with non physics based animations.
Back to top
 
http://ekeneijeoma.com/processing/tween/
WWW  
marcalexandre
Re: [noob] Creating a simple(?) animation with circles
Reply #4 - May 25th, 2010, 2:43pm  
Hi everyone !

Sorry I forgot a bit about this post because I haven't put mail notifications on.
I just wanted to say I've run ekenei's code and this ie exactly what i wanted to have. I'll now read the documentation Cedric gave and ask you guys when i'll encounter some problems.

I agree that physics based stuffs may be a little  tricky for a beginner like me. I just did not realized that I'll need physics for that animation.
However, I'll just see if I can make it or not.

Thank very much again ! Stay tuned !
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›