Mirror flips on PNG Images - GameCreators Forum

Author

Message

damothegreat

User Banned

Posted: 1st Apr 2017 11:29 Edited at: 1st Apr 2017 11:31

If no one has any of these yet - then I'm going to create a handful of useful mirror flips on images

First one... Mirror Flipped and rotated

You will need a PNG file in the media folder called test.png

// Project: flip 
// Created: 2017-03-31

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "flip" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts

// Change this filename according to what you want and need to mirror flip
img = LoadImage("\media\test.png")

mainimage = CreateSprite(img)

flippedimage = createsprite( mirror_flip_rotated(LoadImage("\media\test.png" )))

do
    SetSpritePosition(mainimage, 300,100)
    
    SetSpritePosition(flippedimage, 100,100)

Print( ScreenFPS() )
    Sync()
loop

function mirror_flip_rotated(img as integer)
	
    memblockid = CreateMemblockFromImage (img)
    
    imgwidth = GetMemblockInt(memblockid, 0)
    imgheight = GetMemblockInt(memblockid, 4)
	size = GetMemblockSize(memblockid)
    
    memblocktoid = CreateMemblock(size)
	SetMemblockInt(memblocktoid, 0, imgwidth)
	SetMemblockInt(memblocktoid, 4, imgheight+1)
    SetMemblockInt(memblocktoid, 8, 32)

x=imgwidth *imgheight * 4
		
		offset=12
		for x=((imgwidth*imgheight)-1)*4 to 12 step -4
			r=GetMemblockByte(memblockid, offset)
			g=GetMemblockByte(memblockid, offset+1)
			b=GetMemblockByte(memblockid, offset + 2)
			a=GetMemblockByte(memblockid, offset + 3)
				
			setMemblockByte(memblocktoid, x,r)
			setMemblockByte(memblocktoid, x + 1,g)
			setMemblockByte(memblocktoid, x + 2,b)
			setMemblockByte(memblocktoid, x + 3,a)
	
			inc offset,4
			
	    next
     
    deleteimage (img)
     
    img = CreateImageFromMemblock(memblocktoid)
    DeleteMemblock(memblocktoid)

endfunction img

+ Code Snippet

// Project: flip 
// Created: 2017-03-31

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "flip" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts

// Change this filename according to what you want and need to mirror flip
img = LoadImage("\media\test.png")

mainimage = CreateSprite(img)

flippedimage = createsprite( mirror_flip_rotated(LoadImage("\media\test.png" )))

do
    SetSpritePosition(mainimage, 300,100)
    
    SetSpritePosition(flippedimage, 100,100)
    

    Print( ScreenFPS() )
    Sync()
loop

function mirror_flip_rotated(img as integer)
	
    memblockid = CreateMemblockFromImage (img)
    
    imgwidth = GetMemblockInt(memblockid, 0)
    imgheight = GetMemblockInt(memblockid, 4)
	size = GetMemblockSize(memblockid)
    
    memblocktoid = CreateMemblock(size)
	SetMemblockInt(memblocktoid, 0, imgwidth)
	SetMemblockInt(memblocktoid, 4, imgheight+1)
    SetMemblockInt(memblocktoid, 8, 32)
     

		x=imgwidth *imgheight * 4
		
		offset=12
		for x=((imgwidth*imgheight)-1)*4 to 12 step -4
			r=GetMemblockByte(memblockid, offset)
			g=GetMemblockByte(memblockid, offset+1)
			b=GetMemblockByte(memblockid, offset + 2)
			a=GetMemblockByte(memblockid, offset + 3)
				
			setMemblockByte(memblocktoid, x,r)
			setMemblockByte(memblocktoid, x + 1,g)
			setMemblockByte(memblocktoid, x + 2,b)
			setMemblockByte(memblocktoid, x + 3,a)
	
			inc offset,4
			
	    next
     
    deleteimage (img)
     
    img = CreateImageFromMemblock(memblocktoid)
    DeleteMemblock(memblocktoid)


endfunction img

Or just simply use spriteangle and spriteflip routines.

But I'm just seeing if I can program with memblocks!!

Shall write other over the course of the next week

Damo

Back to top

Profile

hakimfullmetal

9

Years of Service

User Offline

Joined: 17th Feb 2015

Location:

Posted: 1st Apr 2017 12:20

Link

This looks useful. Thanks

Back to top

Profile PM

damothegreat

User Banned

Posted: 1st Apr 2017 15:40

Link

Added another one

// Project: flip 
// Created: 2017-03-31

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "flip" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts

type _flippedimages
	image as integer
	text as integer
endtype
global flippedimages as _flippedimages[2] // 2 images at moment, more to come

filename$="\media\test.png"

flippedimages[0].image = CreateSprite(LoadImage(filename$))
flippedimages[1].image = createsprite( mirror_flip_rotated(LoadImage(filename$)))
flippedimages[2].image = createsprite( mirror_flip_left_right(LoadImage(filename$)))

flippedimages[0].text = CreateText("Main Image") : SetTextSize(flippedimages[0].image,20)
flippedimages[1].text = CreateText("Mirror Rotation-Flip") : SetTextSize(flippedimages[1].image,20)
flippedimages[2].text = CreateText("Mirror Left-Right") : SetTextSize(flippedimages[2].image,20)

T1 = CreateText("Main Image") : SetTextSize(t1,20)

do
	
	for loops=0 to flippedimages.length
		SetTextPosition(flippedimages[loops].text, 10 + (loops * GetTextTotalWidth(flippedimages[loops].text) * 2), 100)
		
		
	    SetSpritePosition(flippedimages[loops].image, 10+(loops * GetTextTotalWidth(flippedimages[loops].text)*2),130)
    
    next

Print( ScreenFPS() )
    Sync()
loop

function mirror_flip_left_right(img as integer)
	
    memblockid = CreateMemblockFromImage (img)
    
    imgwidth = GetMemblockInt(memblockid, 0)
    imgheight = GetMemblockInt(memblockid, 4)
	size = GetMemblockSize(memblockid)
    
    memblocktoid = CreateMemblock(size)
	SetMemblockInt(memblocktoid, 0, imgwidth)
	SetMemblockInt(memblocktoid, 4, imgheight)
    SetMemblockInt(memblocktoid, 8, 32)
         
     picx=(imgwidth*4)
	offset=12
		for y=1 to imgheight-2 step 1
			for x=1 to (imgwidth-2)*4 
				r=GetMemblockByte(memblockid, (offset + ((y * (imgwidth))*4) + x))
				g=GetMemblockByte(memblockid, (offset + ((y * (imgwidth))*4) + x+1))
				b=GetMemblockByte(memblockid, (offset + ((y * (imgwidth))*4) + x + 2))
				a=GetMemblockByte(memblockid, (offset + ((y * (imgwidth))*4) + x + 3))
				
				
				
				setMemblockByte(memblocktoid, (offset + ((y * (imgwidth))*4)) +picx, r)
				setMemblockByte(memblocktoid, (offset + ((y * (imgwidth))*4)) +picx+1,g)
				setMemblockByte(memblocktoid, (offset + ((y * (imgwidth))*4)) +picx + 2,b)
				setMemblockByte(memblocktoid, (offset + ((y * (imgwidth))*4)) +picx + 3,a)
				picx=((imgwidth*4)-x) 
				
			next

picx=(imgwidth *4)

next
    deleteimage (img)
     
    img = CreateImageFromMemblock(memblocktoid)
    DeleteMemblock(memblocktoid)

endfunction img

function mirror_flip_rotated(img as integer)
	
    memblockid = CreateMemblockFromImage (img)
    
    imgwidth = GetMemblockInt(memblockid, 0)
    imgheight = GetMemblockInt(memblockid, 4)
	size = GetMemblockSize(memblockid)
    
    memblocktoid = CreateMemblock(size)
	SetMemblockInt(memblocktoid, 0, imgwidth)
	SetMemblockInt(memblocktoid, 4, imgheight+1)
    SetMemblockInt(memblocktoid, 8, 32)

x=imgwidth *imgheight * 4
		
		offset=12
		for x=((imgwidth*imgheight)-1)*4 to 12 step -4
			r=GetMemblockByte(memblockid, offset)
			g=GetMemblockByte(memblockid, offset+1)
			b=GetMemblockByte(memblockid, offset + 2)
			a=GetMemblockByte(memblockid, offset + 3)
				
			setMemblockByte(memblocktoid, x,r)
			setMemblockByte(memblocktoid, x + 1,g)
			setMemblockByte(memblocktoid, x + 2,b)
			setMemblockByte(memblocktoid, x + 3,a)
	
			inc offset,4
			
	    next
     
    deleteimage (img)
     
    img = CreateImageFromMemblock(memblocktoid)
    DeleteMemblock(memblocktoid)

endfunction img

+ Code Snippet


// Project: flip 
// Created: 2017-03-31

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "flip" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts

type _flippedimages
	image as integer
	text as integer
endtype
global flippedimages as _flippedimages[2] // 2 images at moment, more to come

filename$="\media\test.png"

flippedimages[0].image = CreateSprite(LoadImage(filename$))
flippedimages[1].image = createsprite( mirror_flip_rotated(LoadImage(filename$)))
flippedimages[2].image = createsprite( mirror_flip_left_right(LoadImage(filename$)))

flippedimages[0].text = CreateText("Main Image") : SetTextSize(flippedimages[0].image,20)
flippedimages[1].text = CreateText("Mirror Rotation-Flip") : SetTextSize(flippedimages[1].image,20)
flippedimages[2].text = CreateText("Mirror Left-Right") : SetTextSize(flippedimages[2].image,20)


T1 = CreateText("Main Image") : SetTextSize(t1,20)


do
	
	for loops=0 to flippedimages.length
		SetTextPosition(flippedimages[loops].text, 10 + (loops * GetTextTotalWidth(flippedimages[loops].text) * 2), 100)
		
		
	    SetSpritePosition(flippedimages[loops].image, 10+(loops * GetTextTotalWidth(flippedimages[loops].text)*2),130)
    
    next
    

    Print( ScreenFPS() )
    Sync()
loop

function mirror_flip_left_right(img as integer)
	
    memblockid = CreateMemblockFromImage (img)
    
    imgwidth = GetMemblockInt(memblockid, 0)
    imgheight = GetMemblockInt(memblockid, 4)
	size = GetMemblockSize(memblockid)
    
    memblocktoid = CreateMemblock(size)
	SetMemblockInt(memblocktoid, 0, imgwidth)
	SetMemblockInt(memblocktoid, 4, imgheight)
    SetMemblockInt(memblocktoid, 8, 32)
         
     picx=(imgwidth*4)
	offset=12
		for y=1 to imgheight-2 step 1
			for x=1 to (imgwidth-2)*4 
				r=GetMemblockByte(memblockid, (offset + ((y * (imgwidth))*4) + x))
				g=GetMemblockByte(memblockid, (offset + ((y * (imgwidth))*4) + x+1))
				b=GetMemblockByte(memblockid, (offset + ((y * (imgwidth))*4) + x + 2))
				a=GetMemblockByte(memblockid, (offset + ((y * (imgwidth))*4) + x + 3))
				
				
				
				setMemblockByte(memblocktoid, (offset + ((y * (imgwidth))*4)) +picx, r)
				setMemblockByte(memblocktoid, (offset + ((y * (imgwidth))*4)) +picx+1,g)
				setMemblockByte(memblocktoid, (offset + ((y * (imgwidth))*4)) +picx + 2,b)
				setMemblockByte(memblocktoid, (offset + ((y * (imgwidth))*4)) +picx + 3,a)
				picx=((imgwidth*4)-x) 
				
			next
				

			picx=(imgwidth *4)

			
     next
    deleteimage (img)
     
    img = CreateImageFromMemblock(memblocktoid)
    DeleteMemblock(memblocktoid)


endfunction img



function mirror_flip_rotated(img as integer)
	
    memblockid = CreateMemblockFromImage (img)
    
    imgwidth = GetMemblockInt(memblockid, 0)
    imgheight = GetMemblockInt(memblockid, 4)
	size = GetMemblockSize(memblockid)
    
    memblocktoid = CreateMemblock(size)
	SetMemblockInt(memblocktoid, 0, imgwidth)
	SetMemblockInt(memblocktoid, 4, imgheight+1)
    SetMemblockInt(memblocktoid, 8, 32)
     

		x=imgwidth *imgheight * 4
		
		offset=12
		for x=((imgwidth*imgheight)-1)*4 to 12 step -4
			r=GetMemblockByte(memblockid, offset)
			g=GetMemblockByte(memblockid, offset+1)
			b=GetMemblockByte(memblockid, offset + 2)
			a=GetMemblockByte(memblockid, offset + 3)
				
			setMemblockByte(memblocktoid, x,r)
			setMemblockByte(memblocktoid, x + 1,g)
			setMemblockByte(memblocktoid, x + 2,b)
			setMemblockByte(memblocktoid, x + 3,a)
	
			inc offset,4
			
	    next
     
    deleteimage (img)
     
    img = CreateImageFromMemblock(memblocktoid)
    DeleteMemblock(memblocktoid)


endfunction img

Damo

Back to top

Profile

Phaelax

DBPro Master

