兀兀 -雑多編-

ちょっと変わったお絵かき？プログラム

Flex, ActionScript | 00:52 |

今日は、ちょっと変わったお絵かきプログラムを作成してみました。

マウスの動きに合わせて、マウスカーソルの位置に次々と円を描いていきます。すると、以下のようなちょっと不思議なものが描けます。赤い点がマウスカーソルです。実際に動かしてみるとわかりますが、マウスカーソルが少しもっさり気味に動きます。円の描画もそれにあわせてもっさり気味に描画されます。これが何とも不思議な感じで、ちょっとおもしろい（？）です。是非お試しあれ。

プログラムは、至ってシンプルです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  backgroundColor="0x003300" width="1024" height="600"
  applicationComplete="setup()">
  <mx:Script>
    <![CDATA[
      import mx.core.UIComponent;
      private var canvas:Sprite = new Sprite();
      private var mouseCursor:Sprite = new Sprite();
      private var timer:Timer = new Timer(17);
      
      private function setup():void
      {
        // 描画のための土台を準備
        var container:UIComponent = new UIComponent();
        this.addChild(container);
        container.addChild(canvas);
        container.addChild(mouseCursor);
        
        // 標準のマウスカーソル消去
        Mouse.hide();
        
        // 疑似マウスカーソル描画
        mouseCursor.graphics.beginFill(0xFF0000);
        mouseCursor.graphics.drawCircle(0, 0, 5);
        mouseCursor.graphics.endFill();
        
        // マウスクリックイベント登録
        this.addEventListener(MouseEvent.CLICK, clickHandler);
        
        // タイマイベント登録
        timer.addEventListener(TimerEvent.TIMER, timerHandler);
        timer.start();
      }
      
      // マウスクリックイベント処理
      //   マウスボタンがクリックされたら描画領域をクリアする。
      private function clickHandler(event:MouseEvent):void
      {
        canvas.graphics.clear();
      }
      
      // タイマイベントによる繰り返し処理
      //   (1) 疑似マウスカーソル位置の更新
      //   (2) 疑似マウスカーソルを追いかける形で円を描画
      private function timerHandler(event:TimerEvent):void
      {
        // 疑似マウスカーソル位置を徐々に本来のマウスカーソル位置に近づける
        mouseCursor.x += (this.mouseX - mouseCursor.x) / 10;
        mouseCursor.y += (this.mouseY - mouseCursor.y) / 10;
        
        canvas.graphics.lineStyle(0, 0xFFFFFF);
        canvas.graphics.drawCircle(mouseCursor.x, mouseCursor.y, 20);
      }
    ]]>
  </mx:Script>
</mx:Application>

参考資料: