# Arrange images in the order they are clicked in

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:

``````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)

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

``````

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

Use a list 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).

``````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.

1 Like

Thank you! I ended up doing something like this:

``````#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...
``````
1 Like