Slick 2D Image move along with shape

Question

I am trying to move my image along with the shape so I can make the collider with the shape (some kind of space shooter) but my image does not move along with the circle I make for it. It dissapears to the next spawned circle instead of completing it's track towards the bottom of the screen (I want to make a vertical linear move from top to bottom but everytime another circle+image spawns, the previous circle goes down but the image spawns to the next circle and so on)

update method:

    timePassed+=delta;
    if(timePassed>700){
        timePassed=0;
        RandomInt = random.nextInt(400);
        gigis.add(new Circle(200+RandomInt,0,40));
        gigiSkin.add(new Image("img/gegi.png"));
    }

    for(Circle c: gigis){
        c.setCenterY(c.getCenterY()+(delta/6f));
        gigiY= c.getCenterY()+(delta/6f);
    }

    for(Circle c: bullets){
        c.setCenterY(c.getCenterY()-(delta/1.25f));
        projY = c.getCenterY()-(delta/1.5f);
    }

render method:

    for(Circle c: bullets){
        g.draw(c);
    }
    for(Image skin: bulletSkin){
        skin.draw(projX,projY,80,80);
    }

    g.setColor(Color.red);
    for(Circle c: gigis){
        g.draw(c);
    }
    for(Image skin: gigiSkin){
        skin.draw(200+RandomInt,gigiY,80,80);
    }
}

Answer 1

Your variables naming is a bit... bad, what is gegi or gigy exactly? This code is messy.

Instead of making data collections for: bullets, bulletSkin, gigiskin etc. you should consister object oriented way to write this code.

For example:

class Transform
{
   public float posX, posY;

   public void SetPosition(float posX, float posY)
   {
        this.posX = posX;
        this.posY = posY;
   }

   public Transform(float posX, float posY)
   {
      this.posX = posX;
      this.posY = posY;
   }
}

class Skin
{
   public Image skinImage;

   public int width, height;

   public void Draw(Transform gameObjectTransform)
   {
        skinImage.draw(gameObjectTransform.posX, gameObjectTransform.posY, width, height);
   }

   public Skin(Image skinImage, int width, int height)
   {
      this.skinImage = skinImage;
      this.width = width;
      this.height = height;
   }
}

class Bullet
{
   public Circle bulletCircle;
   public Skin bulletSkin;
   public Transform transform;

   public void Draw(Graphics g)
   {
        g.draw(bulletCircle);
        bulletSkin.Draw(transform); 
   }

   public Bullet(Circle bulletCircle, Image bulletSkinImage, int width, int height)
   {
      this.bulletCircle = bulletCircle;
      this.bulletSkin = new Skin(bulletSkinImage, with, height);
   }
}

Next you will able to:

for(Bullet b: bullets)
{
    b.transform.SetPos(someX, someY);
    b.Draw(g);
}

This looks more cleaner and OO.

After those changes your images will be rendered in circles positions, you can move circles and images will be moving with them.