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

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:

import processing.opengl.*;
import codeanticode.glgraphics.*;
import codeanticode.gsvideo.*;
GSMovie movie;
GLTexture tex, texFiltered;
GLTextureFilter ClipFilter;
float Opacity=.5, Scale=1.0;
void setup() {
size(640, 480, GLConstants.GLGRAPHICS);
tex = new GLTexture(this);
texFiltered = new GLTexture(this);
movie = new GSMovie(this, "station.mov");
movie.setPixelDest(tex);
movie.loop();
ClipFilter = new GLTextureFilter(this, "ClipFilter.xml");
}
void movieEvent(GSMovie movie) {
movie.read();
}
void draw() {
if (movie.ready() && movie.width>1) {
if (tex.putPixelsIntoTexture()) {
background(255, 0, 0);
float x = map(mouseX, 0, width, -.5, .5);
float y = map(mouseY, 0, height, -.5, .5);
ClipFilter.setParameterValue("posXY", new float[]{x, y});
ClipFilter.setParameterValue("Scale", Scale);
ClipFilter.setParameterValue("Opacity", Opacity);
tex.filter(ClipFilter, texFiltered);
image(texFiltered, 0, 0, width, height);
}
}
}
void keyPressed() {
if(key == CODED){
if (keyCode == UP && Opacity<1){
Opacity += .1;
println("Opacity: "+Opacity);
}
else if (keyCode == DOWN && Opacity>0){
Opacity -= .1;
println("Opacity: "+Opacity);
}
else if (keyCode == LEFT && Scale>.1){
Scale -= .1;
println("Scale: "+Scale);
}
else if (keyCode == RIGHT && Scale<3){
Scale += .1;
println("Scale: "+Scale);
}
}
}

ClipFilter.xml:

<filter name="Clip Filter">
<description>Clip Filter with posXY,Scale,Opacity</description>
<fragment>ClipFilter.glsl</fragment>
<textures input="1" output="1"></textures>
<parameter type="vec2" name="posXY" label="Clip position">0 0</parameter>
<parameter type="float" name="Scale" label="Scale">1</parameter>
<parameter type="float" name="Opacity" label="Opacity">1</parameter>
</filter>

ClipFilter.glsl:

uniform sampler2D src_tex_unit0;
uniform vec2 src_tex_offset0;
uniform vec2 posXY;
uniform float Scale;
uniform float Opacity;
void main(void)
{
vec2 tex_coord = (gl_TexCoord[0].st - posXY)/Scale; // Here is the problem
vec4 color0 = texture2D(src_tex_unit0, tex_coord);
if(tex_coord[0] <= 0) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
else if(tex_coord[0] >= 1) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
else if(tex_coord[1] <= 0) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
else if(tex_coord[1] >= 1) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
else gl_FragColor = vec4(color0.rgb, Opacity);
}

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

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

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?

vec2 tex_coord = gl_TexCoord[0].st - posXY; // gives a good translation following mouse

vec2 tex_coord = (gl_TexCoord[0].st - posXY)/Scale; // Scale is applied from top left corner

I'm looking for a centered scale

Makio135
http://makio135.com/

Makio135

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

11 months ago

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

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

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
http://makio135.com/

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:

float posX, posY, Scale=1;
PImage img;
void setup(){
size(800,600);
img=loadImage("data/1.png");
}
void draw(){
background(255);
if(img.width>1) image(img,0,0,img.width, img.height);
stroke(255);
strokeWeight(5);
noFill();
rect(0,0,width,height);
posX = map(mouseX,0,width,-.5,.5);
posY = map(mouseY,0,height,-.5,.5);
stroke(255,0,0);
strokeWeight(5);
noFill();
rect(0+posX*width+(width-(width/Scale))/2,0+posY*height+(height-(height/Scale))/2,width/Scale,height/Scale);
}
void keyPressed() {
if(key == CODED){
if (keyCode == LEFT && Scale>.1){
Scale -= .1;
console.log("Scale: "+Scale);
}
else if (keyCode == RIGHT && Scale<3){
Scale += .1;
console.log("Scale: "+Scale);
}
}
}
void mousePressed(){
console.log("posX: "+posX+" posY: "+posY);
}

So here is the solution doing Maths only:

uniform sampler2D src_tex_unit0;
uniform vec2 src_tex_offset0;
uniform vec2 posXY;
uniform float Scale;
uniform float Opacity;
void main(void)
{
vec2 centre = vec2((1-(1/Scale))/2, (1-(1/Scale))/2);
vec2 tex_coord = gl_TexCoord[0].st/Scale + centre - posXY/Scale;
vec4 color0 = texture2D(src_tex_unit0, tex_coord);
if(tex_coord[0] <= 0) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
else if(tex_coord[0] >= 1) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
else if(tex_coord[1] <= 0) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
else if(tex_coord[1] >= 1) gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
else gl_FragColor = vec4(color0.rgb, Opacity);
}

Makio135
http://makio135.com/

Top Reply