Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

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

edited May 2017 in Questions Posts: 4

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? :)

Comments

  • dave1707dave1707 Mod
    Posts: 7,057

    @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
    
  • dave1707dave1707 Mod
    Posts: 7,057

    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
    
  • edited May 2017 Posts: 4

    Thanks, @dave1707 :) 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 :( 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]

  • dave1707dave1707 Mod
    Posts: 7,057

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

  • Posts: 4

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

  • Posts: 4

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

Sign In or Register to comment.