How to use Matrix3D.appendTranslation()? - actionscript-3

With stage 3d I set up a basic triangle, and I can use append rotation and append scale and everything works, but using append translation on the z axis, the triangle will dissapear with the translation being 1 or higher. With other shapes it would dissapear with only 3 or higher. And it doesn't look like the triangle is getting any smaller/farther away between 0 and 0.9 translation. The translation on the x and y axis do work though.
Here are my shader codes:
private static const VERTEX_SHADER_SOURCE:String = "m44 op, va0, vc1";
private static const FRAGMENT_SHADER_SOURCE:String = "mov oc, fc0";
my render loop:
addEventListener(Event.ENTER_FRAME, enter);
var t:Number=0;
function enter():void {
context3D.clear();
context3D.setProgram(program);
var m:Matrix3D = new Matrix3D;
m.appendTranslation(0, 0, t);
t+=0.01;
context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 1, m, true);
context3D.setVertexBufferAt(0, buffer, 0, Context3DVertexBufferFormat.FLOAT_3);
context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 0, color);
context3D.drawTriangles(indexBuffer);
context3D.present();
}
my full code:
var assembler:AGALMiniAssembler = new AGALMiniAssembler();
assembler.assemble(Context3DProgramType.VERTEX, VERTEX_SHADER_SOURCE);
if (assembler.error) {
trace("vertex shader error " +assembler.error);
return;
}
var vertexShaderByteCode:ByteArray = assembler.agalcode;
assembler.assemble(Context3DProgramType.FRAGMENT, FRAGMENT_SHADER_SOURCE);
if (assembler.error) {
trace("fragment shader error " + assembler.error);
return;
}
var fragmentShaderByteCode:ByteArray = assembler.agalcode;
var program:Program3D = context3D.createProgram();
try {
program.upload(vertexShaderByteCode, fragmentShaderByteCode);
}
catch (err:Error) {
trace("couldnt upload shader program" + err);
return;
}
color = new <Number>[0.9296875, 0.9140625, 0.84765625, 1];
var verts:Vector.<Number> = Vector.<Number>([
0.5, 0, 0,
-0.5, 0, 0,
0, 0.5, 0
]);
var buffer:VertexBuffer3D = context3D.createVertexBuffer(3, 3);
buffer.uploadFromVector(verts, 0, 3);
var indices:Vector.<uint> = Vector.<uint>([0, 1, 2])
var indexBuffer:IndexBuffer3D = context3D.createIndexBuffer(3);
indexBuffer.uploadFromVector(indices, 0, 3);
addEventListener(Event.ENTER_FRAME, enter);
var t:Number=0;
function enter():void {
context3D.clear();
context3D.setProgram(program);
var m:Matrix3D = new Matrix3D;
m.appendTranslation(0, 0, t);
t+=0.01;
context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 1, m, true);
context3D.setVertexBufferAt(0, buffer, 0, Context3DVertexBufferFormat.FLOAT_3);
context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 0, color);
context3D.drawTriangles(indexBuffer);
context3D.present();
}

Related

How to create 2D shapes with n-sides in WebGL using keyboard input?

I'm trying to create a program in WebGL that allows you to draw or create shapes of n-size via keyboard input. The user enters in the number of sides to generate a shape with that many sides. So, if you press '3', you will get a triangle, if you press '4', you will get a square, if you press '5', you will get a pentagon, etc.
So far, I've been able to create seperate pieces of code that create triangles, squares, pentagons, etc. without keyboard input but I'm not sure how to go about generating shapes within the same program with n-sides via user/keyboard input. How would I go about doing this?
Examples of my code so far:
Drawing a triangle:
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
'}\n';
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
function main() {
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to initialize shaders.');
return;
}
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, n);
}
function initVertexBuffers(gl) {
var vertices = new Float32Array([
0, 0.5, -0.5, -0.5, 0.5, -0.5
]);
var n = 3; // The number of vertices
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
return n;
}
Drawing a square:
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
'}\n';
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
function main() {
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to initialize shaders.');
return;
}
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
}
function initVertexBuffers(gl) {
var vertices = new Float32Array([
-1, -1, -1, 1, 1, 1, 1, -1, -1, -1,
]);
var n = 5; // The number of vertices
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
return n;
}
You can start by writing a function computing vertices positions for a polygon with the number of sides as param.
For example, this one computes the polar coordinates of the polygon within a circle of given radius. You can write your own one.
computePolygonPositions(sides, radius)
{
let positions = []
for (let i=0; i<sides; i++)
{
let i0 = i
let i1 = (i+1) % sides
let theta0 = 2.0 * Math.PI * i0 / sides
let theta1 = 2.0 * Math.PI * i1 / sides
let x0 = radius * Math.cos(theta0)
let y0 = radius * Math.cos(theta0)
let x1 = radius * Math.cos(theta1)
let y1 = radius * Math.cos(theta1)
positions.push(0, 0)
positions.push(x0, y0)
positions.push(x1, y1)
}
return positions
}
Of course, you can upgrade this function to add indices, tex coordinates, colors or anything you need.
Once you're done with it, just call it to create a new vertex buffer that you'll bind on ARRAY_BUFFER, set the layout and enable the position attribute.

