Takayuki Fukatsu

Amature部門、Professional部門ともに、アルゴリズムでビジュアルを作り出す為のとっかかりとなるような課題と心がけたのですが、みなさん、いかがでしたでしょうか?
サンプルコードを追っかけるので精一杯だった人から、課題を半分無視して自分の表現に没入した人まで、さまざまなレベルの挑戦者がいて、楽しく拝見させていただきました。 これだけの数の人が同じコードをフォークする機会も珍しいと思うので、自分が気に入った作品のコードを分解して、是非、色々と比べてみてください。きっと、面白い、新しい発見があるのではないかと思います。
挑戦者のみなさん、ありがとうございました。

How did you like my question? I tried to make you think of visual effect through algorithm, along with Amateur division and Professional division.
I see some of you had hard time to understand sample codes, while other pursued their own expression, regardless the question. I was so happy to look at many codes from various challengers.
It is unusual for us to make the same code; I hope you to take your time to look at some other codes you liked, and definitely compare it. Certainly, it is interesting and I think there is a new discovery.
Thank you, challengers.

Amateur

Queenhanjuqu

  1. // forked from checkmate's fladdict challenge for amateurs
  2. /**
  3.  * Every frame you get screen caputre of the stage.
  4.  * Generate new frame image with using last frames screen capture.
  5.  * This is a starting point of recursive generative art.
  6.  */
  7. package
  8. {
  9.     import flash.display.Bitmap;
  10.     import flash.display.BitmapData;
  11.     import flash.display.BlendMode;
  12.     import flash.display.Sprite;
  13.     import flash.events.Event;
  14.     import flash.geom.ColorTransform;
  15.     import flash.geom.Matrix;
  16.     import flash.geom.Point;
  17.     import flash.utils.getTimer;
  18.     public class Beginner extends Sprite
  19.     {
  20.         /**
  21.          * Overwrite this update function.
  22.          * Every frame the function is invoked with two bitmaps.
  23.          * First one contains reference to the stage bitmap.
  24.          * Second one contains static copy of stage.
  25.          */
  26.          
  27.         public var canvas:BitmapData;
  28.         public var drawHere:BitmapData;
  29.         public var mat:Matrix;
  30.         public function update(): void
  31.         {
  32.             drawStep();
  33.             renderStep();
  34.             fadeStep();
  35.         }
  36.         public function drawStep(): void
  37.         {
  38.             drawHere.setPixel(Math.random() * 480, Math.random() * 480, 0xffffffff);
  39.         }
  40.     
  41.         private var scale:Number;
  42.         
  43.         public function transformStep(): Matrix
  44.         {
  45.             mat = new Matrix();
  46.             mat.translate(-240, -240);
  47.             scale = Math.cos(Math.pow(getTimer(), 2) * Math.PI * 2 * .1);
  48.             mat.scale(scale, scale);
  49.             mat.rotate(Math.random() + .75);
  50.             mat.translate(240240);
  51.             return mat;
  52.         }
  53.         public function renderStep(): void
  54.         {
  55.             canvas.draw(drawHere, transformStep(), null, BlendMode.SCREEN);
  56.             canvas.draw(drawHere, transformStep(), null, BlendMode.DIFFERENCE);
  57.             canvas.draw(drawHere, transformStep(), null, BlendMode.ADD);
  58.         }
  59.         public function fadeStep(): void
  60.         {
  61.             canvas.colorTransform(drawHere.rect, new ColorTransform(Math.random() * 0.4 + 0.6, Math.random() * 0.4 + 0.6, Math.random() * 0.4 + 0.610000));
  62.         }
  63.         /**
  64.          * ---------------------------------------
  65.          * DO NOT CHANGE FOLLOWING CODES
  66.          * DO NOT ACCESS FOLLOWING PROPERTIES DIRECTLY
  67.          * ---------------------------------------
  68.         */
  69.         
  70.        
  71.         private var bitmap:Bitmap;
  72.         
  73.         
  74.         public function Beginner() {
  75.             canvas = new BitmapData(480,480,false,0x000000);
  76.             bitmap = new Bitmap(canvas);
  77.             addChild(bitmap);
  78.             addEventListener(Event.ENTER_FRAME, _update);
  79.         }
  80.         
  81.         public function _update(e:Event):void{
  82.             if(drawHere)
  83.                 drawHere.dispose();
  84.             drawHere = canvas.clone();
  85.             update();
  86.         }
  87.     }
  88. }
flash swf thumbnail play
出題者からのコメント
光の輪の層がとても美しい。
Comments from King
The layers of loop are wonderful.

