my task is to draw multiple circle at different points on the canvas. I have the circles vertices, but i can't seem to figure out how to draw all of them at the same time. I can draw each one separately, but not all five that I need.
My code looks like this
var vertices = [];
var blueCircle = drawCircle(-50,-50,200);
var yellowCircle= drawCircle(50,50,200);
var blackCircle= drawCircle(50,50,200);
var greenCircle= drawCircle(50,50,200);
var redCircle= drawCircle(50,50,200);
vertices.push(blueCircle);
vertices.push((yellowCircle);
vertices.push(blackCircle);
vertices.push(greenCircle);
vertices.push(redCircle);
This gives me a Vertices array that is made up of each circle array, as in
vertices:(5) [Array(2272), Array(2272), Array(2272), Array(2272), Array(2272)]
Is there a way for me to add each array in its components? As in have a vertices array that is made up of all 11360 elements?
If not, how could I possibly loop through the multidimensional array and draw each point using
gl.DrawArrays(GL_POINTS, number, number);
Related
Is there a way to get the actual intersection of to geometries with BabylonJS?
E.g. the intersection point of a line and a plane, the line intersection of two planes, the arc intersection of a sphere and a plane, etc...
Thanks!
I believe what you are looking for is the CSG (Constructive Solid Geometry) tools in Babylon.js. To use it you can reference this tutorial here.
Essentially what you want to do is the following:
CSG intersect (modified code from the link)
// a and b can be any mesh you define
var a = BABYLON.Mesh.CreateBox("box", 500, scene);
var b = BABYLON.Mesh.CreateBox("box", 500, scene);
// Convert to CSG meshes
var aCSG = BABYLON.CSG.FromMesh(a);
var bCSG = BABYLON.CSG.FromMesh(b);
var subCSG = bCSG.intersect(aCSG);
// Disposing original meshes since we don't want to see them on the scene
a.dispose();
b.dispose();
// Convert back to regular mesh from CSG mesh
subCSG.toMesh("csg", new BABYLON.StandardMaterial("mat", scene), scene);
For more uses of CSG you should check out the documentation.
I'm trying to to do some dynamic MovieClips placement here. I've been trying for a couple'o days and I can't find the right way to do the trick. It's the continuation for this. I didn't manage to properly make my MC's appear in the triangle, so I've made a pyramid of rectangles (suits my case better, beacuse I can change each of'em, to better fit my desired shape - a not-so-regular triangle).
Here's the code with some comments:
import flash.events.MouseEvent;
import flash.display.MovieClip;
btn_toys_2.confirm.addEventListener(MouseEvent.MOUSE_UP, confirmToys);
var toysPlc:Array = new Array(); //an array for a bunch of rectangles
var toAdd:int = 100 //this is supposed to be dynamic, user defined
var toy:MovieClip = new shar_001; //an MC from a library
for (var j:int=0; j<33; j++){
toysPlc.push("tPl_" + j); //here I add that bunch of rects into an array
}
function confirmToys(e:MouseEvent):void{
for (var k:int=0; k<toAdd; k++){ //supposed to add an "toAdd" amount of "toys"
var p:int = Math.random()*toysPlc.length; //^do so in a random rect
toysPlc[p].addChild(toy); //supposed to place a toy in a random rect
toy.x = Math.random()*toysPlc[p].width; //positioning
toy.y = Math.random()*toysPlc[p].height; //positioning
}
}
The error I get is: TypeError: Error #1006: value is not a function.
What I DID manage is to place a single toy in a random of these rects, tho I don't remember how :)
Thanks in advance!
EDIT: null asked me to clarify the case, so here's the whole picture:
I've got:
- triangle-like MC (since a triangle MC is a rectangle for flash anyway, I've solved this by creating a pyramid of 33 rectangles, layered on each other);
- toys (multiple frames to change whenever I need to);
- text field (to input the quantity of desired toys);
- confirm button (to make the magic happen once clicked);
Now I need a user to input a 3-digit number in the input field, press "confirm", and 0.4 of that quantity is supposed to appear in the "triangle-like MC".
For example: user inputs a number: 600, the end value is 600*0.4=240. Now 240 "toys" are randomly spreaded between my 33 rectangles, within their width (which is different for every single one).
Hope that explains a bit more.
A simplified sample of what I need here.
Is there a way to fill an array with MovieClips rather than String values? That would be THE answer to this question here.
There is in fact more than one way:
Place all the instance names into the Array when you create it:
var rectangles:Array = [instanceName1, instanceName2];
there are no quotation marks, which create string literals. Just the names.
This approach quickly becomes impractical for large numbers of objects.
Given that the instance names have a number component, iterate through the names in conjunction with getChildByName(). I assume that this is what you were trying with in your question:
var rectangles:Array = []; // initialise empty array
for (var j:int=0; j<33; j++){
rectangles.push(getChildByName("tPl_" + j));
}
original answer
toysPlc.push("tPl_" + j); //here I add that bunch of rects into an array
No you don't. You are filling the Array with String objects. It's totally unrelated to any rectangle whatsoever.
Now this next line, tries to call a function on each String, which fails.
toysPlc[p].addChild(toy);
The above is equivalent to
"tPl_0".addChild(toy);
"tPl_1".addChild(toy);
// etc.
A String doesn't have that method addChild.
I have a big MovieClip object composed of many small MovieClip objects. After the rotation of parent object, the coordinates of nested objects are changed. But the x and y properties of nested objects remains the same it was before rotation of parent. How to get updated coordinates?
For example, there is an object composed of two circles. Local coordinates of small circle is -34 0. After rotation the coordinates of the small circle is still -34 0, but global coordinates was obviously changed. Is there a way to obtain new global coordinates?
Yes, it's possible. The most straightforward way is to use localToGLobal function
In you example as3 can looks like:
//converts local (0, 0) of innerMc to global (stage) coordinates system
var point:Point = innerMc.localToGlobal(new Point(0, 0));
//another way (for better understanding) - converts innerMc
//coordinates in outerMc system (in your case it's (-34, 0)
var point2:Point = outerMc.localToGlobal(new Point(innerMc.x, innerMc.y));
Both options will give you the same result.
I'm trying to make a tile-based AS3 game that uses PNG images as the base for maps that loads them from the library and converts the data to an array with each pixel of data being an individual tile. Essentially, if I had a 128x128 pixel PNG with say, green pixels being converted to "GRASS" in my array, I could then cycle through the array and add tiles to the map movieclip accordingly.
I've looked at the ByteArray class and I can't seem to decode the data into a usable format. If anyone has a solution to do this, please let me know.
The BitmapData class seems like what you are looking for. Make sure the images in your library have there own class name, and that it's base class is Bitmap (in properties), then create an instance of the image, and loop through its bitmap pixel data using getPixel.
Something like this:
var image:Bitmap = new MyBMP();
var bmd:BitmapData = image.bitmapData;
for(var y:int=0; y < bmd.height; ++y)
{
for(var x:int=0; x < bmd.width; ++x)
{
var pixelValue:uint = bmd.getPixel(x, y);
trace(pixelValue.toString(16));
// Test if the pixelValue matches the colour you want.
}
}
Just a note, make sure to use getPixel32 if you are use alpha channel.
Hai, i am a newbie to actionscript.
i am trying to make a brush tool in actionscript 3, where kids can paint colors inside a circle using the brush. i have achieved this using linestyle. Now i want the brush to snap the color when the kid is about to complete(say when they are 95% to complete the painting). How do i know how much the kid has painted on the circle?
Thanks
How do i know how much the kid has
painted on the circle?
You can:
make your circles and other shapes Sprites to get separate container
render them into bitmap and count number of non-transparent pixels in it (you should know what number corresponds to 100%)
since counting pixels is heavy operation (can take hundreds of milliseconds, depending of shape size), you don't want to run it on every frame. I suggest to do it on MOUSE_UP, right after kid finishes next stroke.
How to count pixels:
function countPixels(shape:DisplayObject):int
{
var bd:BitmapData = new BitmapData(shape.width, shape.height);
bd.draw(shape);
//here you get sequence of ARGB-packed colors in vector
var pixels:Vector.<uint> = bd.getVector(bd.rect);
//AFAIK, fastest method to traverse vector is 'for' loop
var pixel:uint;
var filledCount:int = 0;
for (var i:int = pixels.length - 1; i >= 0; i--)
{
pixel = pixels[i];
//pixel is 32-bit ARGB color value, test upper 8 bits (alpha):
if ((pixel >> 24) > 0) filledCount++;
}
return filledCount;
}
Run this on filled shape to get total pixel count to compare with.
After pixelCount reaches 95%, you can clear kid's drawing and show filled shape.