as3 starling tile array

Im trying to make a tile array system using flashDevelop and starling.
I think i complete that but i dont understand how i make bounds,intersects between the tile array and my hero.
Note that i make it using tutorials around the internet and not along.
Here are the 2 classes
public class level1 extends Sprite
{
public var map:Array = [
[1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 1, 1, 1, 1],
];
//public var object:Image;
//public var data:int;
public function level1()
{
super();
this.addEventListener(starling.events.Event.ADDED_TO_STAGE, onAdd);
}
private function onAdd(event:Event):void
{
drawScreen(map, 90);
}
public function drawScreen(map:Array, cellSize:int = 90):void
{
for(var row:int = 0; row < map.length; row++)
{
for(var column:int = 0; column < map[row].length; column++)
{
var data:int = map[row][column];
// Empty tile, move onto the next item.
if(data == 0) continue;
var object:Image;
if (data == 1) object = new Image(Assets.getTexture("ESAYBTN"));
if (data == 2) object = new Image(Assets.getTexture("TITLE"));
if(object != null)
{
object.x = column * 94;
object.y = row * 29;
stage.addChild(object);
}
}
}
}
}
public class inGame extends Sprite
{
public var Hero:heroClass;
private var enem2:enemy2Class;
private var enemiesArray:Vector.<enemy2Class>;
private var posX:int;
private var posY:int;
private var hitpoints:int;
private var _level1:level1;
public function inGame()
{
super();
this.addEventListener(starling.events.Event.ADDED_TO_STAGE, onAdd);
}
private function onAdd(event:Event):void
{
this.removeEventListener(Event.ADDED_TO_STAGE, onAdd);
enemiesArray = new Vector.<enemy2Class>();
drawScreen();
}
private function drawScreen():void
{
Hero = new heroClass(50, 50, 1);
this.addChild(hero);
_level1 = new level1();
this.addChild(_level1);
createenemies(450, 50, 6);
createenemies(400, 50, 5);
createenemies(350, 50, 4);
createenemies(300, 50, 3);
createenemies(250,50, 2);
}
public function createenemies(posX:int, posY:int, hitpoints:int):void
{
var enemies:enemy2Class = new enemy2Class(posX,posY,hitpoints);
this.addChild(enemies);
enemiesArray.push(enemies);
}
public function hideInGame():void
{
this.visible = false;
}
public function showInGame():void
{
this.visible = true;
this.addEventListener(Event.ENTER_FRAME, gameLoop);
}
private function gameLoop(Event):void
{
var enemiestoloop:enemy2Class;
for (var i:uint = 0; i < enemiesArray.length; i++)
{
enemiestoloop = enemiesArray[i];
//enemiestoloop.x-=2;
if (enemiestoloop.bounds.intersects(enem.bounds))
{
enemiestoloop.x = 400;
enemiestoloop._hitpoints--;
}
if (enemiestoloop._hitpoints <= 0)
{
enemiesArray.splice(i, 1);
this.removeChild(enemiestoloop);
}
}
hero.y++;
if(hero.bounds.intersects("here goes the map???"))
{
hero.y--;
}
}
}
So how i write if the hero hit the map array object 1?
Add all the parts of the tile array to a single display object then just call intersects bounds on the single display object.

Proper way to apply translation to vertices