Bishopuwi

  1. // forked from checkmate's fladdict challenge for amateurs
  2. /**
  3.  * Every frame you get screen caputre of the stage.
  4.  * Generate new frame image with using last frames screen capture.
  5.  * This is a starting point of recursive generative art.
  6.  */
  7. package {
  8.     import flash.display.Bitmap;
  9.     import flash.display.BitmapData;
  10.     import flash.display.BlendMode;
  11.     import flash.display.Sprite;
  12.     import flash.events.Event;
  13.     import flash.geom.ColorTransform;
  14.     import flash.geom.Matrix;
  15.     import flash.geom.Point;
  16.     import flash.geom.Rectangle;
  17.     
  18.     public class Beginner extends Sprite {
  19.         /**
  20.          * Overwrite this update function.
  21.          * Every frame the function is invoked with two bitmaps.
  22.          * First one contains reference to the stage bitmap.
  23.          * Second one contains static copy of stage.
  24.          */
  25.          
  26.         public var canvas:BitmapData;
  27.         public var drawHere:BitmapData;
  28.         public var mat:Matrix;
  29.          
  30.         public function update():void{
  31.             drawStep();
  32.             transformStep();
  33.             
  34.             renderStep();
  35.             fadeStep();
  36.         }
  37.         
  38.         
  39.         public function drawStep():void {
  40. //            drawHere.setPixel(stage.mouseX, stage.mouseY, 0x11111111);
  41. //            drawHere.setPixel( Math.random()*480, Math.random()*480, 0xffffffff);
  42. //            drawHere.fillRect(new Rectangle(Math.random() * 480, Math.random() * 480, 20, 20), Math.random() * 0xffffffff);
  43.             var cx : Number = 240 - 50 + Math.random() * 100;
  44.             var cy : Number = 240 - 50 + Math.random() * 100;
  45. //            drawHere.fillRect(new Rectangle(cx - 10, cy - 10, 20, 20), col);
  46.             drawHere.fillRect(new Rectangle(cx - 10, cy - 102020), Math.random() * 0xffffff);
  47.         }
  48.     
  49.         
  50.         public function transformStep():void
  51.         {
  52.             mat = new Matrix();
  53.             mat.translate(-240,-240);
  54. //            mat.scale(1.005,1.005);
  55.             mat.scale(1.02,1.02);
  56. //            mat.rotate(1.5+Math.random() * 0.1);
  57.             mat.rotate(6.28/5);
  58.             mat.translate(240,240);
  59.         }
  60.         
  61.         private var _t : int = 0;
  62.         
  63.         public function renderStep():void{
  64.             canvas.draw(drawHere, mat, null,(_t++ & 1) == 1 ? BlendMode.LIGHTEN : BlendMode.DARKEN);
  65.         }
  66.         
  67.         
  68.         public function fadeStep():void
  69.         {
  70. //            canvas.colorTransform(drawHere.rect, new ColorTransform(1,1,1,1,1,1,1,0)); 
  71. //            canvas.colorTransform(drawHere.rect, new ColorTransform(Math.random()*0.4+0.6,Math.random()*0.4+0.6,Math.random()*0.4+0.6,1,0,0,0,0)); 
  72.         }
  73.         
  74.         
  75.         /**
  76.          * ---------------------------------------
  77.          * DO NOT CHANGE FOLLOWING CODES
  78.          * DO NOT ACCESS FOLLOWING PROPERTIES DIRECTLY
  79.          * ---------------------------------------
  80.         */
  81.         
  82.        
  83.         private var bitmap:Bitmap;
  84.         
  85.         
  86.         public function Beginner() {
  87.             canvas = new BitmapData(480,480,false,0x000000);
  88.             bitmap = new Bitmap(canvas);
  89.             addChild(bitmap);
  90.             addEventListener(Event.ENTER_FRAME, _update);
  91.         }
  92.         
  93.         public function _update(e:Event):void{
  94.             if(drawHere)
  95.                 drawHere.dispose();
  96.             drawHere = canvas.clone();
  97.             update();
  98.         }
  99.     }
  100. }
flash swf thumbnail play
出題者からのコメント
放射状に展開する色のブレンディングがとてもキレイでした。
Comments from King
The color blend radially is very beautiful.

Knightibu4gin

  1. // forked from checkmate's fladdict challenge for amateurs
  2. /**
  3.  * Every frame you get screen caputre of the stage.
  4.  * Generate new frame image with using last frames screen capture.
  5.  * This is a starting point of recursive generative art.
  6.  */
  7. package {
  8.     import flash.display.Bitmap;
  9.     import flash.display.BitmapData;
  10.     import flash.display.BlendMode;
  11.     import flash.display.Sprite;
  12.     import flash.events.Event;
  13.     import flash.geom.ColorTransform;
  14.     import flash.geom.Matrix;
  15.     import flash.geom.Point;
  16.     
  17.     public class Beginner extends Sprite {
  18.         /**
  19.          * Overwrite this update function.
  20.          * Every frame the function is invoked with two bitmaps.
  21.          * First one contains reference to the stage bitmap.
  22.          * Second one contains static copy of stage.
  23.          */
  24.          
  25.         public var canvas:BitmapData;
  26.         public var drawHere:BitmapData;
  27.         public var mat:Matrix;
  28.          
  29.         public function update():void{
  30.             drawStep();
  31.             transformStep();
  32.             
  33.             renderStep();
  34.             fadeStep();
  35.         }
  36.         
  37.         
  38.         public function drawStep():void {
  39.             //drawHere.setPixel(stage.mouseX, stage.mouseY, 0x11111111);
  40.             drawHere.setPixel( Math.random()*480, Math.random()*480, 0xffffffff);
  41.         }
  42.     
  43.         private var my_byo:Number = 0;
  44.         private var yuragi_num:Number;
  45.         public function transformStep():void
  46.         {
  47.             mat = new Matrix();
  48.             mat.translate(-240-30,-240+30);
  49.         my_byo += 0.03;
  50.         yuragi_num =  1 * Math.sin( my_byo * Math.PI * 2 * 0.1 );
  51.         mat.scale(yuragi_num, yuragi_num);
  52.         mat.rotate(yuragi_num * 10);
  53.         mat.translate(240-30,240+30);
  54.         }
  55.         
  56.         
  57.         public function renderStep():void{
  58.             canvas.draw(drawHere, mat, null,BlendMode.ADD);
  59.         }
  60.         
  61.         
  62.         public function fadeStep():void
  63.         {
  64.             canvas.colorTransform(drawHere.rect, new ColorTransform(Math.random()*0.4+0.6,Math.random()*0.4+0.6,Math.random()*0.4+0.6,1,0,0,0,0));
  65.         }
  66.         
  67.         
  68.         /**
  69.          * ---------------------------------------
  70.          * DO NOT CHANGE FOLLOWING CODES
  71.          * DO NOT ACCESS FOLLOWING PROPERTIES DIRECTLY
  72.          * ---------------------------------------
  73.         */
  74.         
  75.        
  76.         private var bitmap:Bitmap;
  77.         
  78.         
  79.         public function Beginner() {
  80.             canvas = new BitmapData(480,480,false,0x000000);
  81.             bitmap = new Bitmap(canvas);
  82.             addChild(bitmap);
  83.             addEventListener(Event.ENTER_FRAME, _update);
  84.         }
  85.         
  86.         public function _update(e:Event):void{
  87.             if(drawHere)
  88.                 drawHere.dispose();
  89.             drawHere = canvas.clone();
  90.             update();
  91.         }
  92.     }
  93. }