21

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 1st Apr 2017 15:52 Edited at: 1st Apr 2017 15:55

Link

Why grab each channel as 4 separate bytes when you can simplify it with a single integer?

+ Code Snippet

c = GetMemblockInt(memblockid, offset)
SetMemblockInt(memblocktoid, x, c)

I tried your second demo, it's just crashes for me.

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Back to top

Profile PM Email Website

damothegreat

User Banned

Posted: 1st Apr 2017 16:03

Link

Thanks - ill adjust the code accordingly

How is it crashing. Coming up with an error at all?

Mine Is ok

Back to top

Profile

Phaelax

DBPro Master

21

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 1st Apr 2017 17:24 Edited at: 1st Apr 2017 17:39

Link

It might be on my end. I'm getting a lot of weird, inconsistent crashes on my demo now. I've restarted AppGameKit and it hasn't helped for some reason. I made a function that adds a reflection to the bottom of the image. Only *real* bug I see in my code is a slight misalignment of some pixels. Ok, 2 bugs. I can't call my function more than once. Calling it a second time just returns a black image and I haven't a clue why.

fade# = 0.7
myImage = LoadImage("\media\thundercats.jpg")
mySprite = createSprite(createReflectedImage(myImage, fade#))

Type MyDemo
	time as integer
	delay as float
	c1 as integer
	c2 as integer
	c as integer
EndType

demo as MyDemo[4]

for i = 0 to 3
	demo[i].time = getMilliseconds()
	demo[i].delay = random(3000,7000)
	demo[i].c1 = makeColor(random(0,255),random(0,255),random(0,255))
	demo[i].c2 = makeColor(random(0,255),random(0,255),random(0,255))
next i

do
	render()

// randomize background
	ms = getMilliseconds()
	
	for i = 0 to 3
		t# = (ms - demo[i].time) / demo[i].delay
		demo[i].c = getColor(demo[i].c1, demo[i].c2, t#)
		
		if t# >= 1
			demo[i].time = ms
			demo[i].delay = random(3000,7000)
			demo[i].c1 = demo[i].c2
			demo[i].c2 = makeColor(random(0,255),random(0,255),random(0,255))
		endif
	next i

drawBox(1,1,1280,720, demo[0].c,demo[1].c,demo[2].c,demo[3].c, 1)
	
	
	
	// position reflection sprite
	setSpritePosition(mySprite, getRawMouseX(), getRawMouseY())
	
	if getRawKeyState(40)
		fade# = fade# - 0.01
		if fade# < 0 then fade# = 0
		setSpriteImage(mySprite, createReflectedImage(myImage, fade#))
	endif
	
	if getRawKeyState(38)
		fade# = fade# + 0.01
		if fade# > 1 then fade# = 1
		setSpriteImage(mySprite, createReflectedImage(myImage, fade#))
	endif
	
	
	print("Fade: "+str(fade#))

Render2DFront()
    Sync()
loop

function getColor(c1, c2, t#)
	r = (c1 && 16711680) >> 16
	g = (c1 && 65280) >> 8
	b =  c1 && 255
	r2 = (c2 && 16711680) >> 16
	g2 = (c2 && 65280) >> 8
	b2 =  c2 && 255
	a = 255
	
	r = r + (r2-r)*t#
	g = g + (g2-g)*t#
	b = b + (b2-b)*t#
	
	c = (a << 24) + (b << 16) + (g << 8) + r
endfunction c
 
 
 
function createReflectedImage(imageId, rt#)
	source  = createMemblockFromImage(imageId)
	width   = getMemblockInt(imageId, 0)
	height  = getMemblockInt(imageId, 4)
	height2 = height*rt#
	size    = width * (height+height2) * 4 + 12
	
	id = createMemblock(size)
	setMemblockInt(id, 0, width)
	setMemblockInt(id, 4, height+height2)
	copyMemblock(source, id, 12, 12, width*height*4)
	
	offset = width*height*4+12

sy = height
	for y = height2-1 to 0 step -1
		for x = 0 to width-1
			sPos = (sy*width + x)*4
			`t# = y/(height2-1.0)
			t# = (y*0.7)/(height2-1)

r = getMemblockByte(source, sPos)
			g = getMemblockByte(source, sPos+1)
			b = getMemblockByte(source, sPos+2)
			a = getMemblockByte(source, sPos+3) * t#
			
			pos = ((height2-y)*width + x)*4 + offset
			setMemblockByte(id, pos, r)
			setMemblockByte(id, pos+1, g)
			setMemblockByte(id, pos+2, b)
			setMemblockByte(id, pos+3, a)
		next x
		dec sy
	next y
	
	
	img = createImageFromMemblock(id)
	deleteMemblock(source)
	deleteMemblock(id)
endfunction img

+ Code Snippet

fade# = 0.7
myImage = LoadImage("\media\thundercats.jpg")
mySprite = createSprite(createReflectedImage(myImage, fade#))



Type MyDemo
	time as integer
	delay as float
	c1 as integer
	c2 as integer
	c as integer
EndType

demo as MyDemo[4]

for i = 0 to 3
	demo[i].time = getMilliseconds()
	demo[i].delay = random(3000,7000)
	demo[i].c1 = makeColor(random(0,255),random(0,255),random(0,255))
	demo[i].c2 = makeColor(random(0,255),random(0,255),random(0,255))
next i

do
	render()

	// randomize background
	ms = getMilliseconds()
	
	for i = 0 to 3
		t# = (ms - demo[i].time) / demo[i].delay
		demo[i].c = getColor(demo[i].c1, demo[i].c2, t#)
		
		if t# >= 1
			demo[i].time = ms
			demo[i].delay = random(3000,7000)
			demo[i].c1 = demo[i].c2
			demo[i].c2 = makeColor(random(0,255),random(0,255),random(0,255))
		endif
	next i

	drawBox(1,1,1280,720, demo[0].c,demo[1].c,demo[2].c,demo[3].c, 1)
	
	
	
	// position reflection sprite
	setSpritePosition(mySprite, getRawMouseX(), getRawMouseY())
	
	if getRawKeyState(40)
		fade# = fade# - 0.01
		if fade# < 0 then fade# = 0
		setSpriteImage(mySprite, createReflectedImage(myImage, fade#))
	endif
	
	if getRawKeyState(38)
		fade# = fade# + 0.01
		if fade# > 1 then fade# = 1
		setSpriteImage(mySprite, createReflectedImage(myImage, fade#))
	endif
	
	
	print("Fade: "+str(fade#))
 

    Render2DFront()
    Sync()
loop


function getColor(c1, c2, t#)
	r = (c1 && 16711680) >> 16
	g = (c1 && 65280) >> 8
	b =  c1 && 255
	r2 = (c2 && 16711680) >> 16
	g2 = (c2 && 65280) >> 8
	b2 =  c2 && 255
	a = 255
	
	r = r + (r2-r)*t#
	g = g + (g2-g)*t#
	b = b + (b2-b)*t#
	
	c = (a << 24) + (b << 16) + (g << 8) + r
endfunction c
 
 
 
function createReflectedImage(imageId, rt#)
	source  = createMemblockFromImage(imageId)
	width   = getMemblockInt(imageId, 0)
	height  = getMemblockInt(imageId, 4)
	height2 = height*rt#
	size    = width * (height+height2) * 4 + 12
	
	id = createMemblock(size)
	setMemblockInt(id, 0, width)
	setMemblockInt(id, 4, height+height2)
	copyMemblock(source, id, 12, 12, width*height*4)
	
	offset = width*height*4+12
	

	sy = height
	for y = height2-1 to 0 step -1
		for x = 0 to width-1
			sPos = (sy*width + x)*4
			`t# = y/(height2-1.0)
			t# = (y*0.7)/(height2-1)

			r = getMemblockByte(source, sPos)
			g = getMemblockByte(source, sPos+1)
			b = getMemblockByte(source, sPos+2)
			a = getMemblockByte(source, sPos+3) * t#
			
			pos = ((height2-y)*width + x)*4 + offset
			setMemblockByte(id, pos, r)
			setMemblockByte(id, pos+1, g)
			setMemblockByte(id, pos+2, b)
			setMemblockByte(id, pos+3, a)
		next x
		dec sy
	next y
	
	
	img = createImageFromMemblock(id)
	deleteMemblock(source)
	deleteMemblock(id)
endfunction img

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Back to top

Profile PM Email Website

damothegreat

User Banned

Posted: 1st Apr 2017 17:50

Link

Wow that's cool, cheers

Even a 2nd / 3rd or even 4th calls into different integer variables, doesn't return a black area

Works fine and dandy on my setup

Back to top

Profile

damothegreat

User Banned

Posted: 1st Apr 2017 17:53

Link

Your first example worked.. - you must have reposted some code

This example doesn't work (like you said)..

Let me check it out

Back to top

Profile

Sorry your browser is not supported!

Newcomers AppGameKit Corner / Mirror flips on PNG Images