# Arrange images in the order they are clicked in

**URL:** <https://discourse.processing.org/t/arrange-images-in-the-order-they-are-clicked-in/36653>\
**Category:** Processing.py\
**Created:** [April 30, 2022, 6:51am UTC](https://discourse.processing.org/t/arrange-images-in-the-order-they-are-clicked-in/36653 "2022-04-30T06:51:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![snakey](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@snakey](https://discourse.processing.org/u/snakey)\
**Post date:** [April 30, 2022, 6:51am UTC](https://discourse.processing.org/t/arrange-images-in-the-order-they-are-clicked-in/36653/1 "2022-04-30T06:51:28Z")

</div>

Hi! I’m a beginner and need help with this small project.

Right now I have a row of images (really just coloured boxes). When I click an image, it moves to a new location above the “collection point”. However, each image has its own fixed location.

What I am aiming to do is for the images to stack on top of each other according to the order they were clicked. For example, if I click the red image first, it appears at the bottom of the stack. I then click the green image and it appears above the red image.

I’m at a loss at how to begin to do this. Any help would be appreciated! Thank you!

This is my code:

```auto
def setup():
    global green, yellow, red, purple, blue
    global gx, gy, yx, yy, rx, ry, px, py, bx, by
    
    gx = 50
    gy = 50
    
    yx = 200
    yy = 50
    
    rx = 350
    ry = 50
    
    px = 500
    py = 50
    
    bx = 650
    by = 50
    
    p1 = False
    p2 = False
    p3 = False
    p4 = False
    p5 = False
    
    size(800, 600)
    
    green = loadImage("green.png")
    yellow = loadImage("yellow.png")
    red = loadImage("red.png")
    purple = loadImage("purple.png")
    blue = loadImage("blue.png")
    
def draw():
    
    background(255)
    
    fill(255, 0,0) #the reset button
    rect(100, 450, 150, 100)
    
    fill(0, 255, 255) #the collection point
    rect(400, 450, 300, 100)
    
    image(green, gx, gy)
    image(yellow, yx, yy)
    image(red, rx, ry)
    image(purple, px, py)
    image(blue, bx, by)
        
def mousePressed(m):
    global gx, gy, yx, yy, rx, ry, px, py, bx, by
    if 50 < m.x < 150 and 50 < m.y < 150: #green
        gx = 500
        gy = 400
    if 200 < m.x < 300 and 50 < m.y < 150: #yellow
        yx = 500
        yy = 350
    if 350 < m.x < 450 and 50 < m.y < 150: #red
        rx = 500
        ry = 300
    if 500 < m.x < 600 and 50 < m.y < 150: #purple
        px = 500
        py = 250
    if 650 < m.x < 750 and 50 < m.y < 150: #blue
        bx = 500
        by = 200
    
    if 100 < m.x < 250 and 450 < m.y < 550: #the reset button
        setup() #resets images to their original places
        

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 30, 2022, 7:52am UTC](https://discourse.processing.org/t/arrange-images-in-the-order-they-are-clicked-in/36653/2 "2022-04-30T07:52:20Z")

</div>

> [@snakey](#):
>
> I’m at a loss at how to begin to do this.

You should begin by creating a `class` to represent each image w/ all its coordinates, state and methods that deal w/ those data:

[py.Processing.org/tutorials/objects](https://py.processing.org/tutorials/objects/)

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [April 30, 2022, 8:03am UTC](https://discourse.processing.org/t/arrange-images-in-the-order-they-are-clicked-in/36653/3 "2022-04-30T08:03:51Z")

</div>

Use a [list](https://py.processing.org/reference/indexbrackets.html) to store your stack. Add the boxes to that list as you click them. Then use a loop to draw the stack of boxes from that list.

Here’s an example to illustrate. Note that you press letters on your keyboard to add them to the `stack` list (but you can apply the same idea to your `mousePressed()` setup).

```python
stack = []

def setup():
    size(50, 500)

def draw():
    background(255)
    # render the stack as boxes with letters
    for i, letter in enumerate(stack):
        noFill()
        square(0, height-50-i*50, 50)
        fill(0)
        text(letter, 22, height-50-i*50+30)

def keyPressed():
    global stack
    stack += key # add the key you pressed to the stack

```

The `enumerate()` function is useful for counting the position of each item in the `stack` list. I’ve used this as a multiplier for the y-coord of each box.

---

<div class="post-metadata">

**Author:** ![snakey](https://avatars.discourse-cdn.com/v4/letter/s/f19dbf/32.png) [@snakey](https://discourse.processing.org/u/snakey)\
**Post date:** [April 30, 2022, 10:26am UTC](https://discourse.processing.org/t/arrange-images-in-the-order-they-are-clicked-in/36653/4 "2022-04-30T10:26:50Z")

</div>

Thank you! I ended up doing something like this:

```auto
#other code stuff

for i, img in enumerate(stack):
        zx = 500
        zy = 400-100-i*100
        
def mousePressed(m):
    global stack
    global gx, gy, yx, yy, rx, ry, px, py, bx, by
    global zx, zy
    
    if 50 < m.x < 150 and 50 < m.y < 150: #green
        stack.append(image(green, gx, gy))
        gx = zx
        gy = zy
    if 200 < m.x < 300 and 50 < m.y < 150: #yellow, 500, 350
        stack.append(image(yellow, yx, yy))
        yx = zx
        yy = zy

#etc...

```