Help needed, Image get, put, copy? - Hex shape

Questions
1

I have two images, foreground and background. Foreground is a PNG and it is supposed to have some transparent areas, through which the background can be seen. I’m looking for an efficient way to cut or add hex shaped parts from/to the foreground so that it would appear like mining a tunnel into solid material.

I’ve thought of placing the image representing open space on top of solid material image and then adding small hexes to it while tunneling. These hexes would need to be copied from an original intact open space image so that they would appear seamless. However, image.copy can only handle rectagles. Should I then try to do this pixel by pixel? Or would it be feasible to get and put trasparent pixels into the copied rectangle, in order to shape it to a hex, before placing it to the foregroung image?

Any other approach to solve this? :slight_smile:

2

@Blaukkari Are you after something like this. Keep tapping the foreground image to reveal the background image. I used a square instead of a hex because I’m not sure if this is what you want. If it is, a hex could be used instead of the square.

displayMode(FULLSCREEN)

function setup()
    tab={}
    rectMode(CENTER)
    spriteMode(CORNER)    
    bkgrnd=readImage("Small World:Icon")
    frgrnd=readImage("Cargo Bot:Startup Screen")        

    mask=image(WIDTH,HEIGHT)        
    result=image(WIDTH,HEIGHT)            
    setContext(result)
    sprite(mask,0,0)
    blendMode(ONE_MINUS_DST_COLOR,ZERO)
    sprite(frgrnd,0,0,WIDTH,HEIGHT)
    blendMode(NORMAL)
    setContext() 
end

function draw()
    background(0)
    sprite(bkgrnd,0,0,WIDTH,HEIGHT)
    sprite(result,0,0 )
end

function touched(t)
    if t.state==BEGAN then
        table.insert(tab,vec2(t.x,t.y))        
    end
    if t.state==ENDED then
        collectgarbage()
        
        for a,b in pairs(tab) do
            setContext(mask)
            fill(255)
            rect(b.x,b.y,50,50)
            setContext()
        end  
        
        result=image(WIDTH,HEIGHT)  
        setContext(result)
        sprite(mask,0,0)
        blendMode(ONE_MINUS_DST_COLOR,ZERO)
        sprite(frgrnd,0,0,WIDTH,HEIGHT)
        blendMode(NORMAL)
        setContext() 
    end
end
3

Here’s the above code that uses a hexagon instead of a square. Change the value of size to change the hexagon size.

displayMode(FULLSCREEN)

function setup()
    size=50
    
    tab1={}
    for z=0,360,60 do
        table.insert(tab1,vec2(size+math.cos(math.rad(z))*size,
                size+math.sin(math.rad(z))*size))
    end
    m=mesh()
    m.vertices=triangulate(tab1)
    m:setColors(255,255,255)
    img=image(size*2,size*2)
    setContext(img)
    background(0,0,0,0)
    m:draw()
    setContext()
    
    tab={}
    rectMode(CENTER)
    spriteMode(CORNER)    
    bkgrnd=readImage("Small World:Icon")
    frgrnd=readImage("Cargo Bot:Startup Screen")        

    mask=image(WIDTH,HEIGHT)        
    result=image(WIDTH,HEIGHT)            
    setContext(result)
    sprite(mask,0,0)
    blendMode(ONE_MINUS_DST_COLOR,ZERO)
    sprite(frgrnd,0,0,WIDTH,HEIGHT)
    blendMode(NORMAL)
    setContext()     
end

function draw()
    background(0)
    sprite(bkgrnd,0,0,WIDTH,HEIGHT)
    sprite(result,0,0 )
end

function touched(t)
    if t.state==BEGAN then
        table.insert(tab,vec2(t.x,t.y))        
    end
    if t.state==ENDED then
        collectgarbage()
        
        for a,b in pairs(tab) do
            setContext(mask)
            sprite(img,b.x-size,b.y-size)
            setContext()
        end  
        
        result=image(WIDTH,HEIGHT)  
        setContext(result)
        sprite(mask,0,0)
        blendMode(ONE_MINUS_DST_COLOR,ZERO)
        sprite(frgrnd,0,0,WIDTH,HEIGHT)
        blendMode(NORMAL)
        setContext() 
    end
end
4

Thanks, @dave1707 :slight_smile: That seems to work nicely.

However, fill does not work with polygons, so I tried to use your rectangular approach by drawing a rect of 100x170 three times, while rotating 120degs after each rect.

I can make the first rect rotate, but it does not draw the other two :frowning: I made the frgrnd rotate though by trying other degree settings, not that I wanted it to.

Where should I place the rotates and additional two rects?

[edit: Actually I just realised, 60 degs twice would be the correct rotation]

5

@Blaukkari I guess I don’t understand exactly what you’re trying to do. I thought you have 2 images, a foreground and a background. Then you wanted to create hexagon shaped holes in the foreground image to show the background image through them. The polygon is a clear area and doesn’t need a fill color. Let me know what you want to do.

6

@dave1707, sorry… I did not see you second post before posting myself. Gotta check that out :slight_smile:

7

Thanks :slight_smile: This is exactly what I needed. Still a newbie, and was not able to envision mesh and blending together. Truly appreciated!