Android example : SHADER WORKS

forgot to commit the data folder

no need to put paths to folders under bin/data

(cherry picked from commit f258569)

Author: tctr

examples/android/androidEmptyExample/ofApp/src/main/bin/data/.gitkeep

@@ -0,0 +1,24 @@
+#ifdef GL_ES
+// define default precision for float, vec, mat.
+precision highp float;
+#endif
+
+uniform vec4 globalColor;
+
+void main(){
+	//this is the fragment shader
+	//this is where the pixel level drawing happens
+	//gl_FragCoord gives us the x and y of the current pixel its drawing
+
+	//we grab the x and y and store them in an int
+	float xVal = gl_FragCoord.x;
+	float yVal = gl_FragCoord.y;
+
+	//we use the mod function to only draw pixels if they are every 2 in x or every 4 in y
+	if( mod(xVal, 2.0) == 0.5 && mod(yVal, 4.0) == 0.5 ){
+		gl_FragColor = globalColor;
+	}else{
+		discard;
+	}
+
+}

examples/android/androidEmptyExample/ofApp/src/main/bin/data/frabk.ttf

@@ -0,0 +1,89 @@
+#ifdef GL_ES
+// define default precision for float, vec, mat.
+precision highp float;
+#endif
+
+attribute vec4 position;
+
+uniform mat4 modelViewProjectionMatrix;
+
+uniform float timeValX;
+uniform float timeValY;
+uniform vec2 mouse;
+
+//generate a random value from four points
+vec4 rand(vec2 A,vec2 B,vec2 C,vec2 D){
+
+	vec2 s=vec2(12.9898,78.233);
+	vec4 tmp=vec4(dot(A,s),dot(B,s),dot(C,s),dot(D,s));
+
+	return fract(sin(tmp) * 43758.5453)* 2.0 - 1.0;
+}
+
+//this is similar to a perlin noise function
+float noise(vec2 coord,float d){
+
+	vec2 C[4];
+
+	float d1 = 1.0/d;
+
+	C[0]=floor(coord*d)*d1;
+
+	C[1]=C[0]+vec2(d1,0.0);
+
+	C[2]=C[0]+vec2(d1,d1);
+
+	C[3]=C[0]+vec2(0.0,d1);
+
+
+	vec2 p=fract(coord*d);
+
+	vec2 q=1.0-p;
+
+	vec4 w=vec4(q.x*q.y,p.x*q.y,p.x*p.y,q.x*p.y);
+
+	return dot(vec4(rand(C[0],C[1],C[2],C[3])),w);
+}
+
+
+void main(){
+
+	//get our current vertex position so we can modify it
+	vec4 pos = modelViewProjectionMatrix * position;
+	
+	//generate some noise values based on vertex position and the time value which comes in from our OF app
+	float noiseAmntX = noise( vec2(-timeValX + pos.x / 1000.0, 100.0), 20.0 );
+	float noiseAmntY = noise( vec2(timeValY + pos.y / 1000.0, pos.x / 2000.0), 20.0 );
+
+	//generate noise for our blue pixel value
+	float noiseB = noise( vec2(timeValY * 0.25, pos.y / 2000.0), 20.0 );
+
+	//lets also figure out the distance between the mouse and the vertex and apply a repelling force away from the mouse
+	vec2 d = vec2(pos.x, pos.y) - mouse;
+	float len =  sqrt(d.x*d.x + d.y*d.y);
+	if( len < 300.0 && len > 0.0  ){
+		
+		//lets get the distance into 0-1 ranges
+		float pct = len / 300.0; 
+		
+		//this turns our linear 0-1 value into a curved 0-1 value
+		pct *= pct;
+
+		//flip it so the closer we are the greater the repulsion
+		pct = 1.0 - pct;
+		
+		//normalize our repulsion vector
+		d /= len;
+		
+		//apply the repulsion to our position
+		pos.x += d.x * pct * 90.0;
+		pos.y += d.y * pct * 90.0;
+	}
+
+	//modify our position with the smooth noise
+	pos.x += noiseAmntX * 20.0;
+	pos.y += noiseAmntY * 10.0;
+	
+	//finally set the pos to be that actual position rendered
+	gl_Position = pos;
+}

examples/android/androidEmptyExample/ofApp/src/main/bin/data/shaders/noise.frag

@@ -7,9 +7,26 @@ void ofApp::setup(){
 	ofSetVerticalSync(false);
 	ofEnableAlphaBlending();
 
-    bool loadok = font.load("verdana.ttf", 100, true, false, true, 0.4, 72);
+    bool loadok = font.load("verdana.ttf", 200, true, false, true, 0.4, 72);
+	shader.load("shaders/noise.vert", "shaders/noise.frag");
 
+	auto textShapes = font.getStringAsPoints("openFrameworks");
+	for (auto glyph : textShapes) {
+		text.append(glyph);
+	}
 
+	ofRectangle boundingBox;
+	for (auto outline : text.getOutline()) {
+		boundingBox = boundingBox.getUnion(outline.getBoundingBox());
+	}
+
+	boundingBox.alignTo(ofGetCurrentViewport(), OF_ALIGN_HORZ_CENTER, OF_ALIGN_VERT_CENTER);
+	glm::vec2 textPos(boundingBox.getX(), boundingBox.getMaxY());
+
+	text.translate(textPos);
+	text.setFillColor(ofColor(245, 58, 135));
+
+	doShader = false;
 }
 
 void ofApp::exit(){
@@ -24,20 +41,34 @@ void ofApp::update(){
 //--------------------------------------------------------------
 void ofApp::draw(){
 
-    int r = 128 + 128 * cosf(ofGetElapsedTimef());
+    int r = 128 + 50 * cosf(ofGetElapsedTimef());
     int g = 0;
-    int b = 128 + 128 * sinf(ofGetElapsedTimef());
+    int b = 128 + 50 * sinf(ofGetElapsedTimef());
 
     ofBackground(r,g,b);
+
+    //ofSetColor(245, 58, 135);
+    //ofFill();
+    //font.drawStringAsShapes("meditate", 300, 400);
 
-	ofSetColor(225);
-	ofDrawBitmapString("ANDROID WORKING", 200, 300);
+	if( doShader ){
+		shader.begin();
+		//we want to pass in some varrying values to animate our type / color
+		shader.setUniform1f("timeValX", ofGetElapsedTimef() * 0.1 );
+		shader.setUniform1f("timeValY", -ofGetElapsedTimef() * 0.18 );
+
+		//we also pass in the mouse position
+		//we have to transform the coords to what the shader is expecting which is 0,0 in the center and y axis flipped.
+		shader.setUniform2f("mouse", ofGetMouseX() - ofGetWidth()/2, ofGetHeight()/2-ofGetMouseY() );
 
+	}
 
-    ofSetColor(245, 58, 135);
-    ofFill();
+	//finally draw our text
+	text.draw();
 
-    font.drawStringAsShapes("meditate", 300, 400);
+	if( doShader ){
+		shader.end();
+	}
 
 
 
@@ -60,7 +91,7 @@ void ofApp::windowResized(int w, int h){
 
 //--------------------------------------------------------------
 void ofApp::touchDown(int x, int y, int id){
-
+	doShader = true;
 }
 
 //--------------------------------------------------------------
@@ -70,6 +101,7 @@ void ofApp::touchMoved(int x, int y, int id){
 
 //--------------------------------------------------------------
 void ofApp::touchUp(int x, int y, int id){
+	doShader = false;
 
 }