I have the simple vertex shader:
m44 op, va0, vc0
mov v0, va1
and the fragment shader:
mov oc, v0
I pass this vertices to it:
x y z w r g b
-0.3, -0.3, 0, 1, 1, 0, 0,
0, 0.3, 0, 1, 0, 1, 0,
0.3, -0.3, 0, 1, 0, 0, 1
The result triangle looks like I expected. Now I want to apply some translation to the result triangle. I have declared a matrix, call appendTranslation(0.2, 0, 0) and pass it to the vertex shader. The problem is that the triangle remained in the same position but with different vertices position. It looks like this:
Why I got this result, and what is the proper way to apply translation to vertices?
Here is full code of my program:
package tests
{
import com.adobe.utils.AGALMiniAssembler;
import flash.display.Sprite;
import flash.display3D.Context3D;
import flash.display3D.Context3DProgramType;
import flash.display3D.Context3DRenderMode;
import flash.display3D.Context3DVertexBufferFormat;
import flash.display3D.IndexBuffer3D;
import flash.display3D.Program3D;
import flash.display3D.VertexBuffer3D;
import flash.events.Event;
import flash.geom.Matrix3D;
import flash.utils.ByteArray;
[swf(width="500", height="500")]
public class Stage3dTest extends Sprite
{
private var _context:Context3D;
private var _vertexBuffer:VertexBuffer3D;
private var _indexBuffer:IndexBuffer3D;
private var _program:Program3D;
private var _mat:Matrix3D;
public function Stage3dTest() {
if (stage) {
onAddedToStage();
} else {
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
}
private function onAddedToStage(event:Event = null):void {
this.stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onStage3dContext3DCreate);
this.stage.stage3Ds[0].requestContext3D(Context3DRenderMode.SOFTWARE);
}
private function onStage3dContext3DCreate(event:Event):void {
_mat = new Matrix3D();
_mat.appendTranslation(0.2, 0, 0);
_context = this.stage.stage3Ds[0].context3D;
_context.configureBackBuffer(500, 500, 0, false);
_vertexBuffer = _context.createVertexBuffer(3, 7);
_indexBuffer = _context.createIndexBuffer(3);
var p:Number = 0.3;
var vertexData:Vector.<Number> = new <Number>[
-p, -p, 0, 1, 1, 0, 0,
0, p, 0, 1, 0, 1, 0,
p, -p, 0, 1, 0, 0, 1
];
_vertexBuffer.uploadFromVector(vertexData, 0, 3);
_indexBuffer.uploadFromVector(new <uint>[0, 1, 2], 0, 3);
createAndCompileProgram();
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function createAndCompileProgram():void {
_program = _context.createProgram();
var assembler:AGALMiniAssembler = new AGALMiniAssembler();
var code:String = "";
code += "m44 op, va0, vc0\n"+
"mov v0, va1\n";
var vertexShader:ByteArray = assembler.assemble(Context3DProgramType.VERTEX, code);
code = "mov oc, v0\n";
var fragmentShader:ByteArray = assembler.assemble(Context3DProgramType.FRAGMENT, code);
_program.upload(vertexShader, fragmentShader);
}
private function onEnterFrame(event:Event):void {
_context.clear(0.9, 0.9, 0.9, 1);
_context.setProgram(_program);
_context.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, _mat);
_context.setVertexBufferAt(0, _vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_4);
_context.setVertexBufferAt(1, _vertexBuffer, 4, Context3DVertexBufferFormat.FLOAT_3);
_context.drawTriangles(_indexBuffer);
_context.present();
}
}
}
You need to transpose a matrix. You can do it manually or you can pass a parameter here:
_context.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, _mat, true);

Adding contrast and brightness to image in flex

How can i implement brightness and contrast changes for image in flex
I need to develop a tool for adding brightness or contrast and reducing it
Use ColorMatrixFilter and assigned below matrix to its matrix property
var contrastAdj:ColorMatrixFilter = ColorMatrixFilter(filters.getItemAt(0));
contrastAdj.matrix = getContrastMatrix(value);
private static function getContrastMatrix(value:Number):Array
{
value /= 100;
var s: Number = value + 1;
var o : Number = 128 * (1 - s);
var m:Array = new Array();
m = m.concat([s, 0, 0, 0, o]); // red
m = m.concat([0, s, 0, 0, o]); // green
m = m.concat([0, 0, s, 0, o]); // blue
m = m.concat([0, 0, 0, 1, 0]); // alpha
return m;
}
for brightness matrix use this function
private static function getBrightnessMatrix(value:Number):Array
{
var m:Array = new Array();
m = m.concat([1, 0, 0, 0, value]); // red
m = m.concat([0, 1, 0, 0, value]); // green
m = m.concat([0, 0, 1, 0, value]); // blue
m = m.concat([0, 0, 0, 1, 0]); // alpha
return m;
}
pass values between -100 to 100 to functions.
You might use flash.geom.ColorTransform against an image, at least for previewing. If you need to have your image's pixels changed, I'd say use a Pixel Bender shader that will do what you need. Note however, you will need a backup copy should you desire to change the parameters of that shader.

nested array does not work

I have the following problem: I have this multi-level array (nested array) which contains two rows of bitmapData. Row 1:360 rotated bitmapData objects; row 2: 360 rotated and colored bitmapData objects.
I try to access row 2 but that doesn't work. There are some mysterious error messages coming up ("TypeError: Error #1034: Type Coercion failed: cannot convert []#36d7e9e9 to flash.display.BitmapData. at BasicBlitArrayObject/updateFrame()").
Please can someone help me out with this problem? Thank you very much.
this function rotates and colors bitmapData; the rotated bitmapData is thrown into an array and the colored bitmapData is thrown into another array; a third array is used as a level array for nesting the other two arrays inside of it
public function createColoredRotationBlitArrayFromBD(sourceBitmapData:BitmapData, inc:int, offset:int = 0, color:Number = 1, $alpha:Number = 1):Array
{
tileList = [];
tileListSec = [];
levelArray = [tileList, tileListSec];
var rotation:int = offset;
while (rotation < (360 + offset))
{
var angleInRadians:Number = Math.PI * 2 * (rotation / 360);
var rotationMatrix:Matrix = new Matrix();
rotationMatrix.translate(-sourceBitmapData.width * .5, -sourceBitmapData.height * .5);
rotationMatrix.rotate(angleInRadians);
rotationMatrix.translate(sourceBitmapData.width * .5, sourceBitmapData.height * .5);
var matrixImage:BitmapData = new BitmapData(sourceBitmapData.width, sourceBitmapData.height,
true, 0x00000000);
matrixImage.draw(sourceBitmapData, rotationMatrix);
tileList.push(matrixImage.clone());
bitmapData = new BitmapData(matrixImage.width, matrixImage.height, true, 0x00000000);
bitmapData = matrixImage;
var colorMatrix:ColorMatrixFilter = new ColorMatrixFilter (
[color, 0, 0, 0, 0,
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
0, 0, 0, $alpha, 0]);
matrixImage.applyFilter(bitmapData, bitmapData.rect, point0, colorMatrix);
tileListSec.push(matrixImage.clone());
rotation += inc;
matrixImage.dispose();
matrixImage = null;
rotationMatrix = null;
bitmapData.dispose();
bitmapData = null;
colorMatrix = null;
}
return(levelArray);
}
creating my rotated and colored bitmapData
animationFrames = tempBlitArrayAsset.createRotationBlitArrayFromBD($bitmapData, 1, 270);
here I try to access the first row of my level array (that doesn't work; I can't access it)
tempEnemy.animationList = animationFrames;
tempEnemy.bitmapData = tempEnemy.animationList[1][tempEnemy.frame];
This function is for updating the frames
public function updateFrame(inc:int, row:int = 0):void
{
frame += inc;
if (frame > animationList.length - 1){
frame = 0;
}
bitmapData = animationList[row][frame];
}
}
this is a line showing how the updateFrame-function is used in my game (trueRotation is 0)
tempEnemy.updateFrame(tempEnemy.trueRotation);
I can't find anything wrong with createColoredRotationBlitArrayFromBD
var $bitmapData:BitmapData = new BitmapData(40,40,false, 0x7f7f7f);
var animationFrames:Array = createColoredRotationBlitArrayFromBD($bitmapData, 1, 270);
trace(animationFrames.length); // 2
trace(animationFrames[0].length); // 360
trace(animationFrames[1].length); // 360
var bitmap:Bitmap = new Bitmap();
this.addChild(bitmap);
bitmap.bitmapData = animationFrames[1][0]; // works..
That seems correct. Right? I get a red tinted bitmap.
The only 'bug' I see in the code you listed is in updateFrame
if (frame > animationList.length - 1){
frame = 0;
}
should probably be:
if (frame > animationList[row].length - 1){
frame = 0;
}
because animationList.length == 2
But everything else looks okay in the code you've provided, so without more code, i'm not sure there is anything to help.