[svg-developers] Filter Help
I've been stuck on using filters for a very specific effect that I am hoping the experts here can help me with. Think of a image being strecthed in 2 like bubble gum. I've been playing with a lot of filter effects and clippaths (I have the clipaths down). Has anyone played with an effect like this? Essentially one image on left distorted strecthed and the other half on the right and stretched apart? Do I make sense? :) Patrick - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
Re: [svg-developers] Filter Help
Hi Patrick, A couple of things come to mind: 1. this is sort of cool but doesn't answer your question and has nothing to do with filters. but it is a bit bubble-gummy: http://www.themaninblue.com/experiment/Blobular/ (I think I tried it in Opera and FF4 but it didn't work in ASV) (I just ran across it today) 2. Using displacement filters can do something like you're describing I think: see http://srufaculty.sru.edu/david.dailey/svg/later/displace2.svg or http://srufaculty.sru.edu/david.dailey/svg/later/displace4.svg or http://srufaculty.sru.edu/david.dailey/svg/newstuff/filterDisplacementMap4.svg The distortions I'm doing are based on either reflected gradients (that Opera doesn't handle so well in comparison with the others) or discrete gradients and hence the separation is either fractal or discrete and not as you wish, but it gives the basic idea. If one were to increase the displacement in this one, I think you'd get the basic effect: http://srufaculty.sru.edu/david.dailey/svg/eggcloning3.svg Hope this helps. cheers David - Original Message - From: patrickdengler To: svg-developers@yahoogroups.com Sent: Sunday, February 20, 2011 4:03 PM Subject: [svg-developers] Filter Help I've been stuck on using filters for a very specific effect that I am hoping the experts here can help me with. Think of a image being strecthed in 2 like bubble gum. I've been playing with a lot of filter effects and clippaths (I have the clipaths down). Has anyone played with an effect like this? Essentially one image on left distorted strecthed and the other half on the right and stretched apart? Do I make sense? :) Patrick [Non-text portions of this message have been removed] - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
Re: [svg-developers] Filter Help
On Sun, Feb 20, 2011 at 1:03 PM, patrickdengler patrickdeng...@yahoo.comwrote: I've been stuck on using filters for a very specific effect that I am hoping the experts here can help me with. How exciting!!! :) I was going to suggest feDisplacementMap as a starting point, but I haven't played enough with it yet, sorry. Jeff [Non-text portions of this message have been removed] - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: Filter Help
Wow! Thanks for the immediate follow up. I've toyed with each of these, especially I was intrigued by feDisplacement, but I cannot seem to control (or figure out how to control) the direction of the displacement. filter id=imageFilter feDisplacementMap scale=25 yChannelSelector=B xChannelSelector=R in=SourceGraphic / /filter This does a pretty good job (or at least a start). I really want that boing stretch look in whatever dx/dy direction. - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
Re: [svg-developers] Re: Filter Help
I was intrigued by feDisplacement, but I cannot seem to control (or figure out how to control) the direction of the displacement. Yes, I've had trouble controlling the thing precisely. The little experiments with the checkerboard, are an attempt to calibrate those effects, here's another experiment: http://srufaculty.sru.edu/david.dailey/svg/later/displace7.svg in which you can see the precise degree of effect as animated. FF4 Opera and ASV all do it I think. Here's one of the reasons I wanted to do it -- if one takes a jigsaw puzzle and wishes to scramble the N pieces (sort of as in http://srufaculty.sru.edu/david.dailey/svg/clips2.svg only scrambled) then the repositioning of the images using clipPath will require N copies of the image to be loaded, I suppose into RAM. For a 1000 piece puzzle that's going to be expensive. Using a bitblt approach as in canvas one could segment those memory footprints into much smaller units. and ultimately not consume much more than the original size of the bitmap, but then the jigsaw pieces aren't objects and its not easy to carve them into clipPaths and it's not easy to drag and drop them as one does with SVG objects. So, I was interested in using an underlying distortion map (created through script) to displace chunks of imagery by fixed amounts. I couldn't get it to be as precise as I needed though, and was tempted to complain about it, but could't quite figure out if it was me or the filter that was at fault. feOffset as seen here http://srufaculty.sru.edu/david.dailey/svg/later/offsets7.svg works well in FF but not at all quickly in Opera or ASV. It was the other thing I considered. If the speed found in FF could be expected then it might solve my problem, but not likely yours which requires more gradual and less discrete displacements. cheers David - Original Message - From: patrickdengler To: svg-developers@yahoogroups.com Sent: Sunday, February 20, 2011 5:52 PM Subject: [svg-developers] Re: Filter Help Wow! Thanks for the immediate follow up. I've toyed with each of these, especially I was intrigued by feDisplacement, but I cannot seem to control (or figure out how to control) the direction of the displacement. filter id=imageFilter feDisplacementMap scale=25 yChannelSelector=B xChannelSelector=R in=SourceGraphic / /filter This does a pretty good job (or at least a start). I really want that boing stretch look in whatever dx/dy direction. [Non-text portions of this message have been removed] - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
