Jump to content

Twistfilter & interactionManager question


Recommended Posts

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];}
Link to comment
Share on other sites

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. 



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>
Link to comment
Share on other sites

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;
Link to comment
Share on other sites

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 's

stage.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..) 

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...