Hi. I ended up needing to hurry and finish a few other things, and since then have been doing various travel and visiting. So I haven’t written any code this past week (at all), nor been online much. I was abruptly reminded of this thread by the blog, though! :P I’ll try to take a look again soon.
Sorry I’m late I was sure that I have answered the same day I saw the notification … :huh:
Thanks for the support I look forward to seeing a solution
Hello @StatCrunch
I wanted to know if you were able to produce some effective solution. I do not know maybe even some ploy without kernel …
As always I thank you in advance
Hi. I just worked out a little bit of the math assuming that the object had some thickness, and got a little bit farther:
--snap to use as a card or tile (Slightly larger to have the desidered border) local card = display.newSnapshot( 230, 230 ) card.x = display.contentCenterX card.y = display.contentCenterY --snap group local cardG = card.group --background (used as a card board) local bg = display.newRect( cardG, 0, 0, 200, 200 ) bg:setFillColor( 1, 1, 1, 0 ) bg.strokeWidth = 20 bg:setStrokeColor(.7, .7, .7, 1) --[[--hearts suit local hearts = display.newImageRect( cardG, "hearts.png", 60, 60 ) hearts.x = bg.x - (bg.width\*0.5) + (hearts.width\*0.5) + bg.strokeWidth --diamonds suit local diamonds = display.newImageRect( cardG, "diamonds.png", 60, 60 ) diamonds.x = bg.x + (bg.width\*0.5) - (diamonds.width\*0.5) - bg.strokeWidth --clubs suit local clubs = display.newImageRect( cardG, "clubs.png", 60, 60 ) clubs.y = bg.y - (bg.height\*0.5) + (clubs.height\*0.5) + bg.strokeWidth --spades suit local spades = display.newImageRect( cardG, "spades.png", 60, 60 ) spades.y = bg.y + (bg.height\*0.5) - (spades.height\*0.5) - bg.strokeWidth --centre of card local centre = display.newRect( cardG, 0, 0, 60, 60 )]] local cc=display.newImageRect(cardG, "cropped.png", bg.width, bg.height) cc.x, cc.y = bg.x, bg.y --button that serves the user to turn the card local rotateButton = display.newRect( 0, 0, 30, 50 ) rotateButton:setFillColor( 0, 1, 0 ) rotateButton.x = rotateButton.width rotateButton.y = display.contentCenterY --rotateButton touch event function rotateButton:touch( event ) if ( event.phase == "began" ) then display.getCurrentStage():setFocus(self, event.id) self.isFocus = true elseif(self.isFocus) then if event.phase == "moved" then --distance path with his finger by the user local distanceTraveled = (event.x-event.xStart) --distance in proportion to the width of the paper local distanceInProportion = (distanceTraveled/card.width)\*2 print(distanceInProportion) if(distanceInProportion \> 0) and (distanceInProportion \< 2) then --tilting the paper by changing the scale (old method) --card.xScale = 1-distanceInProportion --tilting the paper with the new effect --I multiplied by seven only to see the operation but do not understand how to calculate the right number card.fill.effect.t = distanceInProportion / 4--\*7 end elseif event.phase == "ended" or event.phase == "cancelled" then display.getCurrentStage():setFocus( self, nil ) self.isFocus = false end end return true end rotateButton:addEventListener( "touch" ) local kernel = { category = "filter", name = "rotate" } kernel.vertexData = { { index = 0, name = "t", default = 0 }, { index = 1, name = "thickness", default = .075 }, } kernel.fragment = [[const P\_UV float PI = 180.;//3.14159; const P\_UV float WIDTH = 13.; #define NPIXELS CoronaTexelSize.z \* WIDTH #define TO\_NEIGHBOR CoronaTexelSize.z \* 14. P\_UV float LessThan (P\_UV float threshold, P\_UV float x) { return step(abs(x), threshold); // 1.0 if true, 0.0 otherwise } P\_UV float MoreThan (P\_UV float threshold, P\_UV float x) { return step(-abs(x), threshold); // 1.0 if true, 0.0 otherwise (the negative just accounts for exactly equal values) } P\_UV float ProjectX (P\_UV float x, P\_UV float denom) { return .5 + (x - .5) / denom; } P\_UV float InBounds (P\_UV vec2 uv) { P\_UV vec2 from\_center = step(abs(uv - .5), vec2(.4875)); // 1.0 if inside [0, 1] along axis, 0.0 otherwise (done for x and y) return min(from\_center.x, from\_center.y); // If either is 0.0, we're out-of-bounds; otherwise we're inside } P\_COLOR vec4 FragmentKernel( P\_UV vec2 texCoord ) { P\_UV float angle = radians(CoronaVertexUserData.x \* 2. \* PI); P\_UV float cosa = cos(angle), sina = sin(angle), xcur = texCoord.x; P\_UV float denom = sign(cosa) \* max(abs(cosa), 1e-4); // avoid divides by 0 to avoid driver issues, etc. P\_UV float off\_edge = InBounds(texCoord); texCoord.x = ProjectX(texCoord.x, denom); P\_COLOR vec4 pixel = texture2D(CoronaSampler0, texCoord) \* off\_edge; P\_UV float neighbor\_x = texCoord.x - CoronaVertexUserData.y \* sina; // look a few pixels to the left or right (depending on angle and distance from sideways) P\_UV float at\_center\_and\_sideways = MoreThan(.9975, sina) \* LessThan(NPIXELS / 2., xcur - .5); // the multiply is basically an "and" // if both predicates return 1.0, it's 1.0 // otherwise it's 0.0 texCoord.x = mix(neighbor\_x, .5, at\_center\_and\_sideways); // "interpolate" (using our 0.0 or 1.0 result) to pick a value P\_COLOR vec4 neighbor = texture2D(CoronaSampler0, texCoord) \* InBounds(texCoord); return CoronaColorScale(mix(mix(vec4(0.), vec4(1., 0., 0., 1.), neighbor.a), pixel, pixel.a)); } ]] graphics.defineEffect(kernel) --Apply the new effect card.fill.effect = "filter.custom.rotate"
(You didn’t give me the images, so I took a screenshot and worked from there… you can restore that code, of course.)
Also I converted it to degrees in Lua, in case that’s more familiar to you (then converted back in the shader). I adjusted a couple other lines to make the touch do one spin.
It still looks a little weird at some angles, probably because the slab is only half the thickness (in the back). (This is a kernel parameter / CoronaVertexUserData.y , whose units are the fraction of the texture width.) The image needs to be offset a little to account for foreground thickness, which should be some similar computations. I’ll play around with it again at some point. At this point my mind is sort of stuck in shader land, but of course maybe somebody else has further ideas too. (One of the scene transitions looks a bit like this, for instance.)
THANK YOU
I thank you very much now really came out well, even I’ll try to make some modifications and other touches to use it. I also saw I quell effect is called flip if I’m not mistaken. However, for now your help is more than enough.
Thank you again for your time. I hope I can do the same for you one day. Sincere greetings