flash swf thumbnail play
出題者からのコメント
ダイナミックに変動する動きがキレイでした。
Comments from King
The change of dynamic movement is adorable.

ad

Professional

Queennutsu

  1. // forked from checkmate's fladdict challenge for professionals
  2. /**
  3.  * Theme:
  4.  * Play with BitmapPatterBuilder.
  5.  * Purpose of this trial is to find the possibility of the dot pattern.
  6.  *
  7.  * by Takayuki Fukatsu aka fladdict
  8.  **/
  9. package {
  10.     import flash.display.Bitmap;
  11.     import flash.display.BitmapData;
  12.     import flash.display.Graphics;
  13.     import flash.display.Shape;
  14.     import flash.display.Sprite;
  15.     import flash.display.StageScaleMode;
  16.     import flash.events.Event;
  17.     import flash.geom.ColorTransform;
  18.     import frocessing.geom.*;
  19.     import frocessing.color.*;
  20.     
  21.     [SWF(width=465,height=465,frameRate=60,background=0)]
  22.     public class Professional extends Sprite {
  23.         private var fs:Sprite;
  24.         private var gc1:Graphics;
  25.         private var gc2:Graphics;
  26.         private var bg:BitmapData;
  27.         private var ct:ColorTransform;
  28.         
  29.         private var img1:BitmapData;
  30.         private var img2:BitmapData;
  31.         private var next:BitmapData;
  32.         private var pattern:BitmapData;
  33.         private var offset:Number = 0;
  34.         private var step:int = 0;
  35.         
  36.         private var mtx:FMatrix2D;
  37.         private var vx:Number;
  38.         private var vy:Number;
  39.         private var xx:Number;
  40.         private var yy:Number;
  41.         
  42.         public function Professional () {
  43.             stage.scaleMode = StageScaleMode.NO_SCALE;
  44.             
  45.             //generate bitmap pattern.
  46.             var f1:BitmapData = fig1();
  47.             var f2:BitmapData = fig2();
  48.             img1 = new BitmapData( 1624false0 );
  49.             img2 = img1.clone();
  50.             img1.draw( f1, FMatrix2D.translateMatrix( 02) );
  51.             img1.draw( f1, FMatrix2D.translateMatrix( 014) );
  52.             img2.draw( f2, FMatrix2D.translateMatrix( -82) );
  53.             img2.draw( f2, FMatrix2D.translateMatrix( 82) );
  54.             img2.draw( f2, FMatrix2D.translateMatrix( 014) );
  55.             pattern = img1.clone();
  56.             next    = img2;
  57.             
  58.             //view
  59.             bg = new BitmapData( 465465false0 );
  60.             addChild( new Bitmap( bg ) );
  61.             
  62.             fs  = new Sprite();
  63.             gc1 = fs.graphics;
  64.             var cs:Shape = fs.addChild(new Shape()) as Shape;
  65.             gc2 = cs.graphics;
  66.             cs.blendMode = "subtract";
  67.             
  68.             ct = new ColorTransform(1111, -25, -25, -25);
  69.             
  70.             //geom
  71.             mtx = new FMatrix2D();
  72.             xx = yy = vx = vy = 0;
  73.             
  74.             addEventListener( Event.ENTER_FRAME, update );
  75.         }
  76.         
  77.         private function update( e:Event ):void {
  78.             if ( ++step == 30 ) {
  79.                 pattern.copyPixels( next, pattern.rect, pattern.rect.topLeft );
  80.                 next = ( next != img1 ) ? img1 : img2;
  81.                 offset++;
  82.                 step = 0;
  83.             }
  84.             xx += vx = ( mouseX - 232 - xx ) * 0.2;
  85.             yy += vy = ( mouseY - 232 - yy ) * 0.2;
  86.             vx *= 0.95;
  87.             vy *= 0.95;
  88.             var ss:Number = Math.max(1,23-Math.sqrt(xx*xx + yy*yy)/10);
  89.             var ra:Number = Math.atan2(yy, xx) + Math.PI/2*int(offset/4);
  90.             
  91.             mtx.identity();
  92.             mtx.translate( offset*40 );
  93.             mtx.scale( ss, ss );
  94.             mtx.rotate( ra );
  95.             mtx.translate( xx+232, yy+232 );
  96.             
  97.             gc1.clear();
  98.             gc1.beginBitmapFill( pattern, mtx );
  99.             gc1.drawRect(0,0,465,465);
  100.             gc1.endFill();
  101.             
  102.             var c1:uint = 0xffffffff^FColor.HSVtoValue( ra*180/Math.PI, 0.80.5 );
  103.             var c2:uint = 0xffffffff^FColor.HSVtoValue( (ra - Math.PI/1.5)*180/Math.PI, 0.80.5 );
  104.             
  105.             mtx.prependRotation( Math.PI/2 );
  106.             mtx.prependScale( 24*0.000610351562512*0.0006103515625 );
  107.             gc2.clear();
  108.             gc2.beginGradientFill("linear",[c1,0xeeeeee,c2,0xeeeeee],[1,1,1,1],[0,127,128,255],mtx,"repeat");
  109.             gc2.drawRect(0,0,465,465);
  110.             gc2.endFill();
  111.             
  112.             bg.colorTransform( bg.rect, ct );
  113.             bg.draw( fs, nullnull"screen" );
  114.         }
  115.         
  116.         //most simple patern
  117.         public function fig1():BitmapData{
  118.             return BitmapPatternBuilder.build(
  119.                 [[0,0,1,0,0,0,0,0,1,0,0],
  120.                  [0,0,0,1,0,0,0,1,0,0,0],
  121.                  [0,0,1,1,1,1,1,1,1,0,0],
  122.                  [0,1,1,0,1,1,1,0,1,1,0],
  123.                  [1,1,1,1,1,1,1,1,1,1,1],
  124.                  [1,0,1,1,1,1,1,1,1,0,1],
  125.                  [1,0,1,0,0,0,0,0,1,0,1],
  126.                  [0,0,0,1,1,0,1,1,0,0,0]],
  127.                 [0x00000000, 0xffffffff]
  128.             );
  129.         }
  130.         public function fig2():BitmapData{
  131.             return BitmapPatternBuilder.build(
  132.                 [[0,0,1,0,0,0,0,0,1,0,0],
  133.                  [1,0,0,1,0,0,0,1,0,0,1],
  134.                  [1,0,1,1,1,1,1,1,1,0,1],
  135.                  [1,1,1,0,1,1,1,0,1,1,1],
  136.                  [1,1,1,1,1,1,1,1,1,1,1],
  137.                  [0,1,1,1,1,1,1,1,1,1,0],
  138.                  [0,0,1,0,0,0,0,0,1,0,0],
  139.                  [0,1,0,0,0,0,0,0,0,1,0]],
  140.                 [0x00000000, 0xffffffff]
  141.             );
  142.         }
  143.     }
  144. }
  145. /**-----------------------------------------------------
  146.  * Use following BitmapPatternBuilder class 
  147.  * 
  148.  * DO NOT CHANGE any codes below this comment.
  149.  *
  150.  * -----------------------------------------------------
  151. */
  152. import flash.display.Bitmap;
  153. import flash.display.BitmapData;
  154. import flash.display.Graphics;
  155.     
  156. class BitmapPatternBuilder{
  157.     /**
  158.      * creates BitmapData filled with dot pattern.
  159.      * First parameter is 2d array that contains color index for each pixels;
  160.      * Second parameter contains color reference table.
  161.      *
  162.      * @parameter pattern:Array 2d array that contains color index for each pixel.
  163.      * @parameter colors:Array 1d array that contains color table.
  164.      * @returns BitmapData
  165.      */
  166.     public static function build(pattern:Array, colors:Array):BitmapData{
  167.         var bitmapW:int = pattern[0].length;
  168.         var bitmapH:int = pattern.length;
  169.         var bmd:BitmapData = new BitmapData(bitmapW,bitmapH,true,0x000000);
  170.         for(var yy:int=0; yy<bitmapH; yy++){
  171.             for(var xx:int=0; xx<bitmapW; xx++){
  172.                 var color:int = colors[pattern[yy][xx]];
  173.                 bmd.setPixel32(xx, yy, color);
  174.             }
  175.         }
  176.         return bmd;
  177.     }
  178.     
  179.     /**
  180.      * short cut function for Graphics.beginBitmapFill with pattern.
  181.      */
  182.     public static function beginBitmapFill(pattern:Array, colors:Array, graphics:Graphics):void{
  183.         var bmd:BitmapData = build(pattern, colors);
  184.         graphics.beginBitmapFill(bmd);
  185.         bmd.dispose();        
  186.     }
  187. }
