I am working on a breakout type game with dynamically-created squares. When a brick gets hit, I fire off a removeMC function that is supposed to turn it white and make it shrink down in size. However, sometimes the squares just turn white instead of tweening down. I have included the script for the removeMV function as well as the function that creates the squares. Arg1 is the square to be removed. I apologize for the bad naming conventions, but the fire got corrupted and had to be recovered with a decompiler.
This is the removeMC function
public function removeMC(arg1:flash.display.Sprite):*
{
this.score --;
this.uiBar.txtScore.text=this.score;
var loc1:*=new flash.geom.ColorTransform();
loc1.color = 0xffffFF;
arg1.transform.colorTransform = loc1;
TweenMax.to(arg1, 0.4, {colorTransform:{tint:0x0000ff, tintAmount:1}});
var loc2:*=this.ballMC.x - this.ballMC.x % 30;
var loc3:*=this.ballMC.y - this.ballMC.y % 30;
arg1.scaleY = arg1.scaleY * -1;
// trace("Ball x:" + this.ballMC.x + " ballY:" + this.ballMC.y + " block x:" + loc2 + " block y:" + loc3);
var loc4:*=new fl.transitions.Tween(arg1, "width", null, 30, 0, 0.5, true);
var loc5:*=new fl.transitions.Tween(arg1, "height", null, 30, 0, 0.5, true);
var loc6:*=new fl.transitions.Tween(arg1, "x", null, 0, loc2, 0.5, true);
var loc7:*=new fl.transitions.Tween(arg1, "y", null, 0, loc3, 0.5, true);
this.brickArray.splice(this.indexSearch(this.brickArray, arg1), 1);
arg1.x+=3000;//failsafe to remove the squares. doesn't work
arg1.y+=3000;
return;
}
This is the function that creates the squares. Arg 1 and arg2 are the width and height in squares
public function createImgNodeGrid(arg1:int=1, arg2:int=1, arg3:Number=0):void
{
var loc6:*=0;
var loc7:*=null;
var loc8:*=null;
var loc9:*=null;
var loc10:*=null;
var loc1:*=this._img.width / arg1;
var loc2:*=this._img.height / arg2;
var loc3:*=arg1 * arg2;
this._imgNodes = [];
var loc4:*=0;
var loc5:*=0;
while (loc5 < arg1)
{
loc6 = 0;
while (loc6 < arg2)
{
loc7 = new flash.geom.Rectangle(loc5 * loc1, loc6 * loc2, loc1, loc2);
loc8 = new flash.display.BitmapData(loc1, loc2, true);
loc8.copyPixels(this._img.bitmapData, loc7, this.zero);
loc9 = new flash.display.Bitmap(loc8);
loc9.x = loc5 * (loc1 + arg3);
loc9.y = loc6 * (loc2 + arg3);
var loc11:*;
this._imgNodes[loc11 = loc4++] = loc9;
loc10 = new flash.display.Sprite();
loc10.mouseChildren = false;
this.brickArray.push(loc10);
loc10.addChild(loc9);
this._tiledImg.addChild(loc10);
++loc6;
}
++loc5;
}
return;
}
I may miss the mark here as its quite hard to read that lot, however, this is my suggestion for your removeMc function. I noticed you have TweenMax, so I would utilise that as opposed to the flash tweener class.
public function removeMC(arg1:flash.display.Sprite):*
{
this.score --;
this.uiBar.txtScore.text=this.score;
var loc1:*=new flash.geom.ColorTransform();
loc1.color = 0xffffFF;
arg1.transform.colorTransform = loc1;
var loc2:*=this.ballMC.x - this.ballMC.x % 30;
var loc3:*=this.ballMC.y - this.ballMC.y % 30;
TweenMax.to(arg1, 0.4, {scaleY:0, scaleX:0, x:loc2, y:loc3, colorTransform:{tint:0x0000ff, tintAmount:1}, onComplete:tweenComplete(arg1)});
// trace("Ball x:" + this.ballMC.x + " ballY:" + this.ballMC.y + " block x:" + loc2 + " block y:" + loc3);
this.brickArray.splice(this.indexSearch(this.brickArray, arg1), 1);
return;
}
private function tweenComplete(square:Sprite):void
{
this.removeChild(square);
}
That should result in the square shrinking to 0 size and becoming white at the same time. Then once it completes it will remove the child completely.
Related
So I have made a game in scratch which uses the following code block:
I am trying to remake this game in Adobe Animate using Action Script 3 (for a class project), is there a similar way to do this in animate?
It is possible. The trick to do it is to create a tiny-teeny BitmapData object and to draw a small portion of stage under the mouse pointer into that object so that you can obtain the pixel color value.
// BitmapData object and some service objects.
var BD:BitmapData = new BitmapData(3, 3, true);
var R:Rectangle = new Rectangle(0, 0, 3, 3);
var M:Matrix = new Matrix;
// Let's create a TextField so we can output the pixel color value.
var T:TextField = new TextField;
var TF:TextFormat = new TextFormat("_typewriter", 12, 0x000000, true, false, false, null, null, TextFormatAlign.CENTER);
T.x = 10;
T.y = 10;
T.width = 100;
T.height = 18;
T.border = true;
T.background = true;
T.selectable = false;
T.mouseEnabled = false;
T.defaultTextFormat = TF;
addChild(T);
// Lets add some semi-transparent color circles
// so we have colored things to point the mouse at.
for (var i:int = 0; i < 10; i++)
{
var aColor:uint = 0;
aColor |= int(128 + 128 * Math.random()) << 16; // RED
aColor |= int(128 + 128 * Math.random()) << 8; // GREEN
aColor |= int(128 + 128 * Math.random()); // BLUE
var anX:int = stage.stageWidth / 8 + Math.random() * stage.stageWidth * 3 / 4;
var anY:int = stage.stageHeight / 8 + Math.random() * stage.stageHeight * 3 / 4;
var aRadius:int = 50 + 100 * Math.random();
var anAlpha:Number = 0.5 + 0.5 * Math.random();
graphics.beginFill(aColor, anAlpha);
graphics.drawCircle(anX, anY, aRadius);
graphics.endFill();
}
// Now let's watch the mouse every frame.
addEventListener(Event.ENTER_FRAME, onFrame);
function onFrame(e:Event):void
{
// Get pixel color as an RRGGBB String and print it.
T.text = "#" + addZeroes(getColorUnderMouse());
}
function getColorUnderMouse():uint
{
// Adjust Matrix so that we draw the correct piece of screen.
M.tx = -root.mouseX + 1;
M.ty = -root.mouseY + 1;
// Clear the BitmapData and capture the 3x3 piece under the mouse pointer.
BD.fillRect(R, 0xFFFFFFFF);
BD.draw(root, M, null, null, R);
// Read the pixel color value at the center of 3x3 and return it.
return BD.getPixel(1, 1);
}
// This function fixes the hexabinary value with leading
// zeroes if the color value is too small (like 0 = black).
function addZeroes(value:uint, count:uint = 6):String
{
var result:String = value.toString(16).toUpperCase();
while (result.length < count)
{
result = "0" + result;
}
return result;
}
I want to build an animated alphabet, made up of particles. Basically, the particles transform from one letter shape to another.
My idea is to fill the letters as text on canvas real quickly (like for a frame), get the pixel data and put the particles to the correct location on setInterval. I have this code for scanning the screen right now:
var ctx = canvas.getContext('2d'),
width = ctx.canvas.width,
height = ctx.canvas.height,
particles = [],
gridX = 8,
gridY = 8;
function Particle(x, y) {
this.x = x;
this.y = y;
}
// fill some text
ctx.font = 'bold 80px sans-serif';
ctx.fillStyle = '#ff0';
ctx.fillText("STACKOVERFLOW", 5, 120);
// now parse bitmap based on grid
var idata = ctx.getImageData(0, 0, width, height);
// use a 32-bit buffer as we are only checking if a pixel is set or not
var buffer32 = new Uint32Array(idata.data.buffer);
// using two loops here, single loop with index-to-x/y is also an option
for(var y = 0; y < height; y += gridY) {
for(var x = 0; x < width; x += gridX) {
//buffer32[] will have a value > 0 (true) if set, if not 0=false
if (buffer32[y * width + x]) {
particles.push(new Particle(x, y));
}
}
}
// render particles
ctx.clearRect(0, 0, width, height);
particles.forEach(function(p) {
ctx.fillRect(p.x - 2, p.y - 2, 4, 4); // just squares here
})
But this way I am only showing one word, without any changes throughout the time. Also, I want to set up initially like 200 particles and reorganise them based on the pixel data, not create them on each scan.. How would you rewrite the code, so on every 1500ms I can pass a different letter and render it with particles?
Hopefully the different parts of this code should be clear enough : There are particles, that can draw and update, fillParticle will spawn particles out of a text string, and spawnChars will get a new part of the text rendered on a regular basis.
It is working quite well, play with the parameters if you wish, they are all at the start of the fiddle.
You might want to make this code cleaner, by avoiding globals and creating classes.
http://jsbin.com/jecarupiri/1/edit?js,output
// --------------------
// parameters
var text = 'STACKOVERFLOW';
var fontHeight = 80;
var gridX = 4,
gridY = 4;
var partSize = 2;
var charDelay = 400; // time between two chars, in ms
var spead = 80; // max distance from start point to final point
var partSpeed = 0.012;
// --------------------
var canvas = document.getElementById('cv'),
ctx = canvas.getContext('2d'),
width = ctx.canvas.width,
height = ctx.canvas.height,
particles = [];
ctx.translate(0.5,0.5);
// --------------------
// Particle class
function Particle(startX, startY, finalX, finalY) {
this.speed = partSpeed*(1+Math.random()*0.5);
this.x = startX;
this.y = startY;
this.startX = startX;
this.startY = startY;
this.finalX =finalX;
this.finalY =finalY;
this.parameter = 0;
this.draw = function() {
ctx.fillRect(this.x - partSize*0.5, this.y - partSize*0.5, partSize, partSize);
};
this.update = function(p) {
if (this.parameter>=1) return;
this.parameter += partSpeed;
if (this.parameter>=1) this.parameter=1;
var par = this.parameter;
this.x = par*this.finalX + (1-par)*this.startX;
this.y = par*this.finalY + (1-par)*this.startY;
};
}
// --------------------
// Text spawner
function fillParticle(text, offx, offy, spread) {
// fill some text
tmpCtx.clearRect(0,0,tmpCtx.canvas.width, tmpCtx.canvas.height);
tmpCtx.font = 'bold ' + fontHeight +'px sans-serif';
tmpCtx.fillStyle = '#A40';
tmpCtx.textBaseline ='top';
tmpCtx.textAlign='left';
tmpCtx.fillText(text, 0, 0);
//
var txtWidth = Math.floor(tmpCtx.measureText(text).width);
// now parse bitmap based on grid
var idata = tmpCtx.getImageData(0, 0, txtWidth, fontHeight);
// use a 32-bit buffer as we are only checking if a pixel is set or not
var buffer32 = new Uint32Array(idata.data.buffer);
// using two loops here, single loop with index-to-x/y is also an option
for(var y = 0; y < fontHeight; y += gridY) {
for(var x = 0; x < txtWidth; x += gridX) {
//buffer32[] will have a value > 0 (true) if set, if not 0=false
if (buffer32[y * txtWidth + x]) {
particles.push(new Particle(offx + x+Math.random()*spread - 0.5*spread,
offy + y+Math.random()*spread - 0.5*spread, offx+x, offy+y));
}
}
}
return txtWidth;
}
var tmpCv = document.createElement('canvas');
// uncomment for debug
//document.body.appendChild(tmpCv);
var tmpCtx = tmpCv.getContext('2d');
// --------------------------------
// spawn the chars of the text one by one
var charIndex = 0;
var lastSpawnDate = -1;
var offX = 30;
var offY = 30;
function spawnChars() {
if (charIndex>= text.length) return;
if (Date.now()-lastSpawnDate < charDelay) return;
offX += fillParticle(text[charIndex], offX, offY, spead);
lastSpawnDate = Date.now();
charIndex++;
}
// --------------------------------
function render() {
// render particles
particles.forEach(function(p) { p.draw();
});
}
function update() {
particles.forEach(function(p) { p.update(); } );
}
// --------------------------------
// animation
function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0, 0, width, height);
render();
update();
//
spawnChars();
}
// launch :
animate();
I'm using canvas to generate random colored objects with an interval. What I want to do is, to fade the objects into whiteness just like they're fading into fog.
I want to achieve this without needing to redraw every object in every frame. Instead, I'm putting white layers between objects (with small opacity) so that it gives the efect of fade out.
Here is my current approach:
http://jsfiddle.net/zettam/pUVkA/26/
var cvas = document.getElementById("ctxt");
var cx = cvas.getContext("2d");
function randomColor(num) {
return Math.floor(Math.random() * num);
}
setInterval(function() {
var r = randomColor(255);
var g = randomColor(255);
var b = randomColor(255);
cx.fillStyle = "rgba(" + r + "," + g + "," + b + ",1.0)";
cx.fillRect(200*Math.random(), 200*Math.random(), 300*Math.random(), 300*Math.random());
}, 200);
setInterval(function() {
cx.fillStyle = "rgba(255,255,255,0.025)"
cx.fillRect(0, 0, 500, 500);
}, 20);
Asyou can see, the objects never fade out to fully white, but instead, they stay at somewhere gray.
How can I achieve what I need without having to re-draw everything every frame ?
Thanks.
The opacity setting in cx.fillStyle = "rgba(255,255,255,0.025)" is not working when less than 0.1. (some calculation problem with that function?)
Try setting it to 0.1 instead of 0.025 and change the Interval to something higher to compensate like 50 ?
Try this: http://jsfiddle.net/pUVkA/31/
It's a compromise between the two methods. As #Josh mentioned, the canvas compositing code has a problem with completely overlaying with an opacity less than 0.1.
var cvas = document.getElementById("ctxt"),
cx = cvas.getContext("2d"),
lFade = new Date(),
lBox = new Date(),
lClear = new Date();
function randomColor(num) {
return Math.floor(Math.random() * num);
}
(function draw(){
var now = new Date();
if (now - lFade > 20){
cx.fillStyle = "rgba(255,255,255,0.025)"
cx.fillRect(0, 0, 500, 500);
lFade = now;
}
if (now - lClear > 800){
cx.fillStyle = "rgba(255,255,255,0.1)"
cx.fillRect(0, 0, 500, 500);
lClear = now;
}
if (now - lBox > 200){
var r = randomColor(255);
var g = randomColor(255);
var b = randomColor(255);
cx.fillStyle = "rgba(" + r + "," + g + "," + b + ",1.0)";
cx.fillRect(200*Math.random(), 200*Math.random(), 300*Math.random(), 300*Math.random());
lBox = now;
}
setTimeout(draw, 1000/60);
})();
I have this script I am working on that utilizes the oCanvas JS Library (http://ocanvas.org/) that creates an HTML5 canvas and displays multiple objects within the canvas. Currently, I have the script reading from an external XML document and loops through each project node and creates a circle object on the canvas.
I am having issues with trying to place this objects on the canvas evenly spaced from the middle circle (the logo variable in the code below).
// GLOBALS
var xmlData = '<?xml version="1.0" encoding="UTF-8"?><root name="CompanyName"><projects><project name="Project1"></project><project name="Project2"></project></projects></root>'
var xmlObj = []
// var angle = (360 * Math.PI)/180
var padding = 15
var canvas = oCanvas.create({
canvas: '#myCanvas'
})
var c_width = canvas.width
var c_height = canvas.height
var logo = canvas.display.ellipse({
x: c_width / 2,
y: c_height / 3,
radius: 80,
fill: '#d15851'
})
canvas.addChild(logo)
// var getXML = function(file){
// $.ajax({
// url: file,
// type: 'GET',
// dataType: 'xml',
// async: false,
// success: parseXML
// })
// }
var parseXML = function() {
var xmlDoc = $.parseXML(xmlData)
var xml = $(xmlDoc)
xml.find('project').each(function(i){
xmlObj[i] = canvas.display.ellipse({
fill: '#'+'0123456789abcdef'.split('').map(function(v,i,a){
return i>5 ? null : a[Math.floor(Math.random()*16)] }).join(''),
radius: 40,
opacity: 1
})
});
var angleSingleton = {
"currentAngle": 0,
"currentOffset": 0,
"incrementAngle": function() {
this.currentAngle = this.currentAngle + this.currentOffset
}
}
angleSingleton.currentOffset = Math.floor((360 * Math.PI)/xmlObj.length);
for(h = 0; h < xmlObj.length; h++) {
xmlObj[h].x = (logo.x + logo.radius * Math.cos(angleSingleton.currentAngle)) + xmlObj[h].radius + padding;
xmlObj[h].y = (logo.y + logo.radius * Math.sin(angleSingleton.currentAngle)) + xmlObj[h].radius + padding;
canvas.addChild(xmlObj[h])
angleSingleton.incrementAngle()
}
}
//
$(document).ready(function(){
parseXML()
})
What you want to take a look at is the Parametric equation for circles. Basically it defines a point along a circles perimeter at a specific angle. This answer covers it in more detail.
To get your x and y values for the new circle you use the following equations:
x = logo.x + logo.radius * Math.cos(angle)
y = logo.y + logo.radius * Math.sin(angle)
However you need to account for the room the new circle is going to take up plus any room for padding if you want it.
x = (logo.x + logo.radius * Math.cos(angle)) + newCircle.radius + circlePadding
y = (logo.y + logo.radius * Math.sin(angle)) + newCircle.radius + circlePadding
For the angle function try something like this:
var angleSingleton = {
"currentAngle": 0,
"currentOffset": 0,
"incrementAngle": function() {
this.currentAngle = this.currentAngle + this.currentOffset
}
}
angleSingleton.currentOffset = (360 * Math.PI)/xmlObj.length;
Then you can use this to keep track of the angle you need for the formula. To get the current angle use angleSingleton.currentAngle and replace angle++ with angleSingleton.incrementAngle
I ended up figuring it out!
// EXTENDING OBJECTS
Array.prototype.min = function(array) {
return Math.min.apply(Math, array);
}
Array.prototype.max = function(array) {
return Math.max.apply(Math, array)
}
//
// GLOBALS
var xmlData = '<?xml version="1.0" encoding="UTF-8"?><root name="CompanyName"><projects><project name="Project1"></project><project name="Project2"></project><project name="Project3"></project></projects></root>'
var xmlObj = []
var xmlDoc, xml;
var padding = 15
var canvas = oCanvas.create({
canvas: '#myCanvas'
})
var c_width = canvas.width
var c_height = canvas.height
var logo = canvas.display.ellipse({
x: c_width / 2,
y: c_height / 3,
radius: 80,
fill: '#d15851'
})
var rectObj = function(){
this.x = 0;
this.y = 0;
this.width = 100;
this.height = 100;
this.size = this.width + this.height; //this would equate to a circles radius if dealing with circles
this.fillerText = null;
this.fillRect = function(hexVal){
if(!hexVal)
return '#'+'0123456789abcdef'.split('').map(function(v,i,a){
return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('')
else
return hexVal
};
this.drawRect = function(){
return canvas.display.rectangle({
width: this.width,
height: this.height,
fill: this.fillRect(),
x: this.x,
y: this.y
})
};
this.checkCollisions = function(objToCheck) {
var centerA = { x: this.x+(this.size/2), y: this.y+(this.size/2) };
var centerB = { x:objToCheck.x+(objToCheck.size/2), y: objToCheck.y+(objToCheck.size/2) };
var distance = Math.sqrt(((centerB.x-centerA.x)*(centerB.x-centerA.x) + (centerB.y-centerA.y)*(centerB.y-centerA.y)));
if(distance < (this.size+objToCheck.size)) {
objToCheck.x = this.x - (canvas.width/4)
objToCheck.fillRect = function(){
return 'red'
}
}
}
}
canvas.addChild(logo)
var parseXML = function() {
xmlDoc = $.parseXML(xmlData)
xml = $(xmlDoc)
xml.find('project').each(function(i){
xmlObj[i] = new rectObj()
xmlObj[i].fillerText = $(this).attr('name')
xmlObj[i].x = (logo.x + logo.radius * Math.cos((360*Math.PI) / (i + 1)) + padding) + ((xmlObj[i].width / 2) + (i+1));
xmlObj[i].y = (logo.y + logo.radius * Math.sin((360*Math.PI) / (i + 1)) + padding);
});
for(i = 0; i < xmlObj.length; i++) {
for(a = i+1; a < xmlObj.length; a++) {
xmlObj[i].checkCollisions(xmlObj[a])
}
canvas.addChild(xmlObj[i].drawRect())
}
}
//
$(document).ready(function(){
parseXML()
})
Screen shot:
I obviously need to write in the Y coords for the rectangles so that they're not touching the main circle, but for now, they all "float" as they're supposed to :)
Thanks for all of your help Devin!
BTW, I was able to write my collision algorithm by studying this JS file: http://andersonferminiano.com/html5/studies/balls_collisions/collision.js
I'm trying to create an honeycomb with as3 but I have some problem on cells positioning.
I've already created the cells (not with code) and for cycled them to a funcion and send to it the parameters which what I thought was need (the honeycomb cell is allready on a sprite container in the center of the stage).
to see the structure of the cycle and which parameters passes, please see the example below, the only thing i calculate in placeCell is the angle which I should obtain directly inside tha called function
alt text http://img293.imageshack.us/img293/1064/honeycomb.png
Note: the angle is reversed but it isn't important, and the color are useful in example only for visually divide cases.
My for cycle calls placeCell and passes cell, current_case, counter (index) and the honeycomb cell_lv (cell level).
I thought it was what i needed but I'm not skilled in geometry and trigonometry, so I don't know how to position cells correctly:
import flash.display.Sprite;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
function createHoneycomb (cells:int):void {
var honeycomb:Sprite = new Sprite ();
addChild (honeycomb);
var cell_lv:int = 1;
var increment:int = 6;
var tot_cur_cells:int = 1;
var current_case:int = 0;
var case_counter:int = 1;
var case_length:int = 1;
var max_cases:int = 6;
var nucleus:Sprite = new cell (); // hexagon from library
honeycomb.addChild (nucleus);
for (var i:int = 1; i <= cells; i ++) {
if (case_counter < case_length) {
case_counter ++;
} else {
current_case ++;
if (current_case > max_cases) current_case = 1;
case_counter = 1;
}
if (i == tot_cur_cells) { // if i reach the current level
if (i > 1) cell_lv ++;
case_length = cell_lv;
tot_cur_cells += (increment * cell_lv);
}
var current_cell:Sprite = new cell (); // hexagon from library
honeycomb.addChild (current_cell);
placeCell (current_cell, case_counter, current_case, cell_lv);
}
function centerHoneycomb (e:Event):void {
honeycomb.x = stage.stageWidth / 2
honeycomb.y = Math.round (stage.stageHeight / 2);
}
stage.addEventListener (Event.RESIZE, centerHoneycomb)
stage.dispatchEvent (new Event (Event.RESIZE));
}
function placeCell (cell:Sprite, counter:int, current_case:int, cell_lv:int):void {
var margin:int = 2;
// THIS IS MY PROBLEM
var start_degree:Number = (360 / (cell_lv * 6));
var angle:Number = (start_degree * ((current_case - 1) + counter) - start_degree);
var radius:Number = (cell.width + margin) * cell_lv;
cell.x = radius * Math.cos (angle);
cell.y = radius * Math.sin (angle);
// end of the problem
if (angle != 0) trace ("LV " + cell_lv + " current_case " + current_case + " counter " + counter + " angle " + angle + " radius " + radius);
else trace ("LV " + cell_lv + " current_case " + current_case + " counter " + counter + " angle " + angle + " radius " + radius);
}
createHoneycomb (64);
if you copy and paste this code, it works but you need to create an hexagon and call it in the actionscript library as cell
how can I do to solve it?
I've also thought to use a switch with the cases to align it, but i think is a little bit buggy doing this
Okay, I really loved this question. It was interesting, and challenging, and I got a working result. I didn’t use any of your code as the base though, but started from scratch, so depending on your final use, you might need to change a bit.
I did however created similar variables to those inside of your cells (in the picture). For each cell you have the following properties:
the iterating variable i is equally to your cell number
the radius r equals your level, and expresses the distance from the center (with 0 being the center)
the position p expresses the position in the current radius
the sector s equals your case, but starts with zero
p % r equals your index
I don’t have an angle, simply because I don’t position the individual hexagons using an angle. Instead I base the position of the (fixed) positions of the hexagons at radius 1 and calculate the missing ones in between.
The following code shows my implementation with 61 (60 + the center; but it’s configurable). You can also see the code in action on Wonderfl.
package
{
import flash.display.Sprite;
public class Comb extends Sprite
{
public function Comb ()
{
Hexagon.scale = 0.5;
this.x = stage.stageWidth / 2;
this.y = stage.stageHeight / 2;
// draw honeycomb with 60 cells
drawComb( 60 );
}
private function drawComb ( n:uint ):void
{
var colors:Array = new Array( 0x33CC33, 0x006699, 0xCC3300, 0x663399, 0xFF9900, 0x336666 );
var sectors:Array = new Array(
new Array( 2, 0 ),
new Array( 1, 1 ),
new Array( -1, 1 ),
new Array( -2, 0 ),
new Array( -1, -1 ),
new Array( 1, -1 ) );
var w:Number = 0.50 * Hexagon.hxWidth;
var h:Number = 0.75 * Hexagon.hxHeight;
var r:uint, p:uint, s:uint;
var hx:Hexagon;
for ( var i:uint = 0; i <= n; i++ )
{
r = getRadius( i );
p = getPosition( i, r );
s = getSector( i, r, p );
// create hexagon
if ( r == 0 )
hx = new Hexagon( 0xCCCCCC );
else
hx = new Hexagon( colors[s] );
hx.x = w * ( r * sectors[s][0] - ( p % r ) * ( sectors[s][0] - sectors[ ( s + 1 ) % 6 ][0] ) );
hx.y = h * ( r * sectors[s][1] - ( p % r ) * ( sectors[s][1] - sectors[ ( s + 1 ) % 6 ][1] ) );
addChild( hx );
}
}
private function getRadius ( i:uint ):uint
{
var r:uint = 0;
while ( i > r * 6 )
i -= r++ * 6;
return r;
}
private function getPosition ( i:uint, r:uint ):uint
{
if ( r == 0 )
return i;
while ( r-- > 0 )
i -= r * 6;
return i - 1;
}
private function getSector ( i:uint, r:uint, s:uint ):uint
{
return Math.floor( s / r );
}
}
}
import flash.display.Shape;
class Hexagon extends Shape
{
public static var hxWidth:Number = 90;
public static var hxHeight:Number = 100;
private static var _scale:Number = 1;
public function Hexagon ( color:uint )
{
graphics.beginFill( color );
graphics.lineStyle( 3, 0xFFFFFF );
graphics.moveTo( 0, -50 );
graphics.lineTo( 45, -25 );
graphics.lineTo( 45, 25 );
graphics.lineTo( 0, 50 ),
graphics.lineTo( -45, 25 );
graphics.lineTo( -45, -25 );
graphics.lineTo( 0, -50 );
this.scaleX = this.scaleY = _scale;
}
public static function set scale ( value:Number ):void
{
_scale = value;
hxWidth = value * 90;
hxHeight = value * 100;
}
public static function get scale ():Number
{
return _scale;
}
}