【JavaScript】Canvasを使ってとりあえず3Dの球を書いてみようと思ったんだけど、いまいちなんだかよくわからない。

ガッと書きたくなって、ざっと書いたので雑だ。

var Tk = Tk || {};

Tk.gui = {};
Tk.canvas = {};
Tk.t3d = {};

//テキトーなのでなんとかしたい 
Tk.t3d.objct= null;


Tk.gui.getElem = function(id){
    return document.getElementById(id)
}



Tk.canvas.getCanvasContext = function(id){
    var canvas = Tk.gui.getElem(id);
    if (canvas.getContext) {
 var context = canvas.getContext('2d');
    }
    return context
}


Tk.canvas.animate = function(ctx,time){
    setInterval(
 function(){
     Tk.canvas.update(ctx)
 }
 ,time)
}

Tk.canvas.clear = function(ctx){
    ctx.fillStyle = "#FFFFFF"
    ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
}

Tk.canvas.setup = function(ctx){
    var sp= new Tk.t3d.Sphere(200,10,10);
    
    Tk.t3d.drawMesh(ctx,sp.points,sp.indices);
    Tk.t3d.object = sp;
}

//更新しているけど、別に動いていない。
Tk.canvas.update = function(ctx){
    Tk.canvas.clear(ctx);
    var sp = Tk.t3d.object;
    Tk.t3d.drawMesh(ctx,sp.points,sp.indices);
}

Tk.t3d.Point3d = function(x,y,z){
    this.x = x;
    this.y = y;
    this.z = z;
}

Tk.t3d.Point = function(x, y){
    this.x = x;
    this.y = y;
}

Tk.t3d.Sphere = function(r,rows,cols){
    this.r = r;
    this.rows = rows;
    this.cols = cols;
    this.points = setPoints(r,rows,cols);
    this.indices = setIndices(r,rows,cols);
    
    function setPoints(r,rows,cols){
 var pList = [];
 for(var i = 0;i < rows; i++){
     for(var j = 0;j < cols; j++){
  var angle1 = Math.PI * 2 / ( cols -1 ) * j
  var angle2 = Math.PI * i / ( rows -1 ) -Math.PI/ 2;
  var point = new Tk.t3d.Point3d(
      r * Math.cos(angle1) * Math.cos(angle2),
      r * Math.sin(angle1) * Math.cos(angle2),
      r * Math.sin(angle2)
  );
  pList.push(point)
     }
 }
 return pList;
    }


    function setIndices(r,rows,cols){
 var indices = [];
 for(var i = 0;i < rows;i++){
     for(var j = 0;j <cols; j++){
  if( i < rows - 1 && j < cols -1){
  indices.push([
      i * cols + j,
      i * cols + j + 1,
      (i + 1) * cols + j])
  indices.push([i * cols + j + 1,
        (i + 1) * cols + j + 1,
        (i + 1 ) * cols +j]);
  }
     }
 }
 return indices;
    }
}

Tk.t3d.toPersePectionPoints = function(points){
    var parsePection = 200;
    var forcalLength = 250;
    var pList = [];
    for(var i = 0; i < points.length;i++){
 var scale = forcalLength / ( forcalLength + points[i].z + parsePection)
 pList.push(new Tk.t3d.Point(points[i].x * scale, points[i].y * scale));
    }
    return pList;
}

Tk.t3d.draw3d = function(ctx,points){
    var drawPoints =Tk.t3d.toPersePectionPoints(points)
    for(var i = 0; i < drawPoints.length;i++){
 ctx.beginPath();
 ctx.arc(drawPoints[i].x + 100, drawPoints[i].y + 100, 1, 0, Math.PI*2, false)
 ctx.fill();
    }
    
}

Tk.t3d.drawMesh = function(ctx,points,indices){
    var drawPoints =Tk.t3d.toPersePectionPoints(points)
    var offsetX = ctx.canvas.width / 2;
    var offsetY= ctx.canvas.height / 2;
    for(var i = 0; i < indices.length;i++){
 var index = indices[i]
 ctx.beginPath();
 ctx.moveTo(points[index[0]].x + offsetX  ,points[index[0]].y + offsetY );
 ctx.lineTo(points[index[1]].x + offsetX  ,points[index[1]].y + offsetY);
 ctx.lineTo(points[index[2]].x + offsetX  ,points[index[2]].y + offsetY );
 ctx.lineTo(points[index[0]].x + offsetX  ,points[index[0]].y + offsetY);
 ctx.stroke();
    }
    
}

Tk.t3d.main = function(){
    var ctx = Tk.canvas.getCanvasContext("canvas_20130621");
    Tk.canvas.setup(ctx);
    Tk.canvas.animate(ctx,200);
}

Tk.t3d.main();

【Ruby】WebrickのProxyContentHandlerとProcクラス

前々回の記事webrickでプロキシサーバをつくろうとしてデータを書き換えたりするために使っていた際、ハンドラのProxyContentHandlerにProcクラスを使っていたけれど これをどうにかして、別のクラスにして置き換えたいと思った。

  handler = Proc.new(){|req,res|

    if "#{req.host}#{req.path}" == REPALCE_TARGET
      res.body = REPLACE_CONTENT
    end
  }

Procについて調べてみて出てきた説明がこちら

ブロックをコンテキスト(ローカル変数のスコープやスタックフ レーム)とともにオブジェクト化した手続きオブジェクトです。

うむ、いまいちどうしたらいいのかわからなかったのでいろいろと試行錯誤しようとしたけれど、なかなかうまくいかなかった。そこで、とりあえず適当にクラスをつくって突っ込んでみる事にした。

class Handler  
  def initialize()
  end
end

これを

handler= Handler.new

として、プロキシを設定し、適当なページにアクセスすると以下の表示が帰ってきた。

Internal Server Error

undefined method `call' for #
WEBrick/1.3.1 (Ruby/1.9.3/2012-04-20) at doc.ruby-lang.org:80

methodのcallが無いという事なので、Procの時に実装していた引数をもたせたcallというメソッドを実装

class Handler
  
  def initialize()
  end
  
  def call(req,res)
  end
  
end

すると、ページがきちんと表示された。よし、これにて一件落着。 といいたい所だけれども、とりあえずwebrickのhttpproxy.rbとproc.cを見てみた所、何となく、これでも問題なさそうだ。

https://github.com/ruby/ruby/blob/trunk/proc.c https://github.com/ruby/ruby/blob/trunk/lib/webrick/httpproxy.rb

 動くっちゃ動くけど、この実装はruby的にいいのかどうか。

【Ruby】yamlをrubyで書き出そうとしたときのメモ

設定ファイルの書き出し、書き込みみたいな事がしたかったので調べてて
使った事無かったyamlを使ってみようと思った。なんか見やすいですしおすし。

Animal:
 gorira: Goritaro
 cat  : Nyanko
 horse : Umazo

こんな風にかける。 ファイルに書き出したかったので、調べてみると、

open("./test.yml","w") do |f|
 YAML.dump(hoge,f)
end

でファイルに書き出せるっぽい。しかもrubyで書いたオブジェクトをそのままの形で書き出す事ができると、どこかで見た気がしたので、下みたいに書いて出力してみた。

#!/usr/bin/ruby
require "yaml"

hoge = "test1"
fuga = "test2"

class Hoge
  attr_accessor :hoge,:fuga
  
  def initialize(hoge,fuga)
    @hoge = hoge
    @fuga = fuga
  end
end

class Piyo
  attr_accessor :piyo

  def initialize(piyo)
    @piyo = piyo
  end
end

piyo = Piyo.new(fuga)
hoge = Hoge.new(hoge,piyog)
sample = hoge.to_yaml

open("./test.yml","w") do |f|
  YAML.dump(hoge,f)
end

すると、こんな風に書き出された。

--- !ruby/object:Hoge
hoge: test1
fuga: !ruby/object:Piyo
  piyo: test2

違う!わたしが欲しいのはこんなYAMLちゃんじゃないわ!!!1
なんか’!ruby’とか入ってるのは、rubyのオブジェクトだからっぽい。

hoge = {'Hoge' =>{'hoge'=>'test1','Piyo'=>{'piyo'=>'fuga'}}}

これだと普通に出力されました。

---
Hoge:
  hoge: test1
  fuga:
    piyo: test2

これだよ！ほしかったのは

そこで、調べてみるとオブジェクトの’taguri’と'to_yaml_style'というのを書き換えてあげるといいといいらしい。いいらしいがうまくいかず（前確かめたときはちゃんとできたのに）。
(gihyo 言語別　YAML用ライブラリ徹底解説)

いろいろと検索結果をぶらぶらとしていて、たどりついたココ(YAML/オブジェクトシリアライズ処理を読む)に習って、rubyのソースを'to_yaml'で検索してみるとそれっぽいのが出てきました。
ちなみに確認したバージョンはruby-1.9.3-p392

#ext/syck/lib/syck/rubytype.rb
class Object
    yaml_as "tag:ruby.yaml.org,2002:object"
    def to_yaml_style; end
    undef to_yaml_properties rescue nil
    def to_yaml_properties; instance_variables.sort; end
 def to_yaml( opts = {} )
  YAML::quick_emit( self, opts ) do |out|
            out.map( taguri, to_yaml_style ) do |map|
    to_yaml_properties.each do |m|
                    map.add( m[1..-1], instance_variable_get( m ) )
                end
            end
        end
 end
    alias :syck_to_yaml :to_yaml
end

これだけ見てもさっぱりわからないですね。と、ここまでやって思ったんだけど、よくよく考えると今やりたいことはyamlでやる必要ないかなぁと。（←今ココ

rubyでyamlを書き出そうとして、なんとなしにrubyのライブラリのソースにたどり着いたので、いろいろと中身も見ていければなぁと思ったりしましたメモでした。（まわりくどい）

 ※文体変えた

【Ruby】WEBrick でプロキシサーバをつくってみる

Macのブラウザでネットワーク関連の処理をあれこれしたいと思った時に、Windowsを利用していた時に使っていたFiddler的なものが欲しくなりました。WEBrickを使ってプロキシサーバをつくれば、似たような事ができる(?)と教えていただいたので、早速試してみる事にしました。 

サーバサイドのスクリプトも、Ruby自体もあまり触った事がなかったので、ついでにどんな風にかけるのかあれこれいじりながらやってみる事にしています。いろいろとやってみたい事があるのですが、とりあえず置き換えの方法だけでもメモしておきます。

 Webrickを利用している部分は抜き出してクラスに。まだまだいろいろと機能があるようなのでいじりながら何ができるかを検討中。

##./lib/proxy.rb
#!usr/bin/ruby
require 'webrick'
require 'webrick/httpproxy'
include WEBrick

class Proxy
   attr_accessor :config

  def start
    print @config
    @server = WEBrick::HTTPProxyServer.new( @config )
    Signal.trap('INT') do
     @server.shutdown
    end
    @server.start
  end

  def shutdown
    @server.shutdown
  end
   
end

設定ファイル(yml)

server:
 :BindAddress    : '127.0.0.1'
 :Port           : 10080
 :DocumentRoot   : ''
 :CGIInterpreter : '/usr/bin/ruby'

handlerの中身の部分は、あまりいろいろ試してみていないのでこれからいろいろと試しつつ、できそうな事があれば実装していこうと思います。URLを比較する部分とかはまだ適当です。

##./main.rb
#!usr/bin/ruby
require './lib/proxy.rb'
require 'yaml'

@server = Proxy.new

REPLACE_CONTENT =<<EOF
<body>
<h1>Oh!</h1>
<body>
EOF


REPALCE_TARGET = "tsukajizo.com/"

def start_proxy
  #Handler
  handler = Proc.new(){|req,res|

    if "#{req.host}#{req.path}" == REPALCE_TARGET
      res.body = REPLACE_CONTENT
    end
  } 
  
  #プロキシサーバの設定
  config = YAML.load_file('./config.yml')
  server_config = config['server']
  server_config[:ProxyContentHandler] = handler
  
  #プロキシサーバの起動
  @server.config = server_config
  @server.start
end

start_proxy

なんか、こうもうちょっと使いやすい感じにしていきたいですね。

とりあえず。

 →

こんな感じです。

【Qt】Macで、QMenuを使おうとしたときの覚え書き。

Qtの入門書(※1)のサンプルをいじっているのですが、作成するアプリケーションが一つのメソッドの動作を確かめるためには割と大きくて、各処理がちゃんとどう実行できるか確かめるために小さなアプリケーションを作成したところ、若干つまずいた部分があったので、メモ。

とりあえず、windowを出して、終了だけできるアプリケーションを実装してみた。そこで、下記のコードのように、ファイルメニュー、ヘルプメニューを作成してみた所、予想としていた結果と違う結果が出てしまった。

void MainWindow::createMenus()
{
  fileMenu = menuBar()->addMenu(tr("&File"));
  fileMenu->addAction(showTestAction);
  fileMenu->addAction(exitAction)
  
  helpMenu = menuBar()->addMenu(tr("&Help"));
  helpMenu->addAction(aboutAction);
  helpMenu->addAction(aboutQtAction);
}

で結果がこれ。

ヘルプメニューは表示されないし、ファイルメニューに設定したはずのメニューはなんか「winTest」っていう特に設定していない（アプリケーション名の）メニューの方に追加されてしまっているし、利用する分には、問題なかったとしても、想像していたのと違う動きをしているのでちょっと調べてみた。

で、Qt本家の記事（http://doc.trolltech.com/4.5/mac-differences.html#menu-bar）によると結局、OSネイティブの使用に合わせてラッパーをつくっているので、上のでwinTestに出ているものに関しては、自動的にこちらのメニューに追加されてしまうみたい。

とはいえ、どういうタイミングでこのメニューに追加されてしまうのかというのがわからなかったので、いろいろといじってみた所。下のコードを

void MainWindow::createActions()
{
  //------------ 略 ----------------//
  
  aboutAction = new QAction("&About",this);
  aboutAction->setStatusTip("Show about this application.");
  connect(aboutAction,SIGNAL(triggered()),
   this,SLOT(aboutTest()));

  //------------ 略 ----------------//
}

このように書き換えてみると

void MainWindow::createActions()
{
  //------------ 略 ----------------//
  
  aboutAction = new QAction("&Bout",this);
  aboutAction->setStatusTip("Show about this application.");
  connect(aboutAction,SIGNAL(triggered()),
   this,SLOT(aboutTest()));

  //------------ 略 ----------------//
}

こんな感じの結果になった。

というわけで、原因はここにあるという事はわかった。実装上の仕組みはまだよくわかっていないので、設定方法の仕組みがわかったら、またメモろうとは思いますが。
とりあえず、Macのメニューの設定時にびっくりしないようにメモ。

※１「入門 Qt 4 プログラミング」
Jasmin Blanchette (著), Mark Summerfield (著), 杵渕 聡 (翻訳), 杉田 研治 (翻訳)
 - amazon

【AS3.0】アプリケーションフレームワークをつくってみた。

ActionScript3.0でアプリケーション用のフレームワークをつくってみた。

Github- Framingo

アプリケーション設計の勉強と、ActionScriptを触り始めてちょうど２年半くらいになるのでそのまとめという意味で、アプリケーションプロトタイピング用の、フレームワークをつくってみました。基本的には自分が使う用、もしくは学習したナレッジの蓄積用として継続的に開発していくつもりです。

世に言うMVCというのを意識してつくったつもりですが、いろいろ調べていくと割と曖昧で、結局なにがMVCなのかっていうのは未だに消化しきれていない感じです。
FlashだとViewの部分を扱う事が多いような気がしますが、処理系が複雑になっていくにつれて、どのように整理してコードを実装して良いのかが、わからなくなってしまう事があったりもしたので、できるだけ見た目が変化する処理の部分と、オンメモリで扱うアプリケーションのデータに対する操作を切り離せるようにしたつもりです。

実装上の主なコンセプトは

1. ユーザーのアクションに対して、一対一の動作をアプリケーションが行うようにする。
2. IDEと連携した作業もしやすいようにする。
3. シンプルな処理の仕組みだけを提供し、なんでもできてしまうような便利メソッドはできるだけ提供しない。
4. 素早い実装と、コード管理のしやすさを目指す。

こんな感じです。現在バージョンはver 0.1となっていますが、現在はようやく動作するという感じです。まだ実装しきれていない部分や、まったく実装のないクラスなどがいくつかあったりします。プロトタイピング用を目指しているので、さっと実装できるのが良いと思っているのですが、現状結構めんどうくさくて解りにくいです。
XMLで記述して、アプリケーションのひな形やシーン構成が作成できるようにしようと思っていますが、現在は以下のクラスの特定メソッドを必要に応じて継承しないと例外が出るつくりになっています。

src/framingo/core/FMCoreClass.as
src/framingo/model/manager/DataManager.as
src/framingo/model/process/AbstractProcess.as
src/framingo/model/process/ProcessFlow.as
src/framingo/view/factory/SceneFactory.as

また、テストコードやサンプルコード、ドキュメントに関しては、順次整理しようと思っています。まだまだ稚拙な実装は多いと思うので、順次ブラシュアップしていければと思っています。

以下クラス構成

.

`-- framingo
    |-- core
    |   |-- FMApplication.as
    |   |-- FMCoreClass.as
    |   |-- FMCoreSetting.as
    |   |-- config
    |   |   `-- FMVersion.as
    |   |-- error
    |   |   |-- ErrorManager.as
    |   |   `-- UnimplementedError.as
    |   |-- log
    |   |   `-- Logger.as
    |   `-- system
    |       `-- SystemManager.as
    |-- data
    |   |-- AbstractDataGroup.as
    |   |-- AbstractProcessData.as
    |   |-- SceneDataGroup.as
    |   `-- action
    |       |-- AbstractAction.as
    |       |-- ActionSync.as
    |       |-- FlowAction.as
    |       |-- IDataTransfer.as
    |       |-- RenderAction.as
    |       `-- SceneAction.as
    |-- model
    |   |-- events
    |   |   |-- FlowEvent.as
    |   |   |-- ProcessActionEvent.as
    |   |   `-- ProcessEvent.as
    |   |-- factory
    |   |   `-- FlowFactory.as
    |   |-- manager
    |   |   |-- DataManager.as
    |   |   `-- ModelManager.as
    |   `-- process
    |       |-- AbstractProcess.as
    |       `-- ProcessFlow.as
    |-- presenter
    |   |-- ActionPresenter.as
    |   |-- IActionReceivable.as
    |   `-- IThrowableAction.as
    `-- view
        |-- events
        |   |-- ActionObjectEvent.as
        |   |-- RenderObjectEvent.as
        |   |-- SceneEvent.as
        |   `-- SceneManagerEvent.as
        |-- factory
        |   `-- SceneFactory.as
        |-- interactive
        |   `-- ActionObject.as
        |-- manager
        |   |-- DialogManager.as
        |   |-- SceneManager.as
        |   `-- ViewManager.as
        |-- render
        |   |-- IRenderableData.as
        |   `-- RenderObject.as
        `-- scenes
            |-- AbstractScene.as
            `-- SceneChildren.as

【Python】ファイルを検索して行番号を取得する

Pythonを使ってみたかったので、とりあえず書いてみた。
現在のディレクトリ以下のファイルを検索して、指定の文字列のある行番号を取得する。
なんとなくだけど、いまいちよくわかってない部分があったり。

import os
import glob


def get_filepath(rootpath,term):
    file_list = []
    for root,dir,files in os.walk(rootpath):
        for fname in glob.glob(os.path.join(root,term)):
            file_list.append(fname)
    return file_list


def load_files(file_list):
    file_set = {}
    for filepath in file_list:
        fname = filepath[filepath.rfind("/")+1:len(filepath)]
        f = open(filepath,"r")
        file_set.update({fname:f})
    return file_set

def close_files(file_set):
    for f in file_set.values():
        f.close()
        

def get_line_number_with_term(file_set,terms):
    line_set = {}
    for name,f in file_set.items():
        line_number = []
        count = 0
        for line in f:
            if(line.find(terms) != -1):
                line_number.append(count)
            count+=1
        line_set.update({name:line_number})
    return line_set
    
if __name__ == '__main__':
    curdir = os.getcwd()
    extention =( "*." + raw_input("[ Enter extention ]:") )
    pathList = get_filepath(curdir,extention)
    fileset = load_files(pathList)
    terms = raw_input("[ Enter terms ]:")
    lineSet = get_line_number_with_term(fileset,terms)
    close_files(fileset)
    print lineSet

実行結果

bash-3.2$ python hoge.py
python hoge.py
[ Enter extention ]:py
py
[ Enter terms ]:def
def
{'hoge.py': [5, 13, 21, 26]}