too many rectangles make the player slow

[DiscGolfer5000]

Hello, World! I am new to AS3 and OOP and am using the command line compiler with Notepad and this is my first forum post.

This code uses drawRect() over and over, creating 900 rectangles of random colors in a grid, 3 times per second. Within 10 seconds I notice a big slow down and a few seconds later, no more color changes or screen refresh ever happens. The rectangle count continues to increase though.

I don't really have a goal with this code, other than to understand what's going on. Why can't it just continue drawing new rectangles forever at the same initial speed? I feel like there is something fundamental I'm not understanding yet. I have attached the swf file also. Thank you for any explanations.

package {
    import flash.display.*;
    import flash.text.*;
    import flash.events.*;
    import flash.utils.*;

    public class Sample1 extends Sprite {
        private static const GRID_SIZE_X:uint = 30;
        private static const GRID_SIZE_Y:uint = 30;
        private static const BLOCK_SIZE:uint = 10;

        private var block:Shape = new Shape();
        private var xLoc:uint, yLoc:uint;
        private var drawRectCount:uint = 0;
        private var textDebug:TextField = new TextField();
        private var timer:Timer = new Timer(333, 0);

        public function Sample1() {
            displayGrid();
            addChild(block);

            displayDebug();
            addChild(textDebug);

            timer.start();
            timer.addEventListener(TimerEvent.TIMER, timerListener);
        }

        private function displayGrid():void {
            // cycle through the grid one blcok at a time
            for (yLoc = 0 ; yLoc < GRID_SIZE_Y ; yLoc++ ) {
                for (xLoc = 0 ; xLoc < GRID_SIZE_X ; xLoc++ ) {
                    displayBlock();
                }
            }
        }

        private function displayBlock():void {
            block.cacheAsBitmap = true;
            block.graphics.lineStyle(1, 0x000000);
            block.graphics.beginFill(Math.floor(Math.random() * 0xFFFFFF)); // use a random color
            block.graphics.drawRect(xLoc * BLOCK_SIZE, yLoc * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            drawRectCount++;    // I've drawn another rectangle!
        }

        private function displayDebug():void {
            textDebug.background = true;
            textDebug.border = true;
            textDebug.width = 200;
            textDebug.height = 50;
            textDebug.x = BLOCK_SIZE * GRID_SIZE_X;
            textDebug.y = BLOCK_SIZE;
        }

        private function timerListener(e:TimerEvent):void {
            displayGrid();
            textDebug.text = "Rectangles drawn: " + drawRectCount;
        }
    }
}

[senocular]

its just a lot of vector paths for Flash to keep up with. If you need to constantly be drawing squares like that, the best thing to do would be to draw it in a BitmapData instance being shown on the screen instead. Then you are just reusing the same collection of pixels over and over again and not adding additional vector paths to be rendered.

[DiscGolfer5000]

So in Sample1, why does it start fast, then slow and quit? Is each pass of drawing 900 rectangles overlaying the previous 900 that were there before, and they accumulate?

I tried your suggestion and it seems to run at the same rate as the initial rate without slowing! Thanks! I'll attach the swf file too.

package {
    import flash.display.*;
    import flash.geom.*;
    import flash.text.*;
    import flash.events.*;
    import flash.utils.*;

    public class Sample2 extends Sprite {
        private static const GRID_SIZE_X:uint = 30;
        private static const GRID_SIZE_Y:uint = 30;
        private static const BLOCK_SIZE:uint = 10;

        private var xLoc:uint, yLoc:uint;
        private var drawRectCount:uint = 0;
        private var textDebug:TextField = new TextField();
        private var timer:Timer = new Timer(333, 0);

        private var imgData:BitmapData = new BitmapData(GRID_SIZE_X * BLOCK_SIZE, GRID_SIZE_Y * BLOCK_SIZE, false, 0xFF000000);
        private var bmp:Bitmap = new Bitmap(imgData);

        public function Sample2() {
            displayGrid();
            addChild(bmp);

            displayDebug();
            addChild(textDebug);

            timer.start();
            timer.addEventListener(TimerEvent.TIMER, timerListener);
        }

        private function displayGrid():void {
            // cycle through the grid one blcok at a time
            for (yLoc = 0 ; yLoc < GRID_SIZE_Y ; yLoc++ ) {
                for (xLoc = 0 ; xLoc < GRID_SIZE_X ; xLoc++ ) {
                    displayBlock();
                }
            }
        }

        private function displayBlock():void {
            imgData.fillRect(new Rectangle(xLoc * BLOCK_SIZE, yLoc * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE), 0xFF000000 + Math.floor(Math.random() * 0xFFFFFF));  // use a random color
            drawRectCount++;    // I've drawn another rectangle!
        }

        private function displayDebug():void {
            textDebug.background = true;
            textDebug.border = true;
            textDebug.width = 200;
            textDebug.height = 50;
            textDebug.x = BLOCK_SIZE * GRID_SIZE_X;
            textDebug.y = BLOCK_SIZE;
        }

        private function timerListener(e:TimerEvent):void {
            displayGrid();
            textDebug.text = "Rectangles drawn: " + drawRectCount;
        }
    }
}

[senocular]

yes, they accumulate