We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Page Index Toggle Pages: 1
deepth Blur effect (Read 977 times)
deepth Blur effect
Jan 13th, 2008, 10:07am
 
Hello,
i writed a small Sketch to draw many worms who swimming around. After this i create 5 layers where they swim.
The layers are translatet in the Z-axis.

Is it possible with OpenGL that i give the Worms a higher blur effect depending on the Z-value?

Here is my Code.

Code:

import processing.opengl.*;
import javax.media.opengl.*;

worm[] w = new worm[100];

PGraphicsOpenGL pgl;
GL gl;

float rY;
float rZ;
float rX;

void setup(){
size(400, 400, OPENGL);
smooth();
hint(ENABLE_OPENGL_4X_SMOOTH);

for(int i=0; i<w.length; i++) {
w[i] = new worm();
}

}

void draw() {

pgl = (PGraphicsOpenGL) g;
gl = pgl.gl;

pgl.beginGL();
gl.glDisable(GL.GL_DEPTH_TEST);
gl.glEnable(GL.GL_BLEND);
gl.glBlendFunc(GL.GL_SRC_ALPHA,GL.GL_ONE);
pgl.endGL();

background(0);
translate(width/2,height/2,rX);
rotateY(radians(rY));
rotateX(radians(rZ));
translate(-width/2,-height/2,rX);

//drawing of all worms
for(int i=0; i<w.length; i++) {
w[i].paint();
}
}


//Beginning of the Worm class
//-----------------------------------------------------------
class worm {

int wormlength = int(random(5,50));
float[] x = new float[wormlength];
float[] y = new float[wormlength];


float diremeter = random(1, 8);


float left = 100, right = width-100, bottom = 100, top = height-100;
float xMax = 10, yMax = 10;
float xPos = 300, yPos = 300;
float xLimit, yLimit, xSpeed, ySpeed, xDelta, yDelta;

int deepth = int(random(5))*-50;

void paint(){

moving();

noStroke();
fill(100,100,255,125);

dragSegment(0, xPos, yPos);
for(int i=0; i<x.length-1; i++) {
dragSegment(i+1, x[i], y[i]);
}
}

void dragSegment(int i, float xin, float yin) {
float dx = xin - x[i];
float dy = yin - y[i];
float angle = atan2(dy, dx);
x[i] = xin - cos(angle) * diremeter;
y[i] = yin - sin(angle) * diremeter;
segment(x[i], y[i], angle);
}

void segment(float x, float y, float a) {
pushMatrix();
translate(x, y, 50+deepth);
rotate(a);
rect(0, 0, diremeter/2, diremeter*2);
popMatrix();
}

//the moving is based on a sketch
//"http://www.flight404.com/p5/bouncers11/"
void moving(){
if (xPos < left){
xDelta = random(0,1);
} else if (xPos > right){
xDelta = random (-1,0);
} else {
xDelta = random(-1,1);
}

if (yPos < bottom){
yDelta = random(0,1);
} else if (yPos > top){
yDelta = random (-1,0);
} else {
yDelta = random(-1,1);
}

xSpeed = xSpeed + xDelta;
ySpeed = ySpeed + yDelta;

if (xSpeed > xMax){
xSpeed = xMax;
} else if (xSpeed < -xMax){
xSpeed = -xMax;
}

if (ySpeed > yMax){
ySpeed = yMax;
} else if (ySpeed < -yMax){
ySpeed = -yMax;
}

xPos = xPos + xSpeed*0.1;
yPos = yPos + ySpeed*0.1;
}

}

void keyPressed() {
if ( key =='+') {
rX += 5;
}else if ( key =='-') {
rX -= 5;
}

if (key == CODED) {
if ( keyCode ==LEFT) {
rY-=3;
}else if ( keyCode ==RIGHT) {
rY+=3;
}else if ( keyCode ==UP) {
rZ-=3;
}else if ( keyCode ==DOWN) {
rZ+=3;
}
}
}



I want to create a similar effect like in the game Flow.
>> http://intihuatani.usc.edu/cloud/flowing/

I hope you can help me. Smiley
Re: deepth Blur effect
Reply #1 - Jan 20th, 2008, 9:08pm
 
Calculating Blur effects is very slow. Just render five blur states in Photoshop as  png's and import them as textures. I tried a sharp pic and a very blured pic and blended them with tint(255, 255, 255, alpha), which gives a nice effect, kind of linear bluring...
Re: deepth Blur effect
Reply #2 - Jan 21st, 2008, 6:19pm
 
Thats an idea.
The option with blending is allready in my main sketch, all i had to do is to change the rect(); objects with png´s.

I think i can manage that. Smiley

Thanks for your request.
Re: deepth Blur effect
Reply #3 - Jan 21st, 2008, 6:26pm
 
you can even generate preblured images with processing:

sharp = loadImage("bild1.jpg");
blur = loadImage("bild1.jpg");
blur.filter(BLUR, 10);

but leave a little space in your png's around the shapes
Page Index Toggle Pages: 1