flash swf thumbnail play
出題者からのコメント
ビットマップの実験として、単純にとても美しく完成度が高かった。
Comments from King
From Bitmap experiment, it was simple, beautiful and high quality.

Bishopk3lab

  1. // forked from checkmate's fladdict challenge for professionals
  2. /**
  3.  * Theme:
  4.  * Play with BitmapPatterBuilder.
  5.  * Purpose of this trial is to find the possibility of the dot pattern.
  6.  *
  7.  * by Takayuki Fukatsu aka fladdict
  8.  **/
  9. package {
  10.     import flash.display.Bitmap;
  11.     import flash.display.BitmapData;
  12.     import flash.display.Graphics;
  13.     import flash.display.Sprite;
  14.     import flash.display.StageScaleMode;
  15.     import flash.events.Event;
  16.     import flash.geom.Matrix;
  17.     import flash.utils.getTimer
  18.     [SWF(width=465, height=465,frameRate=30)] 
  19.     public class Professional extends Sprite {
  20.         private var g:Sprite;
  21.         private var pattern:BitmapData
  22.         private var bmd:BitmapData;
  23.         public function Professional() {
  24.             stage.scaleMode = StageScaleMode.NO_SCALE;
  25.             bmd = new BitmapData(480480true)
  26.             addChild(new Bitmap(bmd)) as Bitmap;
  27.             pattern= sample1();
  28.             
  29.             g = new Sprite()
  30.             addEventListener(Event.ENTER_FRAME,update)
  31.         }
  32.         private function update(e:Event):void {
  33.             var a:Number = (getTimer() / 160)
  34.             var mat:Matrix = new Matrix();
  35.             mat.rotate(a * Math.PI / 180); 
  36.             var matrix:Matrix = new Matrix()
  37.             matrix.rotate(a * Math.PI / 180)
  38.             matrix.translate(stage.stageWidth/2,stage.stageHeight/2)
  39.             g.graphics.clear()
  40.             g.graphics.beginBitmapFill(pattern, mat, truefalse)
  41.             g.graphics.drawRect(00480480);
  42.             g.graphics.endFill();
  43.             bmd.draw(g, matrix)
  44.         }
  45.         //most simple patern
  46.         public function sample1():BitmapData{
  47.             return BitmapPatternBuilder.build(
  48.                 [[1,0],
  49.                  [0,1]],
  50.                 [0xff000000, 0xffffffff]
  51.             );
  52.         }
  53.      }
  54. }
  55. /**-----------------------------------------------------
  56.  * Use following BitmapPatternBuilder class 
  57.  * 
  58.  * DO NOT CHANGE any codes below this comment.
  59.  *
  60.  * -----------------------------------------------------
  61. */
  62. import flash.display.Bitmap;
  63. import flash.display.BitmapData;
  64. import flash.display.Graphics;
  65.     
  66. class BitmapPatternBuilder{
  67.     /**
  68.      * creates BitmapData filled with dot pattern.
  69.      * First parameter is 2d array that contains color index for each pixels;
  70.      * Second parameter contains color reference table.
  71.      *
  72.      * @parameter pattern:Array 2d array that contains color index for each pixel.
  73.      * @parameter colors:Array 1d array that contains color table.
  74.      * @returns BitmapData
  75.      */
  76.     public static function build(pattern:Array, colors:Array):BitmapData{
  77.         var bitmapW:int = pattern[0].length;
  78.         var bitmapH:int = pattern.length;
  79.         var bmd:BitmapData = new BitmapData(bitmapW,bitmapH,true,0x000000);
  80.         for(var yy:int=0; yy<bitmapH; yy++){
  81.             for(var xx:int=0; xx<bitmapW; xx++){
  82.                 var color:int = colors[pattern[yy][xx]];
  83.                 bmd.setPixel32(xx, yy, color);
  84.             }
  85.         }
  86.         return bmd;
  87.     }
  88.     
  89.     /**
  90.      * short cut function for Graphics.beginBitmapFill with pattern.
  91.      */
  92.     public static function beginBitmapFill(pattern:Array, colors:Array, graphics:Graphics):void{
  93.         var bmd:BitmapData = build(pattern, colors);
  94.         graphics.beginBitmapFill(bmd);
  95.         bmd.dispose();        
  96.     }
  97. }
flash swf thumbnail play
出題者からのコメント
モアレを利用することで、サンプルのパターン1つから複雑な文様を生み出した工夫が面白い。
Comments from King
By using Moiré, complex design from one pattern of the sample is interesting.

Knightswingpants

  1. // forked from checkmate's fladdict challenge for professionals
  2. /**
  3.  * Theme:
  4.  * Play with BitmapPatterBuilder.
  5.  * Purpose of this trial is to find the possibility of the dot pattern.
  6.  *
  7.  * by Takayuki Fukatsu aka fladdict
  8.  **/
  9.   /**
  10.  * Cityscape Maker v0.1
  11.  * 3D Cityscape, with dot pattern windows and 3D fly - To do: Camera flybys.
  12.  *
  13.  * by Swingpants
  14.  **/
  15. package 
  16.     import flash.display.Sprite; 
  17.     import flash.display.MovieClip;
  18.     import flash.display.BitmapData 
  19.     import flash.events.Event; 
  20.     import flash.display.Graphics;
  21.     import flash.display.StageQuality 
  22.     import flash.text.*; 
  23.     import flash.geom.Point;
  24.     import org.papervision3d.materials.ColorMaterial; 
  25.     import org.papervision3d.objects.primitives.Plane; 
  26.     import org.papervision3d.objects.primitives.Cube; 
  27.     import org.papervision3d.objects.primitives.Cylinder; 
  28.     import org.papervision3d.scenes.Scene3D; 
  29.     import org.papervision3d.view.Viewport3D; 
  30.     import org.papervision3d.cameras.Camera3D; 
  31.     import org.papervision3d.render.BasicRenderEngine; 
  32.     import org.papervision3d.materials.shadematerials.FlatShadeMaterial
  33.     import org.papervision3d.materials.utils.MaterialsList
  34.     import org.papervision3d.materials.special.CompositeMaterial
  35.     import org.papervision3d.materials.ColorMaterial;
  36.     import org.papervision3d.materials.BitmapMaterial
  37.     import org.papervision3d.materials.*
  38.     import org.papervision3d.lights.PointLight3D;
  39.     import org.papervision3d.objects.DisplayObject3D
  40.     
  41.     import caurina.transitions.*;
  42.     
  43.     import net.hires.debug.Stats;
  44.   
  45.     [SWF(width=480, height=480, backgroundColor=0x000000)] 
  46.     public class Professional extends Sprite 
  47.     { 
  48.         private var tf:TextField=new TextField()
  49.         public var renderer:BasicRenderEngine = new BasicRenderEngine();; 
  50.         public var camera:Camera3D = new Camera3D(); 
  51.         public var viewport:Viewport3D = new Viewport3D(600,600); 
  52.         public var scene:Scene3D = new Scene3D(); 
  53.         public var mat:ColorMaterial = new ColorMaterial(0xFF0000); 
  54.         public var cubeMat:CompositeMaterial
  55.         public var materialsList:MaterialsList = new MaterialsList();
  56.         public var cube:Cube
  57.         public var cylinder:Cylinder
  58.         public var cubeSize:int=200
  59.         
  60.         public var panelMaterial:BitmapMaterial
  61.         
  62.         public var container3d:DisplayObject3D=new DisplayObject3D()
  63.         
  64.     public var window_pattern1:Array=[
  65.                         [0,0,0,0,0,0],
  66.                         [0,1,1,1,1,0],
  67.                         [0,1,2,2,1,0],
  68.                         [0,1,2,2,1,0],
  69.                         [0,1,1,1,1,0],
  70.                         [0,0,0,0,0,0]]
  71.         public var window_pattern2:Array=[
  72.                         [2,2,2,2,2,2],
  73.                         [2,1,1,1,1,2],
  74.                         [2,1,1,1,1,2],
  75.                         [2,1,1,1,1,2],
  76.                         [2,1,1,1,1,2],
  77.                         [2,2,2,2,2,2]]
  78.         public var window_pattern3:Array=[
  79.                         [1,1,1,1,1,1],
  80.                         [1,0,0,0,0,1],
  81.                         [1,0,0,0,0,1],
  82.                         [1,0,0,0,0,1],
  83.                         [1,0,0,0,0,1],
  84.                         [1,0,0,0,0,1]]
  85.         public var window_pattern4:Array=[
  86.                         [1,1,1,1,1,1],
  87.                         [2,1,0,0,0,1],
  88.                         [2,0,1,0,0,1],
  89.                         [2,0,0,1,0,1],
  90.                         [2,0,0,0,1,1],
  91.                         [2,2,2,2,2,1]]
  92.         public var window_pattern5:Array=[
  93.                         [0,0,0,0,0,0],
  94.                         [0,0,0,0,0,0],
  95.                         [0,0,1,1,1,0],
  96.                         [0,0,1,2,1,0],
  97.                         [0,0,1,1,1,0],
  98.                         [0,0,0,0,0,0]]
  99.         public var windows:Array=[window_pattern1,window_pattern2,window_pattern3,window_pattern4,window_pattern4]
  100.                         
  101.     private var col1:uint=0xff000000;
  102.         private var col2:uint=0xff555555;
  103.         private var col3:uint=0xffDDDDDD;
  104.         private var colour_array:Array=[col1,col2,col3]    
  105.         
  106.         private var dir:int=15;
  107.         
  108.         private const maxNumLevels:int=5
  109.         private const maxBaseSize:int=125
  110.         private var buildingLevels:Array=[]
  111.         
  112.         private var buildings:Array=[]
  113.         
  114.         private var grid_width:int=5
  115.         private var grid_height:int=6 
  116.         
  117.         private var cam_horiz:Boolean=false
  118.         private var cam_pos:Point=new Point(Math.floor(grid_width/2),0)
  119.         private var cam_target:Point=new Point(cam_pos.x,Math.floor(grid_height/2))
  120.         
  121.         private var diff:Number
  122.         
  123.         
  124.         public function Professional() 
  125.         { 
  126.             scene.addChild(container3d)
  127.             
  128.             camera.x = 30;
  129.             camera.y = 100
  130.         camera.z = -15*cubeSize;
  131.             
  132.         camera.zoom = 30;
  133.         camera.focus = 60;
  134.             //camera.lookAt(container3d)
  135.             
  136.             addChild(viewport) 
  137.             
  138.             createCityGrid(grid_width,grid_height) //Build the city
  139.             addEventListener(Event.ENTER_FRAME,oef); 
  140.             
  141.             tf.textColor=0xffffff
  142.             addChild(tf)
  143.             
  144.             stage.quality=StageQuality.LOW
  145.             //var s:Stats = new Stats();
  146.             //addChild(s);
  147.         }
  148.         
  149.         public function createCityGrid(rows:int,cols:int):void
  150.         {
  151.             buildings=[]
  152.              for(var i:int=0;i<cols;i++)
  153.                 {
  154.                     for(var j:int=0;j<rows;j++)
  155.                         {
  156.                             
  157.                             var tower:DisplayObject3D=createBuilding()
  158.                             tower.x=j*maxBaseSize*2//+maxBaseSize*4
  159.                             tower.z=i*maxBaseSize*2//+maxBaseSize*4
  160.                             container3d.addChild(tower)
  161.                             buildings.push(tower)
  162.                         }
  163.                 }
  164.             container3d.x-=rows*maxBaseSize
  165.         }
  166.         
  167.        
  168.         //#######Testing logic to randomise buildings - still needs lots of tweaking########
  169.         private function createBuilding():DisplayObject3D
  170.         {
  171.             var container:DisplayObject3D=new DisplayObject3D()
  172.             var levels:int=Math.ceil(Math.random()*maxNumLevels)
  173.             var maxHeight:int=levels*maxBaseSize*(0.5+(Math.random()*0.5))
  174.             var rnd:int
  175.             var w:int=maxBaseSize*0.75 + maxBaseSize*Math.random()*0.25
  176.             var h:int=maxHeight*0.5 + maxHeight*Math.random()*0.5
  177.             maxHeight-=h
  178.             var d:int=maxBaseSize*0.5 + maxBaseSize*Math.random()*0.5
  179.             var ypos:int=0
  180.             var buildingLevels:Array=[]
  181.             
  182.             for(var i:int=0;i<levels;i++)
  183.                 {
  184.                     ypos+=Math.ceil(h*0.5)
  185.                     rnd=Math.floor(Math.random()*10)
  186.                     switch(rnd) //Ropey method of slanting the results towards the cube and restricting the tapered cylinder - need to improve...
  187.                         {
  188.                             case 0://Cube
  189.                             case 1:
  190.                             case 2
  191.                             case 3:
  192.                             case 4:
  193.                             case 5:
  194.                             case 6:
  195.                                 buildingLevels.push(buildCube(w,d,h))
  196.                                 break;
  197.                             case 7://Cylinder
  198.                             case 8:
  199.                                 if(i==0)
  200.                                     {
  201.                                         buildingLevels.push(buildCylinder(w*0.5,h))
  202.                                     }
  203.                                     else
  204.                                     {
  205.                                         w*=0.7//Reduce size of cylinder if not 1st
  206.                                         buildingLevels.push(buildCylinder(w,h))
  207.                                      }
  208.                                 break;
  209.                             case 9://Tapered cylinder
  210.                                 if(i!=0)w*=0.7//Reduce size of cylinder if not 1st
  211.                                 buildingLevels.push(buildCylinder(w,h,true))
  212.                                 w*=0.6
  213.                                 break;
  214.                         }
  215.                    
  216.                     buildingLevels[i].y=ypos
  217.                     ypos+=Math.ceil(h*0.5)
  218.                     w*=0.4+Math.random()*0.4
  219.                     d*=0.4+Math.random()*0.4
  220.                     h=maxHeight*0.2+maxHeight*Math.random()
  221.                     maxHeight-=h
  222.                     
  223.                     container.addChild(buildingLevels[i])
  224.                 }
  225.             return container
  226.         }
  227.         
  228.         private function clearBuilding():void
  229.         {
  230.             var len:int=buildingLevels.length
  231.             for (var i:int=0;i<len;i++)
  232.                 {
  233.                     container3d.removeChild(buildingLevels[i])
  234.                 }
  235.             buildingLevels=[]
  236.         }
  237.         
  238.         private function buildCylinder(r:Number=100,h:Number=1000,tapered:Boolean=false):Cylinder
  239.         {
  240.             var cyl:Cylinder=new Cylinder(createDotTexture(r,h,false),r,h,8,6,tapered?r*0.8:-1,true,false)
  241.             
  242.             return cyl
  243.         }
  244.         
  245.         private function buildCube(w:int=200,h:int=200,d:int=200):Cube
  246.         {
  247.             var cubeMatList:MaterialsList = new MaterialsList( ); 
  248.             var main_mat:BitmapMaterial=createDotTexture(w,h)
  249.             cubeMatList.addMaterial( main_mat, "left" ); 
  250.             cubeMatList.addMaterial( main_mat, "right" ); 
  251.             cubeMatList.addMaterial( main_mat, "front" ); 
  252.             cubeMatList.addMaterial( main_mat, "back" ); 
  253.             cubeMatList.addMaterial( new ColorMaterial(0x333333,1), "top" );
  254.             var cubeObj:Cube = new Cube( cubeMatList, w, h, d, 4440, Cube.BOTTOM); 
  255.             // cubeObj.replaceMaterialByName(new ColorMaterial(0xff0000,1), "top");
  256.             return cubeObj
  257.         }
  258.         
  259.     public function createBitmapMaterialTexture():BitmapMaterial
  260.         {
  261.             var dot_pattern:Array=choosePattern()
  262.              return new BitmapMaterial(BitmapPatternBuilder.build(dot_pattern, colour_array))
  263.         }
  264.     
  265.         private function createDotTexture(w:int=200,h:int=200, useBorder:Boolean=true ,win_w:int=20,win_h:int=40):BitmapMaterial
  266.         {
  267.             var sprite:Sprite=new Sprite()
  268.             var dot_pattern:Array=choosePattern()
  269.             var border_col:uint=0x666666+Math.ceil(Math.random()*9)*0x111111 //Randomise the border colour (greyscale)
  270.             
  271.             sprite.graphics.beginBitmapFill(BitmapPatternBuilder.build(dot_pattern, colour_array));
  272.             if(useBorder)sprite.graphics.lineStyle(5+Math.ceil(Math.random()*5), border_col); //If using a border then have one that is a random width from 5 to 10
  273.             sprite.graphics.drawRect(0,0,w,h)
  274.             sprite.graphics.lineStyle(5, 0xffffff);
  275.             sprite.graphics.endFill()
  276.             
  277.             var bmd_w:int=w>10?w:10
  278.             var bmd_h:int=h>10?h:10
  279.             var bmd:BitmapData = new BitmapData(bmd_w, bmd_h, false, 0x00000000);
  280.             bmd.draw(sprite)
  281.             
  282.             return new BitmapMaterial(bmd)
  283.         }
  284.         
  285.         private function choosePattern():Array
  286.         {
  287.             var rnd:int=Math.floor(Math.random()*windows.length) //Randomly select the pattern to use
  288.             return windows[rnd]
  289.         }
  290.             
  291.         private function createTexture(w:int=200,h:int=200, win_w:int=20,win_h:int=40):BitmapMaterial
  292.         {
  293.             w=w>50?w:50 //Set minimum size for width and height
  294.             h=h>50?h:50
  295.             var sprite:Sprite=new Sprite()
  296.             
  297.             
  298.             sprite.graphics.lineStyle(10, 0xffffff);
  299.             sprite.graphics.drawRect(0,0,w,h)
  300.             sprite.graphics.lineStyle(5, 0xffffff);
  301.             
  302.             var win_gap_w:Number=win_w*0.25
  303.             var win_gap_h:Number=win_h*0.25
  304.             var columns:int=(w-win_w/2)/(win_w+win_gap_w)
  305.             var rows:int=(h-win_h/2)/(win_h+win_gap_h)
  306.             win_gap_w=(w-columns*win_w)/(columns+1)
  307.             win_gap_h=(h-rows*win_h)/(rows+1)
  308.             
  309.             for (var i:int=0;i<columns;i++)
  310.                 {
  311.                     for(var j:int=0;j<rows;j++)
  312.                         {
  313.                             sprite.graphics.drawRect(win_gap_w+i*(win_w+win_gap_w), win_gap_h+j*(win_h+win_gap_h),win_w,win_h)
  314.                         }
  315.                 }
  316.             var bmd:BitmapData = new BitmapData(200200false, 0x00000000);
  317.             bmd.draw(sprite)
  318.             return new BitmapMaterial(bmd)
  319.         }
  320.         
  321.         private function rotateAndRaiseCamera():void
  322.         {
  323.             camera.y+=dir
  324.             if(camera.y>1500 || camera.y<50) dir=-dir //Swing camera up and down
  325.             camera.lookAt(container3d)          
  326.             container3d.rotationY+=1.5
  327.         }
  328.         //###########CODE TO TRAVEL THROUGH CITY STREETS
  329.         private function tweenToNextPoint():void
  330.         {
  331.             
  332.             Tweener.addTween(camera,{x:maxBaseSize*2*cam_target.x, z:maxBaseSize*2*cam_target.y,time:diff*0.75,onComplete:rotateToDirection})
  333.         }
  334.         
  335.         private function rotateToDirection():void
  336.         {
  337.             var to_x:int=cam_pos.x
  338.             var to_y:int=cam_pos.y
  339.    
  340.             
  341.             if(cam_horiz)
  342.                 {
  343.                     to_x=1+Math.floor(grid_width-1)
  344.                     if(to_x==cam_pos.x)
  345.                         {
  346.                            if((grid_width-to_x)>grid_width*0.5){to_x-=1}
  347.                                else{to_x+=1}
  348.                         }
  349.                     diff=Math.abs(cam_pos.x-to_x)
  350.                 }
  351.                 else
  352.                 {
  353.                     to_y=1+Math.floor(grid_height-1)
  354.                     if(to_y==cam_pos.y)
  355.                         {
  356.                            if((grid_height-to_x)>grid_height*0.5){to_y-=1}
  357.                                else{to_y+=1}
  358.                         }
  359.                     diff=Math.abs(cam_pos.y-to_y)
  360.                 }
  361.              cam_target.x=to_x
  362.              cam_target.y=to_y
  363.              
  364.              Tweener.addTween(camera,{rotationY:angleToPoint(cam_pos,cam_target)-90,time:0.75,onComplete:tweenToNextPoint})
  365.              
  366.              tf.text="ang:"+angleToPoint(cam_pos,cam_target)
  367.          }
  368.          
  369.          public function angleToPoint(from:Point, to:Point):Number
  370.         {
  371.             var dx:Number = to.x - from.x
  372.             var dy:Number = to.y - from.y
  373.             return Math.atan2(dy,dx) *57.29577951308232   //  180/Math.PI=57.29577951308232
  374.         }
  375.         //##############OEF LOOP
  376.         private function oef(evt:Event):void
  377.     { 
  378.             rotateAndRaiseCamera()
  379.             //rotateToDirection()
  380.  
  381.             renderer.renderScene(scene,camera,viewport); 
  382.         } 
  383.     } 
  384. /**-----------------------------------------------------
  385.  * Use following BitmapPatternBuilder class 
  386.  * 
  387.  * DO NOT CHANGE any codes below this comment.
  388.  *
  389.  * -----------------------------------------------------
  390. */
  391. import flash.display.Bitmap;
  392. import flash.display.BitmapData;
  393. import flash.display.Graphics;
  394.     
  395. class BitmapPatternBuilder{
  396.     /**
  397.      * creates BitmapData filled with dot pattern.
  398.      * First parameter is 2d array that contains color index for each pixels;
  399.      * Second parameter contains color reference table.
  400.      *
  401.      * @parameter pattern:Array 2d array that contains color index for each pixel.
  402.      * @parameter colors:Array 1d array that contains color table.
  403.      * @returns BitmapData
  404.      */
  405.     public static function build(pattern:Array, colors:Array):BitmapData{
  406.         var bitmapW:int = pattern[0].length;
  407.         var bitmapH:int = pattern.length;
  408.         var bmd:BitmapData = new BitmapData(bitmapW,bitmapH,true,0x000000);
  409.         for(var yy:int=0; yy<bitmapH; yy++){
  410.             for(var xx:int=0; xx<bitmapW; xx++){
  411.                 var color:int = colors[pattern[yy][xx]];
  412.                 bmd.setPixel32(xx, yy, color);
  413.             }
  414.         }
  415.         return bmd;
  416.     }
  417.     
  418.     /**
  419.      * short cut function for Graphics.beginBitmapFill with pattern.
  420.      */
  421.     public static function beginBitmapFill(pattern:Array, colors:Array, graphics:Graphics):void{
  422.         var bmd:BitmapData = build(pattern, colors);
  423.         graphics.beginBitmapFill(bmd);
  424.         bmd.dispose();        
  425.     }
  426. }
flash swf thumbnail play
出題者からのコメント
白黒のドットで構成された3D都市のテクスチャーが、ミニマルかつとても美しかったです。
Comments from King
The texture of 3D city composed of a monochrome dot was minimal and very fantastic.

ad