Arrange images in the order they are clicked in

Processing.py
1

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

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

3

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
4

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