Search the Community

I am working on a project within PIXI that requires me to shift the hue of a saturated rainbow gradient in a loop so it looks like its moving. I figured this would be cut and dry, since changing the hue of said image in Photoshop make it appear as if its moving. When starting out and getting the filter in place and animating, I was perplexed by the results. The colors looked nothing like I expected nor could have predicted. You can see a little demo of what I'm talking about and seeing on codepen here. I started digging to see what could be the problem, trying different image formats and color depths to no avail. I gave a shot at another canvas solution, GLFX, and can get the proper results I expected, as also seen on codepen here. My question to you guys is whats going on here? I am suspecting either an error in PIXI or my understanding of how hue rotation should work. I tried a few different PIXI revisions and didn't spot a difference. I dug a little further and came across an article explaining the difference between HSL and CSS hue rotations and its inaccuracies here. Though, that doesn't help me fix the issue with PIXI. Anyway to fix this on my end while staying within PIXI? Thank you.

Hi all, First of all, I would like to congrat the Pixi team for its amazing framework! I am currently working on a bulge/pinch filter like the one presented here : https://github.com/GoodBoyDigital/glfx.js/blob/master/src/filters/warp/bulgepinch.js. I am trying to adapt the glfx filter to the v3 pixi engine but I am not so much experimented with javascript and as3 to well understand what I am doing. I based my conversion following your work on the dotscreen filter you already adapt for that library and here I am so far... https://jsfiddle.net/aqvtw5yw/ PIXI.filters.AbstractFilter.call(this, // vertex shader null, // fragment shader [ 'precision mediump float;', 'uniform vec2 center;', 'uniform float radius;', 'uniform float strength;', 'void main() {', 'vec2 coord = center;', 'float distance = length(coord);', 'if (distance < radius) {', 'float percent = distance / radius;', 'if (strength > 0.0) {', 'coord *= mix(1.0, smoothstep(0.0, radius / distance, percent), strength * 0.75);', '} else {', 'coord *= mix(1.0, pow(percent, 1.0 + strength * 0.75) * radius / distance, 1.0 - percent);', '}', '}', '}' ].join('\n'), // custom uniforms { radius: {type: '1f', value:10}, strength: {type: '1f', value:5}, center: {type: '2fv', value:[100,100]} }); Something is not working, no error shown in the console, I am a bit lost I would like to reproduce exactly the same so if someone here could help me a bit to accomplish my goal, it would be awsome! Thanks for your help