Splitting an image

Hey guys,

I was wondering if there is a method in corona or a plugin that let’s you take an image and split it in let’s say four(could be N number where N>= 2) equal pieces??

For example let’s say I have a 400x400 JPEG image, is it possible to split it into 4 100x100 images within an app?

Thank you.

Hi @farjadfarabi_czs,

Yes, this can be done in a couple ways which I can suggest:

  1. Create 4 containers of (say) 100x100, and insert the image inside each container, positioning it so that what the user sees is that “quadrant” of the image.

  2. Create 4 display objects (of the image) and apply a mask to each one, setting the mask position so that it reveals only the proper “quadrant”. This is similar to #1 and actually #1 would be easier (no mask image, etc.).

Brent

Wow, Containers. How did I not think of them…

Thanks a lot Brent.  :slight_smile:

i’ve done it using snapshots, no need to create containers. i slice a image with 64x64 or 128x128 with no trouble.

Hey carloscosta, do you mind kindly sharing your code??

I used containers and got success but not to the degree I wanted. 

Please share your method/code if possible. Thanks a lot :slight_smile:

here it is:

local function cutEffectCube(img,paramsIn) local params=paramsIn or {} local velocidade=params.vel or 1000 local atraso=params.delay or 0 local intervalo=params.intervalo or 500 local tempIntervalo=params.intervalo or 500 local alphaIn = params.alphaIn or 1 local alphaOut = params.alphaout or 1 local fatias=params.slices or 4 local dist=params.dist or 100 local distancia=params.distancia or 0 local efeito=params.easing or "linear" local mode=params.mode or "single" local direction=params.direction or "flat" local spread=params.spread or 0.3 local sizeX=params.sizeX or 300 local sizeY=params.sizeY or 300 local imagem=img or nil local snapshot={} local image = {} local tamanhoX=0 local tamanhoY=0 local transicoes={} local group=display.newGroup() if not imagem then print ("esta funcao precisa duma imagem para funcionar") return nil end for j=1, fatias do snapshot[j]={} image[j]={} for i=1, fatias do image[j][i]=display.newImageRect(imagem, sizeX, sizeY) tamanhoX=image[j][i].contentWidth\*(1/fatias) tamanhoY=image[j][i].contentHeight\*(1/fatias) snapshot[j][i] = display.newSnapshot(tamanhoX, tamanhoY ) snapshot[j][i].group:insert(image[j][i]) image[j][i].x=-((i\*tamanhoX)-tamanhoX)+image[j][i].contentWidth\*.5-tamanhoX\*.5 image[j][i].y=-(j\*tamanhoY-tamanhoY)+image[j][i].contentHeight\*.5-tamanhoY\*.5 snapshot[j][i].x=((i\*(tamanhoX+distancia))-tamanhoX\*.5)-image[1][1].contentWidth\*.5 snapshot[j][i].y=-dist+((j\*tamanhoY+distancia)-tamanhoY\*.5)-image[1][1].contentHeight\*.5 snapshot[j][i].alpha=alphaIn group:insert(snapshot[j][i]) snapshot[j][i]:invalidate() end end local function removeTrans(self) if self then transition.cancel(self) self=nil end end for j=1, fatias do transicoes[j]={} for i=1, fatias do snapshot[j][i]:invalidate() if mode=="single" then intervalo=intervalo+tempIntervalo else local tempIntervalo=params.intervalo intervalo=tempIntervalo\*i\*j end if direction=="flat" then transicoes[j][i]=transition.to(snapshot[j][i],{alpha=alphaOut,time=velocidade,delay=atraso+intervalo,y=((j\*tamanhoY)-tamanhoY\*.5)-image[1][1].contentHeight\*.5, transition=easing[efeito], onComplete=removeTrans}) elseif direction=="down" then snapshot[j][i].path.y1=0 snapshot[j][i].path.y2=-snapshot[j][i].contentHeight snapshot[j][i].path.y3=-snapshot[j][i].contentHeight snapshot[j][i].path.y4=0 snapshot[j][i].path.x1=0 snapshot[j][i].path.x2=-snapshot[j][i].contentHeight\*spread snapshot[j][i].path.x3=snapshot[j][i].contentHeight\*spread snapshot[j][i].path.x4=0 transicoes[j][i]=transition.to(snapshot[j][i].path,{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, x1=0,x2=0,x3=0,x4=0,y1=0,y2=0,y3=0,y4=0, onComplete=removeTrans}) transicoes[j][i]=transition.to(snapshot[j][i],{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, onComplete=removeTrans}) elseif direction=="up" then snapshot[j][i].path.y1=snapshot[j][i].contentHeight snapshot[j][i].path.y4=snapshot[j][i].contentHeight snapshot[j][i].path.x1=-snapshot[j][i].contentHeight\*spread snapshot[j][i].path.x4=snapshot[j][i].contentHeight\*spread transicoes[j][i]=transition.to(snapshot[j][i].path,{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, x1=0,x2=0,x3=0,x4=0,y1=0,y2=0,y3=0,y4=0, onComplete=removeTrans}) transicoes[j][i]=transition.to(snapshot[j][i],{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, onComplete=removeTrans}) elseif direction=="right" then snapshot[j][i].path.x4=-snapshot[j][i].contentWidth snapshot[j][i].path.x3=-snapshot[j][i].contentWidth snapshot[j][i].path.y4=-snapshot[j][i].contentWidth\*spread snapshot[j][i].path.y3=snapshot[j][i].contentWidth\*spread transicoes[j][i]=transition.to(snapshot[j][i].path,{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, x1=0,x2=0,x3=0,x4=0,y1=0,y2=0,y3=0,y4=0, onComplete=removeTrans}) transicoes[j][i]=transition.to(snapshot[j][i],{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, onComplete=removeTrans}) elseif direction=="left" then snapshot[j][i].path.x1=snapshot[j][i].contentWidth snapshot[j][i].path.x2=snapshot[j][i].contentWidth snapshot[j][i].path.y1=-snapshot[j][i].contentWidth\*spread snapshot[j][i].path.y2=snapshot[j][i].contentWidth\*spread transicoes[j][i]=transition.to(snapshot[j][i].path,{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, x1=0,x2=0,x3=0,x4=0,y1=0,y2=0,y3=0,y4=0, onComplete=removeTrans}) transicoes[j][i]=transition.to(snapshot[j][i],{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, onComplete=removeTrans}) end end end group.trans = transicoes group.images= image return group end --local cuts=cutEffectCube("image.jpg",{slices=8,vel=500,delay=0, intervalo=15, distancia=0, easing="outBack", sizeX=300, sizeY=300, alphaIn=0, alphaOut=1, dist=0, mode="single", direction="right"}) --local cuts=cutEffectCube("image.jpg",{slices=16,vel=500,delay=0, intervalo=10, distancia=0, easing="outBack", sizeX=300, sizeY=300, alphaIn=0, alphaOut=1, dist=0, mode="multi", direction="flat"}) --local cuts=cutEffectCube("image.jpg",{slices=16,vel=500,delay=0, intervalo=10, distancia=0, easing="outBack", sizeX=300, sizeY=300, alphaIn=0, alphaOut=1, dist=0, mode="single", direction="flat"}) local cuts=cutEffectCube("image.jpg",{slices=16,vel=500,delay=0, intervalo=10, distancia=0, easing="outBack", sizeX=300, sizeY=300, alphaIn=0, alphaOut=1, dist=0, mode="multi", direction="down"}) cuts.x=display.contentWidth\*.5 cuts.y=display.contentHeight\*.5

you have 4 examples how to use the function. just uncomment the line you want to try and comment all the others "local cuts=cutEffectCube()

you need an image for this function to work. in this case “image.jpg” in same directory where main.lua is.

Regards,

Carlos.

Thank you! 

Hi @farjadfarabi_czs,

Yes, this can be done in a couple ways which I can suggest:

  1. Create 4 containers of (say) 100x100, and insert the image inside each container, positioning it so that what the user sees is that “quadrant” of the image.

  2. Create 4 display objects (of the image) and apply a mask to each one, setting the mask position so that it reveals only the proper “quadrant”. This is similar to #1 and actually #1 would be easier (no mask image, etc.).

Brent

Wow, Containers. How did I not think of them…

Thanks a lot Brent.  :slight_smile:

i’ve done it using snapshots, no need to create containers. i slice a image with 64x64 or 128x128 with no trouble.

Hey carloscosta, do you mind kindly sharing your code??

I used containers and got success but not to the degree I wanted. 

Please share your method/code if possible. Thanks a lot :slight_smile:

here it is:

local function cutEffectCube(img,paramsIn) local params=paramsIn or {} local velocidade=params.vel or 1000 local atraso=params.delay or 0 local intervalo=params.intervalo or 500 local tempIntervalo=params.intervalo or 500 local alphaIn = params.alphaIn or 1 local alphaOut = params.alphaout or 1 local fatias=params.slices or 4 local dist=params.dist or 100 local distancia=params.distancia or 0 local efeito=params.easing or "linear" local mode=params.mode or "single" local direction=params.direction or "flat" local spread=params.spread or 0.3 local sizeX=params.sizeX or 300 local sizeY=params.sizeY or 300 local imagem=img or nil local snapshot={} local image = {} local tamanhoX=0 local tamanhoY=0 local transicoes={} local group=display.newGroup() if not imagem then print ("esta funcao precisa duma imagem para funcionar") return nil end for j=1, fatias do snapshot[j]={} image[j]={} for i=1, fatias do image[j][i]=display.newImageRect(imagem, sizeX, sizeY) tamanhoX=image[j][i].contentWidth\*(1/fatias) tamanhoY=image[j][i].contentHeight\*(1/fatias) snapshot[j][i] = display.newSnapshot(tamanhoX, tamanhoY ) snapshot[j][i].group:insert(image[j][i]) image[j][i].x=-((i\*tamanhoX)-tamanhoX)+image[j][i].contentWidth\*.5-tamanhoX\*.5 image[j][i].y=-(j\*tamanhoY-tamanhoY)+image[j][i].contentHeight\*.5-tamanhoY\*.5 snapshot[j][i].x=((i\*(tamanhoX+distancia))-tamanhoX\*.5)-image[1][1].contentWidth\*.5 snapshot[j][i].y=-dist+((j\*tamanhoY+distancia)-tamanhoY\*.5)-image[1][1].contentHeight\*.5 snapshot[j][i].alpha=alphaIn group:insert(snapshot[j][i]) snapshot[j][i]:invalidate() end end local function removeTrans(self) if self then transition.cancel(self) self=nil end end for j=1, fatias do transicoes[j]={} for i=1, fatias do snapshot[j][i]:invalidate() if mode=="single" then intervalo=intervalo+tempIntervalo else local tempIntervalo=params.intervalo intervalo=tempIntervalo\*i\*j end if direction=="flat" then transicoes[j][i]=transition.to(snapshot[j][i],{alpha=alphaOut,time=velocidade,delay=atraso+intervalo,y=((j\*tamanhoY)-tamanhoY\*.5)-image[1][1].contentHeight\*.5, transition=easing[efeito], onComplete=removeTrans}) elseif direction=="down" then snapshot[j][i].path.y1=0 snapshot[j][i].path.y2=-snapshot[j][i].contentHeight snapshot[j][i].path.y3=-snapshot[j][i].contentHeight snapshot[j][i].path.y4=0 snapshot[j][i].path.x1=0 snapshot[j][i].path.x2=-snapshot[j][i].contentHeight\*spread snapshot[j][i].path.x3=snapshot[j][i].contentHeight\*spread snapshot[j][i].path.x4=0 transicoes[j][i]=transition.to(snapshot[j][i].path,{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, x1=0,x2=0,x3=0,x4=0,y1=0,y2=0,y3=0,y4=0, onComplete=removeTrans}) transicoes[j][i]=transition.to(snapshot[j][i],{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, onComplete=removeTrans}) elseif direction=="up" then snapshot[j][i].path.y1=snapshot[j][i].contentHeight snapshot[j][i].path.y4=snapshot[j][i].contentHeight snapshot[j][i].path.x1=-snapshot[j][i].contentHeight\*spread snapshot[j][i].path.x4=snapshot[j][i].contentHeight\*spread transicoes[j][i]=transition.to(snapshot[j][i].path,{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, x1=0,x2=0,x3=0,x4=0,y1=0,y2=0,y3=0,y4=0, onComplete=removeTrans}) transicoes[j][i]=transition.to(snapshot[j][i],{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, onComplete=removeTrans}) elseif direction=="right" then snapshot[j][i].path.x4=-snapshot[j][i].contentWidth snapshot[j][i].path.x3=-snapshot[j][i].contentWidth snapshot[j][i].path.y4=-snapshot[j][i].contentWidth\*spread snapshot[j][i].path.y3=snapshot[j][i].contentWidth\*spread transicoes[j][i]=transition.to(snapshot[j][i].path,{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, x1=0,x2=0,x3=0,x4=0,y1=0,y2=0,y3=0,y4=0, onComplete=removeTrans}) transicoes[j][i]=transition.to(snapshot[j][i],{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, onComplete=removeTrans}) elseif direction=="left" then snapshot[j][i].path.x1=snapshot[j][i].contentWidth snapshot[j][i].path.x2=snapshot[j][i].contentWidth snapshot[j][i].path.y1=-snapshot[j][i].contentWidth\*spread snapshot[j][i].path.y2=snapshot[j][i].contentWidth\*spread transicoes[j][i]=transition.to(snapshot[j][i].path,{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, x1=0,x2=0,x3=0,x4=0,y1=0,y2=0,y3=0,y4=0, onComplete=removeTrans}) transicoes[j][i]=transition.to(snapshot[j][i],{alpha=alphaOut,time=velocidade,delay=atraso+intervalo, onComplete=removeTrans}) end end end group.trans = transicoes group.images= image return group end --local cuts=cutEffectCube("image.jpg",{slices=8,vel=500,delay=0, intervalo=15, distancia=0, easing="outBack", sizeX=300, sizeY=300, alphaIn=0, alphaOut=1, dist=0, mode="single", direction="right"}) --local cuts=cutEffectCube("image.jpg",{slices=16,vel=500,delay=0, intervalo=10, distancia=0, easing="outBack", sizeX=300, sizeY=300, alphaIn=0, alphaOut=1, dist=0, mode="multi", direction="flat"}) --local cuts=cutEffectCube("image.jpg",{slices=16,vel=500,delay=0, intervalo=10, distancia=0, easing="outBack", sizeX=300, sizeY=300, alphaIn=0, alphaOut=1, dist=0, mode="single", direction="flat"}) local cuts=cutEffectCube("image.jpg",{slices=16,vel=500,delay=0, intervalo=10, distancia=0, easing="outBack", sizeX=300, sizeY=300, alphaIn=0, alphaOut=1, dist=0, mode="multi", direction="down"}) cuts.x=display.contentWidth\*.5 cuts.y=display.contentHeight\*.5

you have 4 examples how to use the function. just uncomment the line you want to try and comment all the others "local cuts=cutEffectCube()

you need an image for this function to work. in this case “image.jpg” in same directory where main.lua is.

Regards,

Carlos.

Thank you!