One of the projects I'm working on requires a splatter effect where by the user can wipe the slime off the screen.
My first attempt (plan on having a few attempts to find the best approach, next I'll try using particles) is using CoreGraphics where by I have a splatter image that I'm scaling up until its mostly filling the screen.
Now; I have the image there, rendered to a CALayer - my question is... How do I go about smudging the image around when the user drags their finger across the screen?
The current solution I have in mind is to obtain the images raw data and applying some type of gaussian blur effect to the surrounding pixels (but sounds heavy weight and slow). Any suggestions, tips will be much appreciated.
One of the projects I'm working on requires a splatter effect where by the user can wipe the slime off the screen.
My first attempt (plan on having a few attempts to find the best approach, next I'll try using particles) is using CoreGraphics where by I have a splatter image that I'm scaling up until its mostly filling the screen.
Now; I have the image there, rendered to a CALayer - my question is... How do I go about smudging the image around when the user drags their finger across the screen?
The current solution I have in mind is to obtain the images raw data and applying some type of gaussian blur effect to the surrounding pixels (but sounds heavy weight and slow). Any suggestions, tips will be much appreciated.
Cheers
A few months back, I had to code something similar and the only way I could get it to perform was to use OpenGL ES.
Here is a little demo ( a concept of proof - it supports two erasing modes : - "drop shadow" and "scratch mode" )
It runs around 40-50 fps on the older iphone.
A few months back, I had to code something similar and the only way I could get it to perform was to use OpenGL ES.
Here is a little demo ( a concept of proof - it supports two erasing modes : - "drop shadow" and "scratch mode" )
It runs around 40-50 fps on the older iphone.
Any hints on how you went about this? Also; any ideas of how you would get a smudging effect ie instead of clearing the area you move them with the finger (if that makes sense)?
Any hints on how you went about this? Also; any ideas of how you would get a smudging effect ie instead of clearing the area you move them with the finger (if that makes sense)?
I am not entirely sure what do you mean by a smudging effect.
If you mean true real-time transformations ( the way Photoshop handles Smudge Tool) then there is not much choice but doing it on the CPU which would be slow (mostly because you would have to reupload the resulting texture on every frame).
The way I handed it was to render to texture a black/white mask in response to user actions and use the mask texture as an alpha image when rendering two textures ( the background and the foreground.) to the screen.
I am not sure how would it work for you, but theoretically you could have two versions of the same image, one containing your pristine image and another a smudged version of it and use the same approach to mask them based on user input.
Another way would be to use a grid approach - which is essentially an image rendered on a grid of quads and then get the desired effect by manipulating quad coordinates.
Given dense enough mesh, it works fine for all kinds of image transformations.
Here is an example ( using low res grid designed for a specific effect - you would have to use denser mesh)
I've experimented around with particles and your suggestion, which appears to the the better out of the two, the only issue I'm coming across is that I've connecting the grids together (tile above and left to each one) and applying a spring type physics to hold them together but obviously when they start moving you see gaps in the image.
I'm thinking possibly scaling each tile when the distance between 1 tile is greater than it's resting length. ... ???
I'm assuming you've connected your grid in the same way (previous col and previous row) but instead of having them spring together you have them fixed to one another - is this right?
I'm assuming you've connected your grid in the same way (previous col and previous row) but instead of having them spring together you have them fixed to one another - is this right?
Appreciate your help,
Josh
Yeah, all you need to do is to create your grid with X*Y # of vertices and then use indices to build your triangle array.
In other words, don't duplicate shared corner vertices.
Ah.... I was a bit (a fair bit) off your approach, I actually ended up creating a grid of quads (sounds stupid now when you think about it) and spread the texture across them.
I did consider this (creating a mesh - going off the waving flag example from the book OpenGL Game programming) but not sure how you go about picking vertices (via touch). Also not sure how I would go about restoring the mesh back to its previous state.... Whats my chances for a bit of help?
Ah.... I was a bit (a fair bit) off your approach, I actually ended up creating a grid of quads (sounds stupid now when you think about it) and spread the texture across them.
I did consider this (creating a mesh - going off the waving flag example from the book OpenGL Game programming) but not sure how you go about picking vertices (via touch). Also not sure how I would go about restoring the mesh back to its previous state.... Whats my chances for a bit of help?
I generally keep 2 sets of grids ... one is just a const reference and the other one is populated on every frame using some sort of algorithm and then displayed.
In other words, think of your grid transformations as a displacement from the original position and not as an absolute value.
In fact sometimes I even keep 3 copies of the grid ... one is the original undisturbed grid , the other is a transformed version of the same grid ( you could precalculate whatever transformations you want - and since it is done only once , it doesn't matter if it is fast)
Once you got that in place ... you can animate their transformation by simply interpolating positions between grid 1 and grid 2 and then writing the value to the final grid 3 ( which gets displayed.)
That effect looked pretty sweet. If you are using opengl, I suppose one way is to alter the pixels of a the slime texture's alpha channel and update it as necessary, no idea if you'd get 60 fps though.
To make the slime seem to move, you can alter the opengl texture matrix
A few months back, I had to code something similar and the only way I could get it to perform was to use OpenGL ES.
Here is a little demo ( a concept of proof - it supports two erasing modes : - "drop shadow" and "scratch mode" ) It runs around 40-50 fps on the older iphone.
I generally keep 2 sets of grids ... one is just a const reference and the other one is populated on every frame using some sort of algorithm and then displayed.
In other words, think of your grid transformations as a displacement from the original position and not as an absolute value.
In fact sometimes I even keep 3 copies of the grid ... one is the original undisturbed grid , the other is a transformed version of the same grid ( you could precalculate whatever transformations you want - and since it is done only once , it doesn't matter if it is fast)
Once you got that in place ... you can animate their transformation by simply interpolating positions between grid 1 and grid 2 and then writing the value to the final grid 3 ( which gets displayed.)
[/url]
First off - thanks again warmi for all your help.
So I've created my mesh, wrapped a texture around it, and now allowing the user to manipulate/pull each vertex. Each vertex is connected with its neighbor and has some simple spring dynamics associated it.
... Getting closer but not quite the effect I need - any ideas on how to get it to behave more like goo? The selected vertex is automatically de-selected after 1/3 of a second because too much movement created a very deformed image. I've tried adding different weights to the inner nodes with little success.
Be great to hear your (and everyone elses) thoughts on how to make it behave more like goo.
Can you think of any technique that I could use that would give it more of a goo feel? I'm thinking maybe repelling the vertices where the user touches.
Thinking if I push out vertices, which should resolve the folding look, it should look more like goo...
Yeah it does look like goo.... I would try to perhaps use a second grid with some kind of blending applied (perhaps alpha/ or maybe addictive) moving in a slightly different direction and perhaps with different grid resolution ...
Don't know if that would look better, just throwing out some ideas ... with GLES 1.x you are pretty much limited to hacks like these.
Thinking if I push out vertices, which should resolve the folding look, it should look more like goo...
Quote:
Originally Posted by warmi
Yeah it does look like goo.... I would try to perhaps use a second grid with some kind of blending applied (perhaps alpha/ or maybe addictive) moving in a slightly different direction and perhaps with different grid resolution ...
Don't know if that would look better, just throwing out some ideas ... with GLES 1.x you are pretty much limited to hacks like these.
Thanks (again) warmi - good ideas and has improved it alot. Previously I was just selecting and pulling one vertex, now it 'collects' the verticies the user finger covers which gives a more gooey type effect along with making those parts being moved more transparent.
Can you share your sample Code for Image Warphing technique in iPhone.Atpresent i am doing one project based on Image Warphing.i searched in google.i didn't get any sample source code or basic ideas for image Warphing.Please send me ur sample source code to jpiphonedeveloper@gmail.com.
Can u share ur code with me.in my app i am using Image Warphing Technique.Last 1 weak i searched in google and i tried myself.But i couldn't move forward.Please send ur source code(Image Warphing Technique) to jpiphone developer@gmail.com.
Can u share ur code with me.in my app i am using Image Warphing Technique.Last 1 weak i searched in google and i tried myself.But i couldn't move forward.Please send ur source code(Image Warphing Technique) to jpiphone developer@gmail.com.
Thanks in Advance,
jayaprakash S
The code is tied up in the clients project but hopefully I get some time this week where I can put together a quick prototype. This will just be code that wraps a image around dense(ish) mesh and allows the user pick the closest vertex and pull it around. Should be enough to set you on your way
The code is tied up in the clients project but hopefully I get some time this week where I can put together a quick prototype. This will just be code that wraps a image around dense(ish) mesh and allows the user pick the closest vertex and pull it around. Should be enough to set you on your way
Sorry for long reply...i need ur sample code to do image warphing in iPhone.Now i am trying last 2 weeks this.But still i didn't get any valuable solution. So please share ur code with me.
My gemail id --> jpiphonedeveloper@gmail.com.
Hopefully Positive response from you...
Still i am facing a problem in an Image Warphing Techniques in iPhone.If anybody know please help me to sort out of this problem.i don't know how to start?..
Hopefully positive response from you all,
Thanks in Advance,
jayaprakash S
Splatter effect
Image Warphing in iPhone
Linear Mode
