Something like this?

1. float animationrate = 0.5; //or whatever...
2. PImage rightpill,leftpill,cure;
3. void setup(){
4.   //size,load images, etc
5. }
6. void draw(){
7.   background(127);
8.   if(mousePressed){
9.     popCapsule(); //run the popCapsule function
10.   } else {
11.     image(leftpill,x - leftpill.width,y); //display the left and
12.     image(rightpill,x,y); //right halves of the pill
13.   }
14. }
15. void popCapsule(){
16.   for(float offset = 0; offset < leftpill.width; offset += animationrate){ //animate the pill popping open
17.     image(cure,x - cure.width / 2,y); //display the ellipses
18.     image(leftpill,x - leftpill.width - offset,y); //with the pill halves over top of them
19.     image(rightpill,x + offset,y);
20.   }
21. }

Im guessing that if i want the three sections (left pill, right pill, cure) I need to cut up the image into three sections and then post them into the folder where i can call up all three with the load image code right?

for the "cure" to pour out would i need to make multiple copies of one "cure" ellipse or is there something in the code that does that for me ?

Yeah, that's what I would do.  You can certainly do the animation in other ways - only displaying part of the image, using animated GIFs, etc. - but this way is probably the easiest for a beginner.

For the cure, you could just use a for loop.  Say you want them spaced out by 20 pixels, from -20 from the center to 20 from the center.

for(int cureOffset = -20; cureOffset <= 20; cureOffset += 20){
  image(cure, cureOffset, y);
}

Once you've got something going, even if it's not working right, go ahead and post it here so we can work off of it.

Okay here is what i have so far. It says that there is an unexpected token on the "void draw"

float animationrate = 0.5;

PImage leftpill, rightpill,cure;
void setup(){
  size(400,400);
  leftpill = loadImage("leftpill.jpg");
  image(leftpill,0,0);                              // do i need to set a width and height in place of the zeros?
  rightpill= loadimage("rightpill.jpg");
image(rightpill, 0, 0);
 

void draw(){
background(127);
if(mousePressed){
  popCapsule(); //run the popCapsule function
  cure();
 }
 else {
   image(leftpill,x - leftpill.width,y); //display the left and
   image(rightpill,x,y); //right halves of the pill
  }
  }
 void popCapsule(){
   for(float offset = 0; offset < leftpill.width; offset += animationrate){ //animate the pill popping open
     image(cure,x - cure.width / 2,y); //display the ellipses
     image(leftpill,x - leftpill.width - offset,y); //with the pill halves over top of them
     image(rightpill,x + offset,y);
    }
  }
 
  void cure(){
    for(int cureOffset = -20; cureOffset <= 20; cureOffset += 20){
  image(cure, cureOffset, y);
}
  }

loadImage
with a big I - the second is wrong

at the end of
setup(){
missing }

do you have to declare x and y globally?

Hey jun.jk, any way you could explain what is happeneing within the statement

 void popCapsule(){
   for(float offset = 0; offset < leftpill.width; offset += animationrate){ //animate the pill popping open
     image(cure,x - cure.width / 2,y); //display the ellipses
     image(leftpill,x - leftpill.width - offset,y); //with the pill halves over top of them
     image(rightpill,x + offset,y);
    }
  }

I cant say i know how to read it with the "." and "offset"

I have yet to solve this issue, manly thanks to time constraints. jun.jk was on to something but i have some errors. I dont really know what "." means.. any suggestions?

Hi,

leftpill is a image - see this from this line:

1. PImage rightpill,leftpill,cure;

An image has different properties, e.g. its width and height.
Those properties you access with the "." between the image and its property:

1. leftpill.width

In the function popCapsule there's a loop which increases offset.
Since it increases the pills fly to the right.

Greetings, Chrisir