Render from Center Actionscript 3.0
| 21 |
22 |
23 |
24 |
25 |
26 |
| 20 |
7 |
8 |
9 |
10 |
|
| 19 |
6 |
1 |
2 |
11 |
|
| 18 |
5 |
4 |
3 |
12 |
|
| 17 |
16 |
15 |
14 |
13 |
|
| 21 |
22 |
23 |
24 |
25 |
26 |
| 20 |
7 |
8 |
9 |
10 |
|
| 19 |
6 |
1 |
2 |
11 |
|
| 18 |
5 |
4 |
3 |
12 |
|
| 17 |
16 |
15 |
14 |
13 |
|
Render from Center… Given a Rectangle normally you cold iterate row by row with two nested for loops, however visually it makes more sense to render the center first since that is the point the user is more likely interested in viewing first as opposed to the top edge. This is especially applicable when deciding which image to download/load first. This could be tweaked to start from any edge. It also can be improved to skip edges entirely after detecting they are out of bounds. This is the basic version. Its not provided for commercial use without adequate payment but for any non profit enterprise copy-paste away. My basic policy for anything is if you make money using it (even ideas) some percentage of that money should go to the original author based on the amount of time that code is running on the processor compared with other code weighted with the complexity of the task along with whether or not you would think to do it on your own.
var sw=1024;
var sh=768;
var dbm=new BitmapData(sw,sh,false,0x000000);
var bmp:Bitmap = new Bitmap(dbm,PixelSnapping.NEVER,false);
this.addChild(bmp);
addEventListener(Event.ENTER_FRAME,myFunction);
var frame=0;
var dirs=[new Point(1,0),new Point(0,1),new Point(-1,0),new Point(0,-1)];//right,down,left,up
function myFunction(event:Event) { ;
frame++;
dbm.lock();
//full rect shape to fill defined by your mouse position, or you can hard code one
var sRect=new Rectangle(0,0,Math.ceil(mouseX/10),Math.ceil(mouseY/10));
//normally with nsted FOR loops, one would loop from rs to re for rows, and cs to ce for cols
var rs=sRect.top,cs=sRect.left,re=sRect.bottom,ce=sRect.right;
//determine start point (center)... c,r is the start coordinate for the first draw call
var r=rs+Math.floor(sRect.height/2);
var c=cs+Math.floor(sRect.width/2);
//trace(c,r);//trace in x y notation
//draw like a pyramid, from center outwards
var ctr=0;
var edgLen=0;//increasing
var curEdg=0;//progress on edge
var curDir=0, totEdg = 0;
//always render a perfect square since thats what pyramids are from the top (even though this means a lot of skipped edges if we are opperating on a rectangle)
var tctr=Math.pow(Math.max(sRect.width,sRect.height),2);//((sRect.width)*(sRect.height));
// In this setup the entire gride up to tctr or frame is re-drawn each frame
dbm.fillRect(new Rectangle(0,0,sw,sh),0x000000);
//ctr < frame forces it to draw from the center one pixel at a time.
while(ctr<frame&& ctr < tctr ){
//draw first since we are already on the first quadrant
//we could test these conditionally based on direction since certain directions will never go over, but this is fast enough for now
if(r>=re||c>=ce||r<rs||c<cs){
//if outside of our desired dimensions, ignore it (dont draw it, pass by it, or in this case, draw it as red)
dbm.setPixel(c*10+(30),r*10+(30),0xFF0000)
//IN the future, add fancy code here to skip us past the edge (and increment ctr by the edge length) to save processing time!
//since its very wasteful looping through each invisible edges ouside teh bounds of your array
}else dbm.setPixel(c*10+(30),r*10+(30),0xFFFFFF)
r+=dirs[curDir].y, //increas our Y posisiton based on our current direction (set up next draw call)
c+=dirs[curDir].x; //increas our X posisiton based on our current direction (set up next draw call)
curEdg++; //since we drew one above, increase our position along our edge
if( curEdg > edgLen){
//the set up for the draw call after the next one
//if our edge has reached its length (1 for instance if this is the first draw call) change direction after the next draw call by incrementing it here
curDir++;
totEdg++;//total edges increases each time we change direction
curEdg=0;//progress on our current edge gets reset
if(totEdg%2==0)edgLen++;//for very other edge created we neeed to add an additional step (edges increase in len)
if( curDir > 3 ) curDir=0;// directionals must loop 0-3
}
ctr++;//total progress counter which gets us out of the WHILE loop (important)
}
dbm.unlock();
}
stage.addEventListener(MouseEvent.MOUSE_UP,function(event:MouseEvent){
frame=0;//re draw from the start/center when we click the mouse
});
I make no argument that this is the most efficient way, and in fact its quite inefficient if you are rendering rectangles but anything that is roughly square 4:3 for example the results are quite sufficient for purposes of up to 16×16 rectangles or more in real time. There are probably more mathematically simple ways to generate the same results without using so many conditionals however the loop is very simple and so are the calculations. I ran a performance test on this versus two nested for loops, which eliminates most of the code.
var stime=new Date();
dbm.lock();
//full rect shape to fill defined by your mouse position, or you can hard code one
//var sRect=new Rectangle(0,0,Math.ceil(mouseX/10),Math.ceil(mouseY/10));
var sRect=new Rectangle(0,0,100,100);
//normally with nsted FOR loops, one would loop from rs to re for rows, and cs to ce for cols
var rs=sRect.top,cs=sRect.left,re=sRect.bottom,ce=sRect.right;
dbm.fillRect(new Rectangle(0,0,sw,sh),0x000000);
for( var r=rs;r<re;r++ ){
for( var c=cs;c<ce;c++ ){
dbm.setPixel(c*3+(30),r*3+(30),0xFFFFFF)
}
}
dbm.unlock();
var etime=new Date();
trace( etime - stime );

When rendering 100×100 it takes roughly twice as much time using the while loop however if you are looking for pyramid ordered results its very worth it, however once you are done drawing the pyramid it makes a ton of sense to switch back to a simpler loop. A clever implementer might simply cache the valid coordinates in an emptied array each time the pyramid changes and iterate through that instead of computing the pyramid each frame. The set itself is rather interesting mathematically. I have not encountered all of these sets before. If anyone has any mathemagical insight to shine on these results please share. Enjoy!
Also if anyone has any insight in clever ways to make people empty the washer and dryer when their clothes are done I would be very interested in implementing a solution D
Support Development... Donate!
$50 $100 $300 $500 $1000 ...