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

ad