bongiovi's -

Cubes with camera

Posted by bongiovi on 2012 年 02 月 06 日 No comments

based on my last experiment, instead of using a perlin noise map, i tried with the camera, and the result is quite funny, you can click on the image or here to test it

source code is here

[AGAL] Kuler Cubes

Posted by bongiovi on 2012 年 02 月 06 日 No comments

Playing with cubes and colors from adobe Kuler, the target is to modify the color of each face of the cube and the size of the cube without re-uploading the whole vertex buffer, and this is how i do it, let's check the vertex buffer first :

var vBuf:Vector. = Vector.([
-1,	-1,	-1,		11,		//	TOP
1,	-1,	-1,		11,
1,	-1,	 1,		11,
-1,	-1,	 1,		11, 
 
-1,	-1,	 1,		12,		//	FRONT
1,	-1,	 1,		12,
1,	 1,	 1,		12,
-1,	 1,	 1,		12,
 
1,	-1,	-1,		13,		//	RIGHT
1,	 1,	-1,		13,
1,	 1,	 1,		13,
1,	-1,	 1,		13,
 
-1,	-1,	-1,		14,		//	BACK
1,	-1,	-1,		14,
1,	 1,	-1,		14,
-1,	 1,	-1,		14,
 
-1,	-1,	-1,		15,		//	LEFT
-1,	-1,	 1,		15,
-1,	 1,	 1,		15,
-1,	 1,	-1,		15,
 
-1,	 1,	-1,		16,		//	BOTTOM
1,	 1,	-1,		16,
1,	 1,	 1,		16,
-1,	 1,	 1,		16
]);

so as you can see, beside the 3 first elements ( x, y, z) , there's the 4th element which represent the index of the Program Constants, from vc11 ~ vc16, which will be the color of the face, and we can set our constants like this :

data = Vector.([color0.r/255, color0.g/255, color0.b/255, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 11, data);
 
data = Vector.([color1.r/255, color1.g/255, color1.b/255, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 12, data);
 
data = Vector.([color2.r/255, color2.g/255, color2.b/255, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 13, data);
 
data = Vector.([color3.r/255, color3.g/255, color3.b/255, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 14, data);
 
data = Vector.([color4.r/255, color4.g/255, color4.b/255, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 15, data);
 
data = Vector.([color5.r/255, color5.g/255, color5.b/255, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 16, data);

then let's take a look into the AGAL code

code += "mov vt0, va0\n";
code += "mul vt0, vt0, vc9\n";		//	multiply by the size of the cube
code += "mov vt0.w, vc9.w\n";		//	reset the w value to 1
code += "m44 op, vt0, vc0\n";
code += "mov v0, vc[va0.w]\n";		//	get the correspond colo

so whenever we want to change the color of a face, all we need is just to reset the correspond constants and no need for re-uploading all, and this is it , it's quite simple but effective. you can click on the image or here to see the result, i created an array of cubes and make them move with a perlin noise, the movement is quite interesting. hope you enjoy and send me a mail if you wish to get the source code.

AGAL Image with Depth

Posted by bongiovi on 2012 年 01 月 30 日 No comments

Still the same idea from the particle video, but there's a useful trick i learned from http://www.simppa.fi/blog, it allows me to change the size of particle without reuploading the whole vertex buffer, as a result, you can get a very good performance seeing that you only change some constants.

so let's take a look quickly, first are these for constants :

var data:Vector. = Vector.([-1, -1, 0, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 10, data, 1);
data = Vector.([ 1, -1, 0, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 11, data, 1);
data = Vector.([ 1,  1, 0, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 12, data, 1);
data = Vector.([-1,  1, 0, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 13, data, 1);

these four points represent the 4 corners, with the offsets (-1, -1), (1, -1), (1, 1), (-1, 1), so every time i want to draw a particle, i just find the correspond offset of current vertex, add it together then i'll get the final position. Now the problem is that the offset is always 1, i want to be able to change this, so i create another constant for modify the size that i want :

var data:Vector. = Vector.([size, size, size, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 9, data, 1);

so before adding the offset to the vertex position, we have to multiply this size with our offset, then we can get our desired size, now here comes the tricky part : How can i get the correspond offset ? we have already upload these offsets, but how do i tell AGAL that for this vertex i want this offset ? turns out AGAL can accept syntax like this : vc[va0.w]

code += "mov vt0, vc[va0.w]\n";
code += "mul vt0, vt0, vc9\n";
code += "div vt2, va1, vc7\n";
code += "mul vt3, vt2, vt2\n";
code += "add vt3.x, vt3.x, vt3.y\n";
code += "add vt3.x, vt3.x, vt3.z\n";
code += "div vt3.x, vt3.x, vc8.y\n";
code += "mul vt3.x, vt3.x, vc8.z\n";
code += "sub vt3.x, vc8.w, vt3.x\n";
code += "div vt3.y, vc9.w, vt3.x\n";
code += "mul vt0.xyz, vt0.xyz, vt3.y\n";
code += "add vt1, va0, vt0\n";
code += "mov vt1.z, vt3.x\n";
code += "mov vt1.w, vt0.w\n";
code += "m44 op, vt1, vc0\n";
code += "mov v0, vt2\n";

then it's straight forward, when filling the data for the vertices, instead of x, y, z, we'll add 1 more element as an index to its offset :

vBuf[index++] = x;
vBuf[index++] = y;
vBuf[index++] = z;
vBuf[index++] = indexToOffset;  //  10 / 11 / 12 / 13

And this is all, a very useful trick, but save us a lot of time to re-upload all the positions, hope you enjoy it, the source code is kind of a mess, but if you still interested in, send me a mail and i'll prepare a clean version for you.

update 01/31 : A larger Version of demo here : http://www.bongiovi.tw/experiments/ImageDepth/

Marcel Carte de voeux – the Invader

Posted by bongiovi on 2012 年 01 月 20 日 No comments

My invader project was chosen to be the wish card ( carte de voeux ) of Marcel this year, and amazingly a lot of people show their interests on this subjects, and things went behind my imagination, a lot of beautiful creations and ideas, it really makes me very happy that so much people participe in this i just wish to see more creation outside paris and france, the project page is here, let's have the invaders all around the world !

AGAL 3D Waves

Posted by bongiovi on 2012 年 01 月 20 日 No comments

This is a little test i've done with stage3D, i took a perlin noise map and get the color from each pixel, with this color i can have the brightness value, and use it as the height of the wave, so the vertex is like this :
x : pixel's x
y : brightness value
z : pixel's y

and then draw them into the 3D space with some rotation matrix base on the position of mouse then i have this simple waves, the challenge part was how to put the calculation in AGAL, as a beginner of AGAL this is really painful to me , but luckily i've got it at the end, here are my AGAL codes for the vertex shader :

var agal : AGALMiniAssembler = new AGALMiniAssembler;
var code : String = "";
code += "mov vt1, va0\n";
code += "div vt2, va1, vc9\n"; 	// divide by 255 to get color from 0 to 1
code += "mul vt3, vt2, vt2\n";	//	multiply buy itself
code += "add vt3.x, vt3.x, vt3.y\n";	//	adding up x and y
code += "add vt3.x, vt3.x, vt3.z\n";	//	adding up (x + y) and z
code += "div vt3.x, vt3.x, vc13.y\n";	//	divide by 3 to have the percentage from 0 to 1, this is our brightness
code += "mul vt3.x, vt3.x, vc13.z\n";   //	multiply by the max depth
code += "mov vt1.y, vt3.x\n";			//	put back to the y

and here are some constants i passed in to the agal :

var data:Vector. = Vector.([255, 3, DEPTH, 1]);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 13, data, 1);
context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 9, Vector.([255, 255, 255, 1]));

seems to be a little scary but it's really simple all it's doing is :

(color.r^2 + color.g^2 + color.b^2) / 255^2 * 3

and this is the brightness value from 0 to 1, then multiply by the max depth, then you have the actual depth, it's a simple example but very interesting, i found some ideas during doing this experiment, so more is coming up, i hope you enjoy it !

source code are available here

Plikums Sarunas / 010 – Eike König

Posted by bongiovi on 2012 年 01 月 18 日 No comments

"(the kids)they feel safe, they start playing, by playing they become creative, or playing itself is a creative act, by playing, they learn. So why not do the kids do ? "

so many golden words in this interview, a lot of things to think about. I like the part he talked about the process of a project, trying and failing but come again and become better, sadly in the real world there's not too much space for us to do that, but still i love this concept, and his words above is just incredible, it's exactly what's happening on my little daughter, we provide her what she need and a safe environment just as this guy says, and you can really tell the kid is really happy and play a lot, everyday she learns new stuff, it's exactly what he said : they feel safe, they play and by playing they learn.

And the part he talked about the educations is very interesting as well, it makes me thinking, yes i know how to pass the tests, but did i really learn something ? or i just learn how to deal with this "system" ? it just like my first year in paris, i went to the language school, i pass all the tests and make my way to the highest level, but i cannot speak, i cannot have a conversation with others, the only thing i know is how to pass the tests, but i'm not really learning french, i only start learning french and being able to have a conversation after i started working, which i have to talk, then i really learn how to deal with my problems.

List of learning resources of Adobe AGAL

Posted by bongiovi on 2012 年 01 月 17 日 No comments

Due to limit informations and resources we have on the internet for Adobe AGAL or Stage3D, here is a short list with the resources i've found helpful if you want to start from scatch, please feel free to share more in the comment.

Macro Scabia on Adobe Developer Connection

I really recommend to start with this series of articles, if you follow it from the begin to the end, you will have a nice view of Stage3D :

http://www.adobe.com/devnet/flashplayer/articles/how-stage3d-works.html
http://www.adobe.com/devnet/flashplayer/articles/vertex-fragment-shaders.html
http://www.adobe.com/devnet/flashplayer/articles/what-is-agal.html
http://www.adobe.com/devnet/flashplayer/articles/hello-triangle.html
http://www.adobe.com/devnet/flashplayer/articles/perspective-projection.html
http://www.adobe.com/devnet/flashplayer/articles/3d-cameras.html

wonderfl.net :

Wonderfl.net is such a wonderful place with a lot of master works, and there are a lot of experiments of stage3d, from the beginning to the advanced level, the only problem is sometime it doesn't have too much explanation on their code or it comes with Japanese ( it' won't be a problem if you speak japanese lol ), but still it has a lot of sources and ideas.

http://wonderfl.net/search?q=stage3d&x=0&y=0

simppa.fi

if you haven't see his work then you must check it out, it's amazing both visuels and performances, and he has developed his own particle framework on stage3D which is very stunning, and he is very kind to share it with everyone :

http://www.simppa.fi/blog/introducing-open-source-evospicyparticleengine/

These are the resources i found useful on the internet, as i said i'll be very honored if you can help me complete this list, hope you enjoy it !

Particle Video

Posted by bongiovi on 2012 年 01 月 16 日 No comments

Color is a very interesting subject, we all know that a color can be composite with red, green and blue, in the world of programing, that's how we define a color, for example : 0xFF6633 can be separate like FF | 66 | 33 which means FF for the red, 66 for the green, 33 for the blue, here we use hexadecimal so the FF means 16x16 -1 ( because we start from 0 ) so it's 255 and it's the max number of a color channel, you don't have to understand that but keep that in mind that FF is the max number that we can have, therefore 0xFFFFFFF means we have the max number on every channel, so we get a white color, 0xFF0000 for a pure red, 0x00FF00 for a green 0x0000FF for the blue and so on, so now for each color, we have 3 numbers to represent it : the Red Value, the Green value and the Blue Value, each of them has a value between 0 and 255, then let's take it to the next step: project it to 3D space, image what will it be if we take the red value as a X position, green value as a Y position and blue as a Z position? the answer is that you'll get a point in a 3D space ! OK, we're not going to be satisfied with just 1 point, let's try something more, how about a whole image, what will it happen if i put every pixel of an image into this 3D space ? the result is quite interesting!

as you can see from this example, we have a "cloud" from this image, pretty amazing doesn't it ? you can move it around to get a better view, and there is one thing interesting, the pixels who are close to the original point ( which is the (0, 0, 0) or the top left corner ) seems to be darker, the pixels who are far from this points are lighter, in fact this distance from point zero to the pixel represent the brightness of the color in math you can say that the length of this vector (pixel.x, pixel.y, pixel.z) is the brightness of the color, so this is something interesting, something we can play with.

so I came up with this idea, with a flat image, what will it be if for each pixel, I move it toward the screen by its brightness value? so the darker pixels will be in the far end, and the lighter pixels will be closer to the screen, and a single image is not enough, we're going to do it on the video, as a result, we have this effect:(click on the image or the url below to see it in action )

http://www.bongiovi.tw/#/particle-video

Voilà, this is how i did this particle video, to develop it is actually much more complicate because i'm experimenting the new technology of flash called "Stage3D" which enable us to use the GPU and have huge improvement on performance, allow us to create this kind of effect in fullscreen, however the concept is quite simple, just adding one more value to each pixel and you can have a different view for your image.

Particle systems seems to be only the toys to developers, seldom do we see any real projects with particles on the web, but here some good practices :

http://wearemusic.grammy.com

http://vimeo.com/29397342

so that's it, hope you enjoy it !

P.S. the source code of this experiment is a mess, but if you're still interested in, contact me and i'll clean it and send it to you