Having trouble overlaying text on top of interactive background

oddberg

Hi there, I am having trouble combining two codes I have. The first one I want to have as a background while the second one (the text) should be on top of it.

I have tried combining them but of course it's not easy at it seem for a beginner like me, they either won't work at all or they don't work like the should.

This is not the only code that I am having trouble doing this with so I feel like I might be missing something. Any help with the code or just pointing me to the right direction would be greatly appreciated!

Code I want to stay in the back but still be interactive:

PShader sh;
String uid;

void setup() {
  PImage img = loadImage("test.jpg");

  size(img.width,img.height,P2D);
  background(0);

  // load and compile shader
  sh = loadShader("lens.glsl");
  // upload texture to graphics card
  sh.set("texture",img);
}

void draw() {
  // normalize mouse position
  float inpx = mouseX/(float)width;
  float inpy = mouseY/(float)height;

  // set shader variable
  sh.set("inp",inpx,inpy);

  // run shader
  shader(sh);

  // fill whole window
  rect(0,0,width,height);
}

And the text code:

import geomerative.*;
import ddf.minim.*;

Minim mySound; //CREATE A NEW SOUND OBJECT
AudioInput in;

RFont font;
String myText = "TEST";

void setup() {
  size(1500, 400);
  background(255);
  smooth();
  RG.init(this); 
  font = new RFont("FreeSans.ttf", 100, CENTER);

  mySound = new Minim(this);
  in = mySound.getLineIn(Minim.STEREO,512);
}

void draw() {
  background(255);
  strokeWeight(2);
  stroke(255, 0, 0);
  noFill();
  translate(width/2, height/1.5);

  float soundLevel = in.mix.level(); //GET OUR AUDIO IN LEVEL

  RCommand.setSegmentLength(soundLevel*9000);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);

  RGroup myGoup = font.toGroup(myText); 
  RPoint[] myPoints = myGoup.getPoints();

  beginShape(QUAD_STRIP);
  for (int i=0; i<myPoints.length; i++) {

    vertex(myPoints[i].x, myPoints[i].y);
  }
  endShape();
}

Lord_of_the_Galaxy

(Please post the shader code also. It may be possible to code a high performance solution directly into the shader.)

Potentially important - https://forum.processing.org/two/discussion/21439/offering-money-for-help-with-glsl-fragment-shader#latest

oddberg

Oh yeah of course!

Here it is:

// image to process
uniform sampler2D texture;
// mouse position normalized
uniform vec2 inp;

// vertex color
varying vec4 vertColor;
// vertex position
varying vec4 vertTexCoord;

#define TWO_PI (6.28318530718)

void main() {   
  vec4 col = texture2D(texture,vertTexCoord.xy); // take color from texture
  float lumaang =  TWO_PI*(0.2126 * col.r + 0.7152 * col.g + 0.0722 * col.b); // calculate luma 
  vec2 off = vec2(2.0*inp.x*sin(lumaang),2.0*inp.y*cos(lumaang)); // calculate offset vector from luma angle
  gl_FragColor = vec4(texture2D(texture, fract(vertTexCoord.st+off)).rgb,1.0); // set color from texture from current position + offest. Wrapped.
}

prince_polka

Setting size as "img.width" and "img.height" rather than hardcoded constants gave me an error, just change size(1024,768, to the reolution of your picture.

Naming the sampler 'texture' gave me black screen so just changed it to 'u_texture' "did nothing else to the shader just add u_ in your shader at line 2,14, and 17
leave texture2D as is..

import geomerative.*;
import ddf.minim.*;
Minim mySound; //CREATE A NEW SOUND OBJECT
AudioInput in;
RFont font;
String myText = "TEST";
PShader sh;
String uid;
void setup() {
  size(1024,768,P2D);
  RG.init(this); 
  font = new RFont("FreeSans.ttf", 100, CENTER);
  mySound = new Minim(this);
  in = mySound.getLineIn(Minim.STEREO,512);
  PImage img = loadImage("test.jpg");
  // load and compile shader
  sh = loadShader("lens.glsl");
  // upload texture to graphics card
  sh.set("u_texture",img);
}
void draw() {
  // normalize mouse position
  float inpx = mouseX/(float)width;
  float inpy = mouseY/(float)height;
  // set shader variable
  sh.set("inp",inpx,inpy);
  // run shader
  shader(sh);
  // fill whole window
  rect(0,0,width,height);
  // stop running shader
  resetShader();
  translate(width/2, height/1.5);
  stroke(255, 0, 0);
  float soundLevel = in.mix.level(); //GET OUR AUDIO IN LEVEL
  RCommand.setSegmentLength(soundLevel*9000);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  RGroup myGoup = font.toGroup(myText); 
  RPoint[] myPoints = myGoup.getPoints();
  pushStyle();
  noFill();
  strokeWeight(2);
  beginShape(QUAD_STRIP);
  for (int i=0; i<myPoints.length; i++) {
    vertex(myPoints[i].x, myPoints[i].y);
  }
  endShape();
  popStyle();
}

oddberg

Thank you! Works great