Loading...
Logo
Processing Forum
Contributed Library Questions
makio135
Makio135

[GLSL / Maths / GLGraphics / GSVideo] Scaled translation in GLSL [solved ✓]

in Contributed Library Questions  •  11 months ago  
Hi all,

I have a little math problem with glsl scaled translation:
I have a GSMovie playing in a GLTexture tex, i apply a GLTextureFilter ClipFilter that translate my movie following mouse coords, and apply Opacity and Scale.
The problem is: i want to apply Scale from the center of the translation .

So, here is my program:

GLSLClip.pde:
Copy code
  1. import processing.opengl.*;
  2. import codeanticode.glgraphics.*;
  3. import codeanticode.gsvideo.*;

  5. GSMovie movie;
  6. GLTexture tex, texFiltered;

  8. GLTextureFilter ClipFilter;
  9. float Opacity=.5, Scale=1.0;

  11. void setup() {
  12. size(640, 480, GLConstants.GLGRAPHICS);
  13.  
  14. tex = new GLTexture(this);
  15. texFiltered = new GLTexture(this);
  16.  
  17. movie = new GSMovie(this, "station.mov");
  18. movie.setPixelDest(tex);
  19. movie.loop();
  20.  
  21. ClipFilter = new GLTextureFilter(this, "ClipFilter.xml");
  22. }

  24. void movieEvent(GSMovie movie) {
  25. movie.read();
  26. }

  28. void draw() {
  29. if (movie.ready() && movie.width>1) {
  30. if (tex.putPixelsIntoTexture()) {
  31. background(255, 0, 0);

  33. float x = map(mouseX, 0, width, -.5, .5);
  34. float y = map(mouseY, 0, height, -.5, .5);
  35. ClipFilter.setParameterValue("posXY", new float[]{x, y});
  36. ClipFilter.setParameterValue("Scale", Scale); 
  37. ClipFilter.setParameterValue("Opacity", Opacity);
  38. tex.filter(ClipFilter, texFiltered);
  39. image(texFiltered, 0, 0, width, height);
  40. }
  41. }
  42. }

  44. void keyPressed() {
  45. if(key == CODED){
  46. if (keyCode == UP && Opacity<1){
  47. Opacity += .1;
  48. println("Opacity: "+Opacity);
  49. }
  50. else if (keyCode == DOWN && Opacity>0){
  51. Opacity -= .1;
  52. println("Opacity: "+Opacity);
  53. }
  54. else if (keyCode == LEFT && Scale>.1){
  55. Scale -= .1;
  56. println("Scale: "+Scale);
  57. }
  58. else if (keyCode == RIGHT && Scale<3){
  59. Scale += .1;
  60. println("Scale: "+Scale);
  61. }
  62. }
  63. }

ClipFilter.xml:
Copy code
  1. <filter name="Clip Filter">
  2. <description>Clip Filter with posXY,Scale,Opacity</description>
  3. <fragment>ClipFilter.glsl</fragment>
  4. <textures input="1" output="1"></textures>
  5. <parameter type="vec2" name="posXY" label="Clip position">0 0</parameter>
  6. <parameter type="float" name="Scale" label="Scale">1</parameter>
  7. <parameter type="float" name="Opacity" label="Opacity">1</parameter>
  8. </filter>

ClipFilter.glsl:
Copy code
  1. uniform sampler2D src_tex_unit0;
  2. uniform vec2 src_tex_offset0;

  4. uniform vec2 posXY;
  5. uniform float Scale;
  6. uniform float Opacity;

  8. void main(void)
  9. {
  10. vec2 tex_coord = (gl_TexCoord[0].st - posXY)/Scale; // Here is the problem
  11. vec4 color0 = texture2D(src_tex_unit0, tex_coord);
  12. if(tex_coord[0] <= 0) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
  13. else if(tex_coord[0] >= 1) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
  14. else if(tex_coord[1] <= 0) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
  15. else if(tex_coord[1] >= 1) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
  16. else gl_FragColor = vec4(color0.rgb, Opacity);
  17. }
Must be something not so hard but can't resolve it at the moment (not really used to GLSL coords transformation).

Thanks.

@admins: i'wasn't sure of the section, so feel free to move it if you think it is more a "Processing with Other Languages" (or else) thread.

Makio135
http://makio135.com/

Replies(7)

PhiLho
PhiLho

Re: [GLGraphics / GSVideo] Scaled translation in GLSL

11 months ago
See (again?) the Forum Guidelines: if you use a contributed library (ie. one you had to install), put it here (I moved the topic). You don't use "another language", do you?
This section exists because it can be scanned by those used to use such library (your subject is good with regard to this), or even the makers of the library; and those not able to answer it (like me!) because they don't use it, can skip it.
Makio135
Makio135

Re: [GLGraphics / GSVideo] Scaled translation in GLSL

11 months ago
Hey Philho, 
it's not a GLGraphics problem nor a GSVideo one, so it's not a Contributed Library problem, (by the way, it seems you haven't chaged the topic).
Scaling and translation are a Maths problem (so i figured it would go in Programming Question) but it is in a GLSL so there probably is a GLSL way of solving it, and GLSL IS another language.

Maths or GSL, here is the problem of the section 

Back to the real issue, no one?
Copy code
  1. vec2 tex_coord = gl_TexCoord[0].st - posXY; // gives a good translation following mouse
Copy code
  1. vec2 tex_coord = (gl_TexCoord[0].st - posXY)/Scale; // Scale is applied from top left corner
I'm looking for a centered scale
Makio135
Makio135

Re: [GLSL / Maths / GLGraphics / GSVideo] Scaled translation in GLSL

11 months ago
Copy code
  1. vec2 tex_coord = (gl_TexCoord[0].st - posXY)/Scale - posXY*Scale;
This is a bit better but still not ok

Makio135
http://makio135.com/
PhiLho
PhiLho

Re: [GLSL / Maths / GLGraphics / GSVideo] Scaled translation in GLSL

11 months ago
Ah, indeed, I missed the fact it was about coding shaders. But you are not coding "processing in another language" but using another language within Processing.
Someday, I might post about using Lua to script a Processing sketch, it still belongs to the library I will use to do so. If code a Processing sketch in Lua (which is also possible), it indeed belongs to the "other language" section.
Yes, classification is a bit subtle, arbitrary and with gray areas...
But your topic needs some knowledge of the required library, so I finally moved it here.
Thanks for your concern about the placement (as opposed to the "I don't care" attitude of some people).

(And sorry as I can't help, I never tried to use shaders.)
Jesse Scott
Jesse Sco..

Re: [GLSL / Maths / GLGraphics / GSVideo] Scaled translation in GLSL

11 months ago
I don't know... 

are Shaders in a GL Matrix (-1,1) ??
Is there any translate functionality in GLSL ?? 
Can you pass a shader a value to offset (center to screen space) as an argument ??

Just throwing out ideas... 

Have you tried the Orange Book or any of it's ilk ??
Makio135
Makio135

Re: [GLSL / Maths / GLGraphics / GSVideo] Scaled translation in GLSL

11 months ago
Shaders are in Matrix (0,1)
i pass the Value posXY corresponding to mouseX, mouseY to translate my tex_coor successfully.
i also pass the scale:
vec2 tex_coord = (gl_TexCoord[0].st - posXY)/Scale - posXY*Scale

there are translate/scale functionnalities: but they seem to be matrix functions manipulation, can't find anything simplier
Makio135
Makio135

Re: [GLSL / Maths / GLGraphics / GSVideo] Scaled translation in GLSL

11 months ago
Ok, i did a little sketch doing what happens in the shader:
Copy code
  1. float posX, posY, Scale=1;
  2. PImage img;

  4. void setup(){
  5. size(800,600);
  6. img=loadImage("data/1.png");
  7. }

  9. void draw(){
  10. background(255);
  11. if(img.width>1) image(img,0,0,img.width, img.height);
  13. stroke(255);
  14. strokeWeight(5);
  15. noFill();
  16. rect(0,0,width,height);

  19. posX = map(mouseX,0,width,-.5,.5);
  20. posY = map(mouseY,0,height,-.5,.5);
  21. stroke(255,0,0);
  22. strokeWeight(5);
  23. noFill();
  24. rect(0+posX*width+(width-(width/Scale))/2,0+posY*height+(height-(height/Scale))/2,width/Scale,height/Scale);
  25. }

  27. void keyPressed() {
  28. if(key == CODED){
  29. if (keyCode == LEFT && Scale>.1){
  30. Scale -= .1;
  31. console.log("Scale: "+Scale);
  32. }
  33. else if (keyCode == RIGHT && Scale<3){
  34. Scale += .1;
  35. console.log("Scale: "+Scale);
  36. }
  37. }
  38. }

  40. void mousePressed(){
  41. console.log("posX: "+posX+"   posY: "+posY);
  42. }
So here is the solution doing Maths only:
Copy code
  1. uniform sampler2D src_tex_unit0;
  2. uniform vec2 src_tex_offset0;

  4. uniform vec2 posXY;
  5. uniform float Scale;
  6. uniform float Opacity;

  8. void main(void)
  9. {
  10. vec2 centre = vec2((1-(1/Scale))/2, (1-(1/Scale))/2);
  11. vec2 tex_coord = gl_TexCoord[0].st/Scale + centre - posXY/Scale;
  12. vec4 color0 = texture2D(src_tex_unit0, tex_coord);

  14. if(tex_coord[0] <= 0) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
  15. else if(tex_coord[0] >= 1) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
  16. else if(tex_coord[1] <= 0) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
  17. else if(tex_coord[1] >= 1) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
  18. else gl_FragColor = vec4(color0.rgb, Opacity);
  19. }


Makio135
http://makio135.com/
Top Reply

Statistics

  • 7 Replies
  • 807  Views
  • 0 Followers

Actions

Related Posts