Yourangutan Posted February 26, 2015 Share Posted February 26, 2015 Hi all, Im trying to get my Twistfilter offset to follow my mouseposition across the screen on mouseDown... been at this all day, poured over the documentation and tried multiple ways... no luck.. any help would be greatly appreciated. So far I have this:// sets up the screen/stage var viewWidth = 1000; var viewHeight = 500; var renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);renderer.view.className = "rendererView";document.body.appendChild(renderer.view);var stage = new PIXI.Stage(0xffffff, interactive);var interactive = true;//adds the flag as a spritevar flagTexture = PIXI.Texture.fromImage("img/flag3.jpg");var flagSprite = new PIXI.Sprite(flagTexture);stage.addChild(flagSprite);// creates a wavy texture over the flagvar waveDisplacementTexture = PIXI.Texture.fromImage("img/displacementMap.jpg");var displacementFilter = new PIXI.DisplacementFilter(waveDisplacementTexture);var DotScreenFilter = new PIXI.DotScreenFilter();// configures the filters..displacementFilter.scale.x = 30;displacementFilter.scale.y = 20;// apply the filters to the stagestage.filters = [displacementFilter, DotScreenFilter];var tick = 0;requestAnimationFrame(animate);function animate(){tick += 0.4;displacementFilter.offset.x = displacementFilter.offset.y =tick*10;renderer.render(stage);requestAnimationFrame( animate );} // Mouse interactionstage.mousemove = function(mouseData){ //console.log("MOUSE MOVE!");var localCoordsPosition = mouseData.getLocalPosition(stage);console.log(localCoordsPosition);}stage.mousedown = function(mouseData){ console.log("down");displacementFilter.scale.x = 50;displacementFilter.scale.y = 50;var twister = new PIXI.TwistFilter ();var localCoordsPosition = mouseData.getLocalPosition(stage);twister.offset.x = localCoordsPosition.x;twister.offset.y = localCoordsPosition.y;stage.filters = [twister, displacementFilter];} Quote Link to comment Share on other sites More sharing options...
msha Posted February 26, 2015 Share Posted February 26, 2015 "stage.filters = [twister, displacementFilter];"This should happen only once, it should not be inside the mousedown handler. Quote Link to comment Share on other sites More sharing options...
Yourangutan Posted February 26, 2015 Author Share Posted February 26, 2015 Hi, thanks for your reply! Ugh. If you mean what I suspect you mean, I must be doing much more wrong than I thought. I have a bunch of functions that get called randomly on mouseUp.. it's just to figure out how to use this awesome js library. http://www.peiro.de/goodies/html5/pixi/flag3.html Any mouseclick or tap click calls a random function that calls up a different set of filters, so Im doing "stage.filters = [FilterA, FilterB];" often (though not inside a mouse function). Do you mean that it would be a better idea to write & call up a function that does the twisting on mouseDown? heres the rest of the code, including the new whirlEye function that gets called on mouseDown (sadly, my kung-fu isn't strong enough at this point to get that working right) :<!doctype html><html lang='en'> <!-- Header --> <head> <title>Oh Say Can You See</title> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><style> body { margin: 0; padding: 0; background-color: #000000; } .rendererView { position: absolute; display: block; width: 100%; height: 100%; } </style> <script src="js/pixi.js"></script></head><body> <script>// sets up the screen/stage var viewWidth = 1000; var viewHeight = 500; var renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight); renderer.view.className = "rendererView"; document.body.appendChild(renderer.view); var stage = new PIXI.Stage(0xffffff, interactive); var interactive = true; //adds the flag as a sprite var flagTexture = PIXI.Texture.fromImage("img/flag3.jpg"); var flagSprite = new PIXI.Sprite(flagTexture); stage.addChild(flagSprite); // creates a wavy texture over the flag var waveDisplacementTexture = PIXI.Texture.fromImage("img/displacementMap.jpg"); var displacementFilter = new PIXI.DisplacementFilter(waveDisplacementTexture); var DotScreenFilter = new PIXI.DotScreenFilter(); //var BlurFilter = new PIXI.BlurFilter(); //var PixelateFilter = new PIXI.PixelateFilter(); //var NoiseFilter = new PIXI.NoiseFilter(); //flagSprite.filters= [PixelateFilter];// configures the filters.. displacementFilter.scale.x = 30; displacementFilter.scale.y = 20;// apply the filters to the stage stage.filters = [displacementFilter, DotScreenFilter]; var tick = 0; requestAnimationFrame(animate); function animate(){ tick += 0.4; displacementFilter.offset.x = displacementFilter.offset.y =tick*10; renderer.render(stage); requestAnimationFrame( animate );} // Mouse interactionstage.mousemove = function(mouseData){ var localCoordsPosition = mouseData.getLocalPosition(stage); console.log(localCoordsPosition);}function whirlEye(mouseData){ console.log(whirlEye); var twister = new PIXI.TwistFilter (); twister.offset.x = localCoordsPosition; twister.offset.y = localCoordsPosition; stage.filters = [twister];}stage.mousedown = function(mouseData){ console.log("down"); displacementFilter.scale.x = 550; displacementFilter.scale.y = 550; whirlEye()} stage.mouseup = function(mouseData){ console.log("up"); displacementFilter.scale.x = 30; displacementFilter.scale.y = 20; getaQuote()} stage.touchstart = function(touchData){ console.log("down"); displacementFilter.scale.x = 530; displacementFilter.scale.y = 550; //DotScreenFilter.dirty = true; DotScreenFilter.angle = 0.3; DotScreenFilter.scale = 0.7; DotScreenFilter.padding = 0.7;} stage.touchend = function(touchData){ console.log("up"); displacementFilter.scale.x = 30; displacementFilter.scale.y = 20; getaQuote()}stage.touchmove = function(touchData){ console.log("TOUCH MOVE"); console.log("up"); displacementFilter.scale.x = 30; displacementFilter.scale.y = 20; getaQuote()}// Insanityfunction get_random(){ var ranNum= Math.floor(Math.random()*10); return ranNum;}function getaQuote(){ var whichQuote=get_random(); var quote=new Array(10) quote[0] = effects1; quote[1] = effects2; quote[2] = effects3; quote[3] = effects4; quote[4] = effects5; quote[5] = effects6; quote[6] = effects7; quote[7] = effects8; quote[8] = effects9; quote[9] = effects10; console.log(quote[whichQuote]); (quote[whichQuote])();}function effects1(){ var PixelateFilter = new PIXI.PixelateFilter(); stage.filters = [displacementFilter, PixelateFilter];}function effects2(){ var PixelateFilter = new PIXI.PixelateFilter(); stage.filters = [displacementFilter, DotScreenFilter, PixelateFilter];}function effects3(){ var BlurYFilter = new PIXI.BlurYFilter(); stage.filters = [displacementFilter, BlurYFilter];}function effects4(){ var DotScreenFilter = new PIXI.DotScreenFilter(); stage.filters = [displacementFilter, DotScreenFilter];}function effects5(){ var TwistFilter = new PIXI.TwistFilter (); stage.filters = [displacementFilter, TwistFilter ];}function effects6(){ var NoiseFilter = new PIXI.NoiseFilter(dirty = true); stage.filters = [displacementFilter, NoiseFilter ];}function effects7(){ var SepiaFilter = new PIXI.SepiaFilter(); stage.filters = [displacementFilter, SepiaFilter ];}function effects8(){ var RGBSplitFilter = new PIXI.RGBSplitFilter(); stage.filters = [displacementFilter, RGBSplitFilter ];}function effects9(){ var RGBSplitFilter = new PIXI.RGBSplitFilter(); var DotScreenFilter = new PIXI.DotScreenFilter(); stage.filters = [displacementFilter, RGBSplitFilter, DotScreenFilter ];}function effects10(){ var CrossHatchFilter = new PIXI.CrossHatchFilter(); stage.filters = [displacementFilter, CrossHatchFilter ];}</script><div style="position:relative;width:345px;height:25px;overflow:hidden;top:0;left:0;background:#000;"><div style="position:absolute;top:-276px;left:-5px"><iframe width="345" height="300" background-color="#000"; src="https://www.youtube.com/embed/wt3cYpFLJiM#t=0m53s?rel=0&autoplay=true"></iframe></div></div></body></html> Quote Link to comment Share on other sites More sharing options...
msha Posted February 26, 2015 Share Posted February 26, 2015 My mistake, nothing's wrong with that line. var twister = new PIXI.TwistFilter (); - this should be outside the handler. And then in your mousemove you should have:var localCoordsPosition = mouseData.getLocalPosition(stage);twister.offset.x = localCoordsPosition.x;twister.offset.y = localCoordsPosition.y; Quote Link to comment Share on other sites More sharing options...
Yourangutan Posted February 26, 2015 Author Share Posted February 26, 2015 Hmmm... Thank you, I - oh - I think I should have specifically said the goal is to drag the offset, sorry. Your help did seem to work somehow, in that it wouldnt throw any errors.. thanks, eh. Im working with this as of now, if you still want to take a squint at it: (even when it 'sstage.mousemove = function(mouseData){ var localCoordsPosition = mouseData.getLocalPosition(stage); twister.offset.x = localCoordsPosition.x; twister.offset.y = localCoordsPosition.y; //console.log(localCoordsPosition); console.log("whirlEye");}it wont let me drag the offset around..) Quote Link to comment Share on other sites More sharing options...
msha Posted February 26, 2015 Share Posted February 26, 2015 hmm ok, another problem: offset should be normalized. twister.offset.x = localCoordsPosition.x / stage.width; twister.offset.y = localCoordsPosition.y / stage.height; Quote Link to comment Share on other sites More sharing options...
Yourangutan Posted February 26, 2015 Author Share Posted February 26, 2015 Ha! Cool, now we're gettin somewhere! Definite changes on drag with the / width /height! http://www.peiro.de/goodies/html5/pixi/flag3.html edit: I mean it looks totally fucked up, but it's great lol edit2: oh sorry, is there no cursing here or something? edit3: Thanks a lot for the help! :-) Quote Link to comment Share on other sites More sharing options...
msha Posted February 26, 2015 Share Posted February 26, 2015 Good.[0, 0] is bottom-left corner for opengl, so:twister.offset.y = 1 - localCoordsPosition.y / stage.height; Quote Link to comment Share on other sites More sharing options...
Yourangutan Posted February 26, 2015 Author Share Posted February 26, 2015 Thanks again! That makes it work uninverted.. I just only found out about pixi.js yesterday and Im really happy it exists already! Quote Link to comment Share on other sites More sharing options...
msha Posted February 26, 2015 Share Posted February 26, 2015 You're welcome. Yeah, great library Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.