Chinese Masks

Just some random idea to create a traditional chinese mask with different colors, next step will be build a real 3D model.

chineseMask01chineseMask02chineseMask03chineseMask04chineseMask05chineseMask06chineseMask07chineseMask08chineseMask09chineseMask10chineseMask11

and here is a amazing motion design of chinese mask :

Circles with processing and Adobe Kuler

screen-1590
screen-3800screen-3582screen-3558screen-3437screen-3145screen-2934screen-2791screen-2678screen-1855screen-1590screen-1299screen-1095

Learning OpenGL with Processing

Learning OpenGL with Processing is easy, there is not too much setups to do, just create a simple processing class, and with these 2 lines of code you are ready to go :

PGraphicsOpenGL _pgl = (PGraphicsOpenGL) g;
GL _gl = _pgl.beginGL();

and in the end of draw, don't forget to call

_pgl.endGL();

and for learning OpenGL, i think the best way to start is through the lessons of Nehe, all the lessons come with source code, although his code are in C++, but they are converted to several other language as well and JOGL is included.

Here are some demos i did this morning, I have to say it's really easy to start, in a very short time you can build an amazing effect in 3D which is going to take much more time to do it in flash, especially theses kind of simple graphic like dots, lines and triangles, because you don't have a simple method to draw these thing in stage3D, not mention that you have to create your own vertex buffer, index buffer, and and handling the view and camera ... etc, but again I am only a beginner into this field, and I believe things will get more complicated as I move deeper into this. Anyway it's always feel good to learn a new thing and to discover the new possibilities.

03_sphere103_sphere002_triangle102_triangle001_lines101_lines000_dots100_dots0

p.s. 講中文的同胞有福了,有善心人士把NEHE翻譯成中文了,連結在這邊,真是佛心來著!

 

 

Processing and Sunflow

invaders0
invaders0invaders1invaders2invaders3invaders4invaders5invaders6

Do you want a nice looking light render of your processing work? now you can have it easily with P5SunflowApiApi, it's easy to use, just call

size(1280, 720, "sunflowapiapi.P5SunflowAPIAPI");

and for the rendering :

sunflow.render("invaders.png");

that's it, isn't it amazing, and there are more to discover, take a look on this excellent article who has lots more detail this library

http://amnonp5.wordpress.com/2010/09/28/sunflow-processing/

Particle Video with Processing

I've been developing a lot on processing, it's really interesting to learn and discover a new language, and also i get involved a lot into OpenGL as well. I must say the power of OpenGL really surprises me, when you see your work runs smoothly with a good fps and in a full screen size that's just awesome. I am not an expert on OpenGL but still I found it easy to use, at lease to create this kind of particle effect, it doesn't take me too much time to find the solution, I understand for advance effect sure it will be more complicated but for beginning actually it's similar to Processing. I really have a lot of in it, hope i can come up with more interesting works.

And here is how I do to use OpenGL to draw "Point" instead of using the Point(x, y, z) in processing, and I have a lot of improvements on performance :

PGraphicsOpenGL _pgl = (PGraphicsOpenGL) this.g;
GL _gl = _pgl.beginGL();
_gl.glPointSize(RADIUS);
_gl.glBegin(GL.GL_POINTS);

_gl.glColor4f(red(color), green(color), blue(color), 1);
_gl.glVertex3f(x, y, z);

_gl.glEnd();
_pgl.endGL();

of course, don't forget set your mode to OPENGL to be able to use it :

size(screenWidth, screenHeight, OPENGL);

and you can easily change the size of your point by modifying the parameter "RADIUS", just remember you have too call this before your call gl.begin(GL.GL_POINTS);

P.S. By the way, I really don't know the best way to encode my video, it always looks "crappy" :(

Kinect with Processing

Recently I finally have some time to play with kinect, it's really interesting, and this is my first test :

I use OpenKinect from Daniel Shiffman, it's really easy to use, you can find it here.

 

And I try to develop on eclipse, but i encounter some problems, luckily i found solutions for that, here are some tips that might be help:

1. To get started, you can start from this article : http://processing.org/learning/eclipse/

2. Import OpenGL library : you can check this article : http://processing.org/discourse/beta/num_1114400513_30.html

I followed the instructions of "letsgooutside" and it works perfectly.

3. Import Video library, it just like importing opengl libraries, but just one small thing : in the project properties -> Run/Debug Setting/ -> Arguments -> VM Arguments

have to add "-d32" to make it work , you can take a look on this article, there are detail instructions inside

and for the OpenKinect you have to add this "-d32" as well to make it work, i've struggled a little bit to find this.

 

Ray light pixel bender effect

Having fun with Pixel Bender in a friday afternoon, source code on wonderfl,

Ray Lights - wonderfl build flash online

check the result here or click on the images.

Particle Video V2

If you haven't seen this amazing project, I strongly suggest you to take a look.

After seeing this project, i thought about my previous particle video project, and thinking of add more elements, especially i want to recreate that kind of feeling that the particle is created then last for certain time and die away, but it's seems to be a huge task to push more particles on the screen, but at the end, it turns out simpler then I thought.

The idea is simple: create particles base on current image, then keep render it and its previous images until it reach its end, the most important part is that in each frame, we only upload the data (vertex buffer) of current image then store it, so we don't need to upload every images in every frame, this saves us a huge amount of time, secondly, the coordinate of the pixel is never changed, x and y are always the same, and the z is calculated in AGAL based on the color of the pixel, so this part can be reused, therefore the only thing we need to re-upload every time is the colors, you can find the source code here on wonderfl.

Particle Video - wonderfl build flash online

and another bigger version goes to here.

Playing with lights

Recently I become very interested in light effects, and I found an amazing light effect on wonderfl:

yonatan challenge for people with nothing better to do - wonderfl build flash online

 

at the same time i come across the work of this amazing artist : http://alicexz.deviantart.com/ , then I saw this picture, it's so beautiful and i couldn't help thinking what will it be with the light effect i found? so i just give it a try, i remove the brighter part so it becomes transparent, where the light can come through, the result is very interesting, you can see it here or click on the image.

There is a trick when i was adding those particles, in fact all was drawn in a single BitmapData, to create a hole in a BitmapData you can use BitmapData.draw() method combine with BlendMode.ERASE, but here comes the tricky part : when you passing the object you wish to draw, it can't be a BitmapData, it must be a shape, a Bitmap or something else, like this :

bitmapData.draw(bitmapLattern, mtx, ct, BlendMode.ERASE, null, true); // working
bitmapData.draw(bitmapDataLattern, mtx, ct, BlendMode.ERASE, null, true); // not working

After testing this, i was fascinated by it, and i want to try it on a chinese painting, i took a vary famous painting of chinese : http://en.wikipedia.org/wiki/Along_the_River_During_the_Qingming_Festival

it's a very beautiful painting but also very big, so i can't preprocess it in PhotoShop and export an PNG, it will be too large, therefore i create a little Pixel Bender Program to do the task for me :

#define getLength(color) color.r*color.r + color.g*color.g + color.b*color.b                              

void
evaluatePixel() {               
   float2 pos = outCoord();
   float4 color = sampleLinear(src, pos);
   color.a = 1.0 - getLength(color)/3.0;
   dst = color;
}

so the brighter a pixel is, the more transparent it will be, you can check the result here, or click on the image as well.

P.S.  Both 2 take some time to load because the image is big, be patient :)

Animate Colors with Perlin Noise

Kulers - wonderfl build flash online

The effect i mentioned before for the circle spectrum, now the full source code including the pixel bender is on wonderfl.