From 9b7f19b703153f401d4b3e2b150bbcc926f4e7a7 Mon Sep 17 00:00:00 2001 From: codeanticode Date: Wed, 30 May 2012 23:15:16 +0000 Subject: [PATCH] Added LoadSVG and FXAA examples on Android --- .../OpenGL/Advanced/Particles/Particle.pde | 6 +- .../Animation/Yellowtail/Yellowtail.pde | 2 +- .../examples/OpenGL/IO/LoadSVG/LoadSVG.pde | 35 ++ .../LoadSVG/data/World_map_with_nations.svg | 419 ++++++++++++++++++ .../Immediate/Robot1_Draw/Robot1_Draw.pde | 4 +- .../Immediate/TriangleStrip/TriangleStrip.pde | 2 +- .../CubicGridRetained/CubicGridRetained.pde | 2 +- .../Retained/PolyImmediate/PolyImmediate.pde | 4 +- .../OpenGL/Retained/PolyRetain/PolyRetain.pde | 4 +- .../OpenGL/Retained/Primitive/Primitive.pde | 2 +- .../OpenGL/Retained/Shape2_18/Shape2_18.pde | 2 +- .../OpenGL/Shaders/EdgeDetect/EdgeDetect.pde | 24 +- android/examples/OpenGL/Shaders/FXAA/FXAA.pde | 95 ++++ .../OpenGL/Shaders/FXAA/data/fxaa.glsl | 69 +++ .../Shaders/ToonShading/ToonShading.pde | 27 +- 15 files changed, 657 insertions(+), 40 deletions(-) create mode 100644 android/examples/OpenGL/IO/LoadSVG/LoadSVG.pde create mode 100644 android/examples/OpenGL/IO/LoadSVG/data/World_map_with_nations.svg create mode 100644 android/examples/OpenGL/Shaders/FXAA/FXAA.pde create mode 100644 android/examples/OpenGL/Shaders/FXAA/data/fxaa.glsl diff --git a/android/examples/OpenGL/Advanced/Particles/Particle.pde b/android/examples/OpenGL/Advanced/Particles/Particle.pde index 8338d0688..b0e983072 100644 --- a/android/examples/OpenGL/Advanced/Particles/Particle.pde +++ b/android/examples/OpenGL/Advanced/Particles/Particle.pde @@ -34,9 +34,9 @@ class Particle { float speed = random(0.5,4); velocity = new PVector(cos(a), sin(a)); velocity.mult(speed); - lifespan = 255; - PVector center = part.getCenter(); - part.translate(x - center.x, y - center.y); + lifespan = 255; + part.resetMatrix(); + part.translate(x, y); } boolean isDead() { diff --git a/android/examples/OpenGL/Animation/Yellowtail/Yellowtail.pde b/android/examples/OpenGL/Animation/Yellowtail/Yellowtail.pde index af1fb2439..a26cba3fc 100644 --- a/android/examples/OpenGL/Animation/Yellowtail/Yellowtail.pde +++ b/android/examples/OpenGL/Animation/Yellowtail/Yellowtail.pde @@ -23,7 +23,7 @@ int tmpYp[]; void setup() { - size(displayWidth, displayHeight, P3D); + size(displayWidth, displayHeight, P2D); background(0, 0, 0); noStroke(); diff --git a/android/examples/OpenGL/IO/LoadSVG/LoadSVG.pde b/android/examples/OpenGL/IO/LoadSVG/LoadSVG.pde new file mode 100644 index 000000000..725d3c0cd --- /dev/null +++ b/android/examples/OpenGL/IO/LoadSVG/LoadSVG.pde @@ -0,0 +1,35 @@ +PShape world; +float resizeFactor; +float offsetX, offsetY; + +void setup() { + size(displayWidth, displayWidth, P2D); + orientation(LANDSCAPE); + + world = loadShape("World_map_with_nations.svg"); + + PVector top = world.getTop(); + world.translate(-top.x, -top.y); + + + float r = world.getWidth() / world.getHeight(); + float w = width; + float h = width / r; + if (height < h) { + h = height; + w = r * h; + offsetX = (width - w) / 2; + offsetY = 0; + } else { + offsetX = 0; + offsetY = (height - h) / 2; + } + resizeFactor = w / world.getWidth(); + + world.scale(resizeFactor); +} + +public void draw() { + shape(world); +} + diff --git a/android/examples/OpenGL/IO/LoadSVG/data/World_map_with_nations.svg b/android/examples/OpenGL/IO/LoadSVG/data/World_map_with_nations.svg new file mode 100644 index 000000000..fada0d8a9 --- /dev/null +++ b/android/examples/OpenGL/IO/LoadSVG/data/World_map_with_nations.svg @@ -0,0 +1,419 @@ + +image/svg+xmlWorld mapSTyx2007-07-27e \ No newline at end of file diff --git a/android/examples/OpenGL/Immediate/Robot1_Draw/Robot1_Draw.pde b/android/examples/OpenGL/Immediate/Robot1_Draw/Robot1_Draw.pde index 9ec4f6df5..2238778c6 100644 --- a/android/examples/OpenGL/Immediate/Robot1_Draw/Robot1_Draw.pde +++ b/android/examples/OpenGL/Immediate/Robot1_Draw/Robot1_Draw.pde @@ -1,10 +1,8 @@ // Robot 1: Draw from "Getting Started with Processing" // by Reas & Fry. O'Reilly / Make 2010 -size(720, 480, P3D); +size(720, 480, P2D); orientation(LANDSCAPE); -hint(ENABLE_ACCURATE_2D); -smooth(); strokeWeight(2); background(204); ellipseMode(RADIUS); diff --git a/android/examples/OpenGL/Immediate/TriangleStrip/TriangleStrip.pde b/android/examples/OpenGL/Immediate/TriangleStrip/TriangleStrip.pde index d0fdbabea..7c183c937 100644 --- a/android/examples/OpenGL/Immediate/TriangleStrip/TriangleStrip.pde +++ b/android/examples/OpenGL/Immediate/TriangleStrip/TriangleStrip.pde @@ -13,7 +13,7 @@ float outerRad; float innerRad; void setup() { - size(640, 360, P3D); + size(640, 360, P2D); orientation(LANDSCAPE); background(204); x = width/2; diff --git a/android/examples/OpenGL/Performance/CubicGridRetained/CubicGridRetained.pde b/android/examples/OpenGL/Performance/CubicGridRetained/CubicGridRetained.pde index dbc715815..2314109cf 100644 --- a/android/examples/OpenGL/Performance/CubicGridRetained/CubicGridRetained.pde +++ b/android/examples/OpenGL/Performance/CubicGridRetained/CubicGridRetained.pde @@ -1,4 +1,4 @@ -float boxSize = 50; +float boxSize = 40; float margin = boxSize*2; float depth = 400; color boxFill; diff --git a/android/examples/OpenGL/Retained/PolyImmediate/PolyImmediate.pde b/android/examples/OpenGL/Retained/PolyImmediate/PolyImmediate.pde index 8efcd50b7..d7ecc3e59 100644 --- a/android/examples/OpenGL/Retained/PolyImmediate/PolyImmediate.pde +++ b/android/examples/OpenGL/Retained/PolyImmediate/PolyImmediate.pde @@ -1,4 +1,4 @@ -size(100, 100, P3D); +size(100, 100, P2D); beginShape(POLYGON); fill(0, 255, 0, 255); @@ -18,4 +18,4 @@ vertex(70, 70); vertex(40, 70); endContour(); endShape(CLOSE); - + diff --git a/android/examples/OpenGL/Retained/PolyRetain/PolyRetain.pde b/android/examples/OpenGL/Retained/PolyRetain/PolyRetain.pde index 80d06279b..97e0a6311 100644 --- a/android/examples/OpenGL/Retained/PolyRetain/PolyRetain.pde +++ b/android/examples/OpenGL/Retained/PolyRetain/PolyRetain.pde @@ -1,4 +1,4 @@ -size(100, 100, P3D); +size(100, 100, P2D); PShape obj = createShape(POLYGON); obj.fill(0, 255, 0, 255); @@ -19,4 +19,4 @@ obj.vertex(40, 70); obj.endContour(); obj.end(CLOSE); -shape(obj); +shape(obj); diff --git a/android/examples/OpenGL/Retained/Primitive/Primitive.pde b/android/examples/OpenGL/Retained/Primitive/Primitive.pde index e216a9ff6..47854d798 100644 --- a/android/examples/OpenGL/Retained/Primitive/Primitive.pde +++ b/android/examples/OpenGL/Retained/Primitive/Primitive.pde @@ -3,7 +3,7 @@ boolean filled = true; boolean stroked = true; public void setup() { - size(400, 400, P3D); + size(400, 400, P2D); frameRate(60); fill(255, 0, 0); diff --git a/android/examples/OpenGL/Retained/Shape2_18/Shape2_18.pde b/android/examples/OpenGL/Retained/Shape2_18/Shape2_18.pde index d2f293b1e..854aa8060 100644 --- a/android/examples/OpenGL/Retained/Shape2_18/Shape2_18.pde +++ b/android/examples/OpenGL/Retained/Shape2_18/Shape2_18.pde @@ -1,4 +1,4 @@ -size(100, 100, P3D); +size(100, 100, P2D); smooth(); PShape obj = createShape(); diff --git a/android/examples/OpenGL/Shaders/EdgeDetect/EdgeDetect.pde b/android/examples/OpenGL/Shaders/EdgeDetect/EdgeDetect.pde index c78bce226..93aac2edf 100644 --- a/android/examples/OpenGL/Shaders/EdgeDetect/EdgeDetect.pde +++ b/android/examples/OpenGL/Shaders/EdgeDetect/EdgeDetect.pde @@ -1,5 +1,5 @@ // This example shows how to change the default fragment shader used -// in P3D to render textures, by a custom one that applies a simple +// in P2D to render textures, by a custom one that applies a simple // edge detection filter. // // Press any key to switch between the custom and the default shader. @@ -7,28 +7,28 @@ PImage img; PShader shader; PGraphicsOpenGL pg; -boolean usingShader; +boolean customShader; void setup() { - size(400, 400, P3D); + size(400, 400, P2D); img = loadImage("berlin-1.jpg"); pg = (PGraphicsOpenGL)g; - shader = pg.loadShader("edges.glsl", FILL_SHADER_TEX); - pg.setShader(shader, FILL_SHADER_TEX); - usingShader = true; + shader = pg.loadShader("edges.glsl", TEXTURE_SHADER); + pg.setShader(shader, TEXTURE_SHADER); + customShader = true; } public void draw() { image(img, 0, 0, width, height); } -public void keyPressed() { - if (usingShader) { - pg.resetShader(FILL_SHADER_TEX); - usingShader = false; +public void mousePressed() { + if (customShader) { + pg.defaultShader(TEXTURE_SHADER); + customShader = false; } else { - pg.setShader(shader, FILL_SHADER_TEX); - usingShader = true; + pg.setShader(shader, TEXTURE_SHADER); + customShader = true; } } diff --git a/android/examples/OpenGL/Shaders/FXAA/FXAA.pde b/android/examples/OpenGL/Shaders/FXAA/FXAA.pde new file mode 100644 index 000000000..75a7a9ff6 --- /dev/null +++ b/android/examples/OpenGL/Shaders/FXAA/FXAA.pde @@ -0,0 +1,95 @@ +// This example uses a FxAA post-processing filter for fast +// fullscreen antialiasing: +// http://www.kotaku.com.au/2011/12/what-is-fxaa/ +// +// Press any key to enable/disable the shader. + +PGraphics canvas; +boolean drawing = false; +PGraphicsOpenGL pg; +PShader shader; +boolean usingShader; +String message; +float msgLen; + +void setup() { + size(displayWidth, displayHeight, P2D); + orientation(LANDSCAPE); + noSmooth(); // doesn't realy matter, as mobile devices don't have anti-aliasing anyways + + canvas = createGraphics(width, height, P2D); + canvas.noSmooth(); + + pg = (PGraphicsOpenGL) g; + shader = pg.loadShader("fxaa.glsl", TEXTURE_SHADER); + pg.setShader(shader, TEXTURE_SHADER); + usingShader = true; + + canvas.beginDraw(); + canvas.background(255); + canvas.stroke(0); + canvas.strokeWeight(15); + canvas.strokeCap(ROUND); + canvas.endDraw(); + + PFont font = createFont("Arial", 18); + textFont(font); + updateMessage(); + + drawing = false; +} + +public void draw() { + if (drawing) { + canvas.beginDraw(); + if (1 < dist(mouseX, mouseY, pmouseX, pmouseY)) { + canvas.line(pmouseX, pmouseY, mouseX, mouseY); + } + canvas.endDraw(); + } + + image(canvas, 0, 0); + + drawMessage(); +} + +public void mousePressed() { + if (!drawing && width - msgLen < mouseX && height - 23 < mouseY) { + if (usingShader) { + pg.defaultShader(TEXTURE_SHADER); + usingShader = false; + } else { + pg.setShader(shader, TEXTURE_SHADER); + usingShader = true; + } + updateMessage(); + } else { + drawing = true; + } +} + +void mouseReleased() { + drawing = false; +} + +void updateMessage() { + if (usingShader) { + message = "Anti-aliasing enabled"; + } else { + message = "Anti-aliasing disabled"; + } + msgLen = textWidth(message); +} + +void drawMessage() { + if (usingShader) { + // We need the default texture shader to + // render text. + pg.defaultShader(TEXTURE_SHADER); + } + fill(0); + text(message, width - msgLen, height - 5); + if (usingShader) { + pg.setShader(shader, TEXTURE_SHADER); + } +} diff --git a/android/examples/OpenGL/Shaders/FXAA/data/fxaa.glsl b/android/examples/OpenGL/Shaders/FXAA/data/fxaa.glsl new file mode 100644 index 000000000..693db482b --- /dev/null +++ b/android/examples/OpenGL/Shaders/FXAA/data/fxaa.glsl @@ -0,0 +1,69 @@ +// FXAA shader, GLSL code adapted from: +// http://horde3d.org/wiki/index.php5?title=Shading_Technique_-_FXAA +// Whitepaper describing the technique: +// http://developer.download.nvidia.com/assets/gamedev/files/sdk/11/FXAA_WhitePaper.pdf + +#ifdef GL_ES +precision mediump float; +precision mediump int; +#endif + +uniform sampler2D textureSampler; + +// The inverse of the texture dimensions along X and Y +uniform vec2 texcoordOffset; + +varying vec4 vertColor; +varying vec4 vertTexcoord; + +void main() { + // The parameters are hardcoded for now, but could be + // made into uniforms to control fromt he program. + float FXAA_SPAN_MAX = 8.0; + float FXAA_REDUCE_MUL = 1.0/8.0; + float FXAA_REDUCE_MIN = (1.0/128.0); + + vec3 rgbNW = texture2D(textureSampler, vertTexcoord.xy + (vec2(-1.0, -1.0) * texcoordOffset)).xyz; + vec3 rgbNE = texture2D(textureSampler, vertTexcoord.xy + (vec2(+1.0, -1.0) * texcoordOffset)).xyz; + vec3 rgbSW = texture2D(textureSampler, vertTexcoord.xy + (vec2(-1.0, +1.0) * texcoordOffset)).xyz; + vec3 rgbSE = texture2D(textureSampler, vertTexcoord.xy + (vec2(+1.0, +1.0) * texcoordOffset)).xyz; + vec3 rgbM = texture2D(textureSampler, vertTexcoord.xy).xyz; + + vec3 luma = vec3(0.299, 0.587, 0.114); + float lumaNW = dot(rgbNW, luma); + float lumaNE = dot(rgbNE, luma); + float lumaSW = dot(rgbSW, luma); + float lumaSE = dot(rgbSE, luma); + float lumaM = dot( rgbM, luma); + + float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE))); + float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE))); + + vec2 dir; + dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE)); + dir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE)); + + float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN); + + float rcpDirMin = 1.0/(min(abs(dir.x), abs(dir.y)) + dirReduce); + + dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX), + max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX), dir * rcpDirMin)) * texcoordOffset; + + vec3 rgbA = (1.0/2.0) * ( + texture2D(textureSampler, vertTexcoord.xy + dir * (1.0/3.0 - 0.5)).xyz + + texture2D(textureSampler, vertTexcoord.xy + dir * (2.0/3.0 - 0.5)).xyz); + vec3 rgbB = rgbA * (1.0/2.0) + (1.0/4.0) * ( + texture2D(textureSampler, vertTexcoord.xy + dir * (0.0/3.0 - 0.5)).xyz + + texture2D(textureSampler, vertTexcoord.xy + dir * (3.0/3.0 - 0.5)).xyz); + float lumaB = dot(rgbB, luma); + + if((lumaB < lumaMin) || (lumaB > lumaMax)){ + gl_FragColor.xyz=rgbA; + } else { + gl_FragColor.xyz=rgbB; + } + gl_FragColor.a = 1.0; + + gl_FragColor *= vertColor; +} diff --git a/android/examples/OpenGL/Shaders/ToonShading/ToonShading.pde b/android/examples/OpenGL/Shaders/ToonShading/ToonShading.pde index f9ad52101..8c5d6f8af 100644 --- a/android/examples/OpenGL/Shaders/ToonShading/ToonShading.pde +++ b/android/examples/OpenGL/Shaders/ToonShading/ToonShading.pde @@ -5,7 +5,7 @@ PShader shader; PGraphicsOpenGL pg; -boolean usingShader; +boolean customShader; public void setup() { size(400, 400, P3D); @@ -13,9 +13,9 @@ public void setup() { fill(204); pg = (PGraphicsOpenGL)g; - shader = pg.loadShader("ToonVert.glsl", "ToonFrag.glsl", FILL_SHADER_LIT); - pg.setShader(shader, FILL_SHADER_LIT); - usingShader = true; + shader = pg.loadShader("ToonVert.glsl", "ToonFrag.glsl", LIGHT_SHADER); + pg.setShader(shader, LIGHT_SHADER); + customShader = true; } public void draw() { @@ -28,14 +28,15 @@ public void draw() { sphere(80); } -public void keyPressed() { - if (usingShader) { - pg.resetShader(FILL_SHADER_LIT); - usingShader = false; - } - else { - pg.setShader(shader, FILL_SHADER_LIT); - usingShader = true; +public void mousePressed() { + if (dist(mouseX, mouseY, width/2, height/2) < 80) { + if (customShader) { + pg.defaultShader(LIGHT_SHADER); + customShader = false; + } + else { + pg.setShader(shader, LIGHT_SHADER); + customShader = true; + } } } -