Help with the use of "circle" kernels (by StarCrunch)

[maximo97]

Hi guys

I was playing with some kernels I found in an example of @StarCrunch.

So I’m trying to integrate it with an example code:

local function basic() --effetto che permette di mostrare gli oggetti non comprati completamente neri local kernel = {} kernel.language = "glsl" kernel.category = "filter" kernel.group = "circle" kernel.name = "basic" kernel.isTimeDependent = true kernel.fragment = [[#define SPHERE\_NO\_DISCARD P\_COLOR vec4 FragmentKernel (P\_UV vec2 uv) { uv = GetUV\_PhiDelta(2. \* uv - 1., -CoronaTotalTime / 7.); if (uv.s \< 0.) return vec4(0.); return CoronaColorScale(texture2D(CoronaSampler0, uv)); }]] graphics.defineEffect(kernel) end basic() -- -- local CX, CY = display.contentCenterX, display.contentCenterY -- local image = display.newCircle( CX, CY, 125) image.x, image.y = CX, CY image.fill = { type = "image", filename = "image.jpg" } image.fill.effect = "filter.circle.basic"

in this way my image becomes spherical but does not move.

I have two questions:

1. How to solve this

2. Is it possible to make the rotation depend on the user’s touch?

In the example picture I would like to see better what I mean:

in point 1, the user moves his finger to the right

in step 2, drag the finger downwards

I would like to work for every direction naturally

I know the question is a bit specific but I think it could serve others

[StarCrunch]

Hi. That “GetUV_PhiDelta” is actually another function of mine that you need. I have a registration step early on where you add shader building blocks and then the loader (which you’ll see used in the examples) does its best to stitch these together. This is the intermediate form.

This certainly isn’t perfect (I don’t trust my hand-crafted parser much, for one thing; I’m aware of a couple more dedicated alternatives but haven’t mustered the will to try to swap them out) but does give some power.

I’m actually hoping in the near future to start on a connect-the-nodes sort of shader editor, once I clean up some of the necessary bits from another project for reuse.

I ran the shader test code and printed the kernel it gave me:

#define FRAGMENT\_SHADER #define SPHERE\_NO\_DISCARD P\_UV float PI = 4. \* atan(1.); P\_UV float TWO\_PI = 8. \* atan(1.); P\_UV float PI\_OVER\_TWO = 2. \* atan(1.); P\_UV float ONE\_OVER\_PI = 1. / atan(1.); P\_UV float ONE\_OVER\_TWO\_PI = .5 / atan(1.); P\_POSITION vec2 GetUV\_PhiDelta (P\_POSITION vec2 diff, P\_POSITION float dphi) { P\_POSITION float dist\_sq = dot(diff, diff); #ifndef SPHERE\_NO\_DISCARD if (dist\_sq \> 1.) return vec2(-1.); #endif P\_POSITION float z = sqrt(1. - dist\_sq); P\_POSITION float phi = atan(z, diff.x); P\_POSITION float angle = .5 + phi / TWO\_PI; #ifdef SPHERE\_PINGPONG\_ANGLE angle = mod(angle + dphi, 2.); angle = mix(angle, 2. - angle, step(1., angle)); #else angle = fract(angle + dphi); #endif return vec2(angle, .5 + asin(diff.y) / PI); } P\_COLOR vec4 FragmentKernel (P\_UV vec2 uv) { uv = GetUV\_PhiDelta(2. \* uv - 1., -CoronaTotalTime / 7.); if (uv.s \< 0.) return vec4(0.); return CoronaColorScale(texture2D(CoronaSampler0, uv)); } 

Some of that is unused, since this is all code-generated and doesn’t have any cleanup-type logic.

The “phi” comes from spherical coordinates. The shader has a box whose coordinates go from 0 to 1, so the rest of the phi math follows from that.

For the left-to-right rotation case, you basically want to replace the CoronaTotalTime -based delta with your own input. Vertically, you would need to make this account for theta. In the samples for this plugin I have a control that might be a starting point for what you want. (Stuff along these lines was why I even bothered submitting it for a 2D framework!  :))

You’ll notice the obvious texture wrapping (common in samples like this). There are some difficulties in really getting nice-looking borders, basically since a flat rect can’t be distorted into a sphere.

[maximo97]

Hello.

First of all, thank you very much for your reply

I checked the different information you attached to me. All very interesting.

However, I took a while to understand everything.

I would have some new questions about it if you can answer.

Is it possible to pass a sphere instead of a rectangle imge, or maybe better two images of a sphere (in 1png i think) and to rotate it? or what is the best way to structure my images so that using the kernel looks like a real sphere…

Looking at the guides you have attached I think it would be good to use a sort of horizontal ellipsis, but surely you have more experience.

Then regarding the rotation based on the touch I saw your plugin and it looks great. Is there any particular example on which I should dwell?

[StarCrunch]

Hi.

The relevant example would be “objects”, in particular the trackball widget. (Just to make sure we mean the same thing, this is in the sample linked from the plugin docs.) You can drag around on that and it will affect itself a bit along with the animating object.

I’m not really sure there is a “best” way to do this, especially if you want arbitrary rotation. This is the same problem that produced so many different ways of map-making, after all.  In an actual 3-D environment you would usually use a mesh and stitch the surface together from several subregions of a texture. This sidesteps the issue since it’s only indirectly dealing with the sphere’s geometry.

What sort of objects do you have in mind?

[maximo97]

Hi!

Well actually my idea was pretty simple.

I have a set of balls that my artist has done in 3D, but for now I have always used them in 2D.

So my idea was to make them a little more 3D with this kernel.

I show you an example image:

I know that crown is strictly 2D but liked the idea of a shelf with 3D balls that the user could turn with the touch.

Do you think it’s a feasible thing?

Edit: I saw your last attachment, really spectacular!!  :o Congratulations

[StarCrunch]

Ah, cool. Is it a bowling game, then, or is that just one example among many?

I would say it’s feasible, yes, but will be MUCH easier if you only allow case #1, for the aforementioned reason that the image pinches at the poles.

Going back to your comment about “two images of a sphere”, there is a concept called cube mapping aimed at addressing these woes. It’s a 3-D thing, so as you might expect there’s no support for it in Corona. However, the OpenGL feature merely adds convenience and performance; the underlying details would go something like this. (If you saw “IQ” in any of my shader code, that comes from this fellow, quite an amazing demo developer and one of the authors of Shadertoy.)

Usually cubemaps are used as if you were inside the sphere looking out, but as Inigo’s page suggests, that’s not a hard rule. Instead you’d get your surface parameters from the sphere (I want to say phi and theta = .5 + asin(diff.y) / PI in my code correspond to his s and t , but would have to dig in to be sure) and then turn them back into texture coordinates. Since you won’t have an OpenGL cube map, you’d need to decide how your texture will be laid out, say as a 2 x 3 “sprite sheet” with border padding around each “frame”, and then figure out how to land in the appropriate one. I imagine this is a challenge to get working–definitely plugin potential, here–but would be great once it did!  :D 

Since we have Inigo’s pages fresh in mind…

If you have a very simple geometric shape like the ball above, you could probably make a kernel that does a very shallow raymarch, basically against a sphere minus three capsules or cylinders, i.e. the ball itself and the three finger holes. Example operations for this approach are here. Also see some of his absolutely insane examples.

Of course, if the ball doesn’t have basic colors or procedural patterns, the problems mentioned earlier would still be present here.

[maximo97]

Yes, a sort of  bowling seen from above was the initial idea.

However, I saw the various resources you have attached to me. And yes Inigo Quilez is really insane.

However, I’m good enough to understand that I’m not good enough for this mission.

I am still completing my university studies and I can not master how I would like some things.

I’m sorry but I’ll put this on pause and try later on as a challenge maybe.

Of course with a 3D program this would be very easy. But after all, someone will have worked on this for those programs. So I like understanding how it works

P.S. As always, I apologize for my bad English…

[StarCrunch]

Hi. That “GetUV_PhiDelta” is actually another function of mine that you need. I have a registration step early on where you add shader building blocks and then the loader (which you’ll see used in the examples) does its best to stitch these together. This is the intermediate form.

This certainly isn’t perfect (I don’t trust my hand-crafted parser much, for one thing; I’m aware of a couple more dedicated alternatives but haven’t mustered the will to try to swap them out) but does give some power.

I’m actually hoping in the near future to start on a connect-the-nodes sort of shader editor, once I clean up some of the necessary bits from another project for reuse.

I ran the shader test code and printed the kernel it gave me:

#define FRAGMENT\_SHADER #define SPHERE\_NO\_DISCARD P\_UV float PI = 4. \* atan(1.); P\_UV float TWO\_PI = 8. \* atan(1.); P\_UV float PI\_OVER\_TWO = 2. \* atan(1.); P\_UV float ONE\_OVER\_PI = 1. / atan(1.); P\_UV float ONE\_OVER\_TWO\_PI = .5 / atan(1.); P\_POSITION vec2 GetUV\_PhiDelta (P\_POSITION vec2 diff, P\_POSITION float dphi) { P\_POSITION float dist\_sq = dot(diff, diff); #ifndef SPHERE\_NO\_DISCARD if (dist\_sq \> 1.) return vec2(-1.); #endif P\_POSITION float z = sqrt(1. - dist\_sq); P\_POSITION float phi = atan(z, diff.x); P\_POSITION float angle = .5 + phi / TWO\_PI; #ifdef SPHERE\_PINGPONG\_ANGLE angle = mod(angle + dphi, 2.); angle = mix(angle, 2. - angle, step(1., angle)); #else angle = fract(angle + dphi); #endif return vec2(angle, .5 + asin(diff.y) / PI); } P\_COLOR vec4 FragmentKernel (P\_UV vec2 uv) { uv = GetUV\_PhiDelta(2. \* uv - 1., -CoronaTotalTime / 7.); if (uv.s \< 0.) return vec4(0.); return CoronaColorScale(texture2D(CoronaSampler0, uv)); } 

Some of that is unused, since this is all code-generated and doesn’t have any cleanup-type logic.

The “phi” comes from spherical coordinates. The shader has a box whose coordinates go from 0 to 1, so the rest of the phi math follows from that.

For the left-to-right rotation case, you basically want to replace the CoronaTotalTime -based delta with your own input. Vertically, you would need to make this account for theta. In the samples for this plugin I have a control that might be a starting point for what you want. (Stuff along these lines was why I even bothered submitting it for a 2D framework!  :))

You’ll notice the obvious texture wrapping (common in samples like this). There are some difficulties in really getting nice-looking borders, basically since a flat rect can’t be distorted into a sphere.

[maximo97]

Hello.

First of all, thank you very much for your reply

I checked the different information you attached to me. All very interesting.

However, I took a while to understand everything.

I would have some new questions about it if you can answer.

Is it possible to pass a sphere instead of a rectangle imge, or maybe better two images of a sphere (in 1png i think) and to rotate it? or what is the best way to structure my images so that using the kernel looks like a real sphere…

Looking at the guides you have attached I think it would be good to use a sort of horizontal ellipsis, but surely you have more experience.

Then regarding the rotation based on the touch I saw your plugin and it looks great. Is there any particular example on which I should dwell?

[StarCrunch]

Hi.

The relevant example would be “objects”, in particular the trackball widget. (Just to make sure we mean the same thing, this is in the sample linked from the plugin docs.) You can drag around on that and it will affect itself a bit along with the animating object.

I’m not really sure there is a “best” way to do this, especially if you want arbitrary rotation. This is the same problem that produced so many different ways of map-making, after all.  In an actual 3-D environment you would usually use a mesh and stitch the surface together from several subregions of a texture. This sidesteps the issue since it’s only indirectly dealing with the sphere’s geometry.

What sort of objects do you have in mind?

[maximo97]

Hi!

Well actually my idea was pretty simple.

I have a set of balls that my artist has done in 3D, but for now I have always used them in 2D.

So my idea was to make them a little more 3D with this kernel.

I show you an example image:

I know that crown is strictly 2D but liked the idea of a shelf with 3D balls that the user could turn with the touch.

Do you think it’s a feasible thing?

Edit: I saw your last attachment, really spectacular!!  :o Congratulations

[StarCrunch]

Ah, cool. Is it a bowling game, then, or is that just one example among many?

I would say it’s feasible, yes, but will be MUCH easier if you only allow case #1, for the aforementioned reason that the image pinches at the poles.

Going back to your comment about “two images of a sphere”, there is a concept called cube mapping aimed at addressing these woes. It’s a 3-D thing, so as you might expect there’s no support for it in Corona. However, the OpenGL feature merely adds convenience and performance; the underlying details would go something like this. (If you saw “IQ” in any of my shader code, that comes from this fellow, quite an amazing demo developer and one of the authors of Shadertoy.)

Usually cubemaps are used as if you were inside the sphere looking out, but as Inigo’s page suggests, that’s not a hard rule. Instead you’d get your surface parameters from the sphere (I want to say phi and theta = .5 + asin(diff.y) / PI in my code correspond to his s and t , but would have to dig in to be sure) and then turn them back into texture coordinates. Since you won’t have an OpenGL cube map, you’d need to decide how your texture will be laid out, say as a 2 x 3 “sprite sheet” with border padding around each “frame”, and then figure out how to land in the appropriate one. I imagine this is a challenge to get working–definitely plugin potential, here–but would be great once it did!  :D 

Since we have Inigo’s pages fresh in mind…

If you have a very simple geometric shape like the ball above, you could probably make a kernel that does a very shallow raymarch, basically against a sphere minus three capsules or cylinders, i.e. the ball itself and the three finger holes. Example operations for this approach are here. Also see some of his absolutely insane examples.

Of course, if the ball doesn’t have basic colors or procedural patterns, the problems mentioned earlier would still be present here.

[maximo97]

Yes, a sort of  bowling seen from above was the initial idea.

However, I saw the various resources you have attached to me. And yes Inigo Quilez is really insane.

However, I’m good enough to understand that I’m not good enough for this mission.

I am still completing my university studies and I can not master how I would like some things.

I’m sorry but I’ll put this on pause and try later on as a challenge maybe.

Of course with a 3D program this would be very easy. But after all, someone will have worked on this for those programs. So I like understanding how it works

P.S. As always, I apologize for my bad English…