雲雀は高く空を舞い このページをアンテナに追加 RSSフィード

「ひよこは高く空を舞い」について

2006-06-14

[]「プレゼンテーション法」より (4) 基本技法を用いた描画(2) 「プレゼンテーション法」より (4) 基本技法を用いた描画(2) - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - 「プレゼンテーション法」より (4) 基本技法を用いた描画(2) - 雲雀は高く空を舞い 「プレゼンテーション法」より (4) 基本技法を用いた描画(2) - 雲雀は高く空を舞い のブックマークコメント

http://image.blog.livedoor.jp/cibicco/imgs/c/3/c381d114.jpg

// 変数の宣言
int i, w, h, step, c;
color cl;

// 初期設定
w = 400;
h = 400;
step = 4;
    
// 描画域の用意
size(w,h);
background(0);

// w/step = 400/4本のラインを引く
for(i=0; i<w/step; i++){
    // ライン色の設定
    cl = color(255/(w/step)*i, 32, 255-255/(w/step)*i, 50);
    stroke(cl);

    line(0,i*step, i*step,h); //始点(上端, t), 終点(t, 下端)
    line(w,i*step, i*step,0); //始点(右端, t), 終点(t, 左端)
}

こんな単純な式でもこんなに美しい。数式によるアーティスティックな表現が簡単にできる、って言うただこの一点だけでも、十分にprocessingを使う価値があると思う。

しかし、processingで外部ライブラリを用いることなく扱える数学演算はごくわずか。

ここでの数式はプログラム中にも書いてあるけど、始点 (0,t) , 終点 (t,400) の直線と、始点 (400,t), 終点 (t, 0) の直線をそれぞれ t を 0 から 4 刻みで 400 まで。


描画のところをちょっとだけ変えて描画。

http://image.blog.livedoor.jp/cibicco/imgs/7/9/79b2bb47.jpg

int i, w, h, step, c;
color cl;

w = 400;
h = 400;
step = 2;
    
size(w,h);
background(0);

for(i=0; i<w; i++){
    cl = color(255/(w/step)*i, 32, 255-255/(w/step)*i, 50);
    stroke(cl);
    line(0,w*sin(i*step), h*cos(i*step),h);
    line(w,w*cos(i*step), h*sin(i*step),0);
}

こちらは,始点 (0, 400*sin(t)), 終点 (400*cos(t), t) の直線と、始点 (t, 400*cos(t)), 終点 (400*sin(t), 0) の直線をそれぞれ t を 0 から 1 刻みで 400 まで。400 は描画領域のサイズ.


キーワード

cat::processing.org, processing.org

, ,

トラックバック - http://chick.g.hatena.ne.jp/allegro/20060614

2006-06-12

[]Stroke/ラインのプロパティを指定する各種メソッド Stroke/ラインのプロパティを指定する各種メソッド - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - Stroke/ラインのプロパティを指定する各種メソッド - 雲雀は高く空を舞い Stroke/ラインのプロパティを指定する各種メソッド - 雲雀は高く空を舞い のブックマークコメント

目次

プレゼンテーション法(3) - 雲雀は高く空を舞い - ひよこの会」にてラインを引くデモを示した。ここではライン関係の関数を紹介する。


ここではProcessingリファレンスより、Stroke・ラインに関するメソッドを紹介する。なお,ここで記述はProcessing 1.0(BETA)に基づくものであり,バージョンの違いにより異なった挙動を示す可能性がある事に注意すること。

Language (API) リファレンス / Processing 1.0 (BETA)

stroke()

これはナニ?

ラインや図形の境界線の色を指定する関数。指定される色のモードは、現在のcolorMode()によってRGBかHSBになる。デフォルトのカラースペースはRGBであり,各色の範囲は0から255である。

文法

stroke(gray)

stroke(gray, alpha)

stroke(color)

stroke(value1, value2, value3)

stroke(value1, value2, value3, alpha)

引数
gray
グレイスケール。整数(int)あるいは浮動小数(float)
alpha
線のアルファ値(透明度)。 整数(int)あるいは浮動小数(float)
color
color変数。color変数として宣言されてれば何でも(多分)
value1
赤(Red)あるいは色相(Hue)。現在のカラーモードによる。整数(int)あるいは浮動小数(float)。
value2
緑(Green)あるいは彩度(Saturation)。現在のカラーモードによる。整数(int)あるいは浮動小数(float)。
value3
青(Blue)あるいは明度(Brightness)。現在のカラーモードによる。整数(int)あるいは浮動小数(float)。

…めいどと入力すると,メイドと変換される…。


2006-06-01-01

stroke(153);
line(30, 20, 85, 95);

2006-06-01-02

stroke(204, 102, 0);
line(30, 20, 85, 95);

noStroke()

これはナニ?

線と図形の境界線を引かなくする。もしnoStroke()とnoFill()が共に呼ばれた場合,スクリーンには何も描画されない。

文法

noStroke()

引数

なし

2006-06-01-03

noStroke();
rect(30, 20, 55, 55);

ちょっと例が分かりにくいね。

strokeWeight()

これはナニ?

線幅の指定。単位はpixel。これはP3Dレンダラーの元では機能しない(とか)

文法

strokeWeight(width)

引数
width
線幅(pixels)。 整数(int)あるいは浮動小数(float)。

2006-06-01-04

smooth();
strokeWeight(1);   // Default
line(20, 20, 80, 20);
strokeWeight(4);   // Thicker
line(20, 40, 80, 40);
strokeWeight(10);  // Beastly
line(20, 70, 80, 70);

strokeJoin()

これはナニ?

ラインの接続部分の形状を指定する.形状はMITER, BEVEL, ROUNDの三種類(例を参照)。

なお,この関数はP2D, P3D, OPENGLレンダラーの元では機能しない。

文法

strokeJoin(MODE)

引数
MODE
MITER, BEVEL, ROUNDのいずれか。例を参照。

2006-06-01-05

smooth();
strokeWeight(10.0);
strokeJoin(MITER);
beginShape(LINE_STRIP);
vertex(35, 20);
vertex(65, 50);
vertex(35, 80);
endShape();


2006-06-01-06

smooth();
strokeWeight(10.0);
strokeJoin(BEVEL);
beginShape(LINE_STRIP);
vertex(35, 20);
vertex(65, 50);
vertex(35, 80);
endShape();

2006-06-01-07

smooth();
strokeWeight(10.0);
strokeJoin(ROUND);
beginShape(LINE_STRIP);
vertex(35, 20);
vertex(65, 50);
vertex(35, 80);
endShape();

strokeCap()

これはナニ?

線の端の形状を指定する.指定できる形状は四角か丸かちょい伸びの三種類(例を参照の事)。デフォルトの形状は丸(ROUND)。

なお,この関数はP2D, P3D, OPENGLレンダラーの元では機能しない。

文法

strokeCap(MODE)

引数
MODE
SQUARE, PROJECT, ROUNDのいずれか。例を参照.

2006-06-01-08

smooth();
strokeWeight(12.0);
strokeCap(ROUND);
line(20, 30, 80, 30);
strokeCap(SQUARE);
line(20, 50, 80, 50);
strokeCap(PROJECT);
line(20, 70, 80, 70);


キーワード

cat::processing.org, processing.org

, ,

トラックバック - http://chick.g.hatena.ne.jp/allegro/20060612

2006-06-02

[]プレゼンテーション法(3) プレゼンテーション法(3) - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - プレゼンテーション法(3) - 雲雀は高く空を舞い プレゼンテーション法(3) - 雲雀は高く空を舞い のブックマークコメント

第2回(id:allegro:20060531:p2)の続き。基本技法を使っての描画。

f:id:allegro:20060603132001j:image

// 変数の宣言
int i, i_max, w, h;
color cl;

// 初期設定
w = 200;
h = 200;
i_max = 500;
//i_max =  2500;
//i_max =  5000;
//i_max = 10000;
        
// 描画領域の用意
size(w,h);
background(0);

// i_max回ランダムな向き、色、透明度25%でラインを描く
for(i=0; i<i_max; i++){
    cl = color(random(255),random(255),random(255),25);
    stroke(cl);
    line(random(w),random(h),random(w),random(h));
}

上の図はi_maxを500回(A)、2500回(B),5000回(C),10000回(D)としてそれぞれ保存、photoshopで一枚にして文字を書き込んだもの。

描画領域を制限する方法、文字を書き込む方法が分かればphotoshopを使う必要はないんだけど。

[]processing使用環境 processing使用環境 - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - processing使用環境 - 雲雀は高く空を舞い processing使用環境 - 雲雀は高く空を舞い のブックマークコメント

[]saveFrame() saveFrame() - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - saveFrame() - 雲雀は高く空を舞い saveFrame() - 雲雀は高く空を舞い のブックマークコメント

プログラム中に

saveFrame();

と書いて実行すると、実行後にかかれた画面の画像データがTIFイメージファイルとして保存される。この時、保存されたファイルは「Sketch Folder」に保存される。[Sketch]メニューから[Show Sketch Folder]を選択することでフォルダが表示される。


キーワード

cat::processing.org, processing.org

, ,

トラックバック - http://chick.g.hatena.ne.jp/allegro/20060602

2006-05-31

[]「プレゼンテーション法」より(1) 「プレゼンテーション法」より(1) - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - 「プレゼンテーション法」より(1) - 雲雀は高く空を舞い 「プレゼンテーション法」より(1) - 雲雀は高く空を舞い のブックマークコメント

千葉商科大学政策情報学研究科における田所淳によるコミュニケーション特殊研究I(プレゼンテーション法)よりのメモ。

Nothing found for Presen Php?itemid=157

こちらで紹介されているサイトが素敵。


[]「プレゼンテーション法」より(2) 「プレゼンテーション法」より(2) - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - 「プレゼンテーション法」より(2) - 雲雀は高く空を舞い 「プレゼンテーション法」より(2) - 雲雀は高く空を舞い のブックマークコメント

Nothing found for Presen Php?itemid=169より

今回は色々な基本。

プログラム中の変数は宣言が変数型の宣言が必要。

各行は「;」で終わる必要がある。

コメント

//で始まる行はコメントとして扱われる。

/**/で囲まれた部分はコメントとして扱われる。

描画

size(x, y);で幅x、縦yのウィンドウを用意

background(g);でバックグラウンドカラーを指定

(g)は0~255の256階調グレースケールか、(r,g,b)で256^3のRGBカラー指定が可能。

size(200, 200);
background(102);

テキストの書き出し

printまたはprintlnテキストエリアにテキストを書き出す。

print関数は改行しない。println関数は末尾で改行する。

テキストは「"」で囲む

print("Please tea, Reudy");
println("日本語もOK");

変数

変数は使用する前に宣言が必要

int x; // integer x (整数)
float x; // float x (小数)
color x; //色情報 x

基本図形の描画

ラインの色の指定
stroke(R, G, B)
塗りつぶし
fill(R, G, B, a)

aはアルファ値(透明度)。0で透明。省略可能。

また、色の指定にHTML式の指定も可能

fill(#CC6600);

ぬりつぶさないときは

noFill();
point(x, y);

座標(x,y)に点を描く。色はstrokeで指定

ライン
line(x1, y1, x2, y2); 

始点:(x1, y1)、 終点:(x2, y2)

長方形

rect(x, y, width,  height);

(width, height)は長方形の幅と高さ

(x, y)はデフォルトでは長方形の左上の角の座標

rectmode()により長方形の中心か左上角かの切り替えが可能

rectmode(CORNER);
rectmode(CENTER_DIAMETER);

楕円

ellipse(x, y,  width, height);

楕円の中心座標(x, y)

楕円の幅と高さ(width, height)

(x,y)は長方形と同様にellipseMode()によって指定可能

三角形

triangle(x1, y1,  x2, y2, x3,  y3);

繰り返し for文

int i;
for(i=0; i<20; i++){
rect(0, 0, width, height)
}

20回{}内を繰り返し実行する。

ここでwidth, heightは描画領域の幅と高さを表す固定変数

これにより20回描画領域と同じサイズの長方形を描く。

乱数

random(x);
random(x,y);
randomSeed(x);

引数が1つの場合は0からxまでの間で乱数を生成。引数が2つの場合はxからyの間で乱数を生成。xとyを含むのかは不明。生成される乱数は浮動小数点。整数にするにはint()を使う。

また、randomSeed(x);乱数生成器の初期値を設定できる。

f:id:allegro:20060601064245p:image

図は適当に書いたもの

size(180, 180);

background(0);
stroke(51,32,251);
fill(251,32,84);
point(23,21);      // 点
line(12,32,51,46); // ライン
rect(83,25,30,30); // 四角

stroke(51,32,251);
fill(251,43,84,75);
ellipse(51,84,20,45);  // 楕円
triangle(20,15,30,45,61,12);  // 三角形

線の太さはどうするんだろなぁ。


キーワード

cat::processing.org, processing.org

, ,

wavzgiwbdsswavzgiwbdss2011/03/05 10:04Jy996B <a href="http://lnbiemtgvggo.com/">lnbiemtgvggo</a>, [url=http://rpbmsqgnzvrp.com/]rpbmsqgnzvrp[/url], [link=http://mmbciqdgaxks.com/]mmbciqdgaxks[/link], http://rpuvuixrohpf.com/

2006-05-27

[]Processing始めます Processing始めます - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - Processing始めます - 雲雀は高く空を舞い Processing始めます - 雲雀は高く空を舞い のブックマークコメント

カテゴリ[processing.org]を使って、サウンド&ビジュアル向けプログラミング環境[Processing]についてのメモを記していきます。

[]Processingとは Processingとは - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - Processingとは - 雲雀は高く空を舞い Processingとは - 雲雀は高く空を舞い のブックマークコメント

Processing is a programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production.

Processingは,コンピュータプログラミングを学ぶ学生や,工学研究者エンジニアのようにコンピュータに関する専門的な知識を持たないデザイナーアーティストのような人にも,ビジュアルやサウンドやインタラクションを組み込んだプログラムをなるべく簡単に作って学べることを目指して開発されています.

類似環境としてFLASH, Max/MSP&JITTER, SuperCollider, pdなどを挙げることが出来るがProcessingの利点として無料であること,手軽であること,外部デバイスとの連携が用意であること,JAVAの拡張クラスとしてデザインされていることなどが挙げられる.

[]インストール方法 インストール方法 - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - インストール方法 - 雲雀は高く空を舞い インストール方法 - 雲雀は高く空を舞い のブックマークコメント

インストール

http://processing.org/download/index.html

Mac OS X

  1. ダウンロードサイトからMacOSXProcessingダウンロードする
  2. ダウンロードされると自動的にファイルが開くので、中のフォルダデスクトップなど適当なところにコピーする

Windows

  1. ダウンロードサイトからWindowsProcessingダウンロードする
  2. ファイルを解凍して、適当なところにコピーする。

[]情報の入手先 情報の入手先 - 雲雀は高く空を舞い を含むブックマーク はてなブックマーク - 情報の入手先 - 雲雀は高く空を舞い 情報の入手先 - 雲雀は高く空を舞い のブックマークコメント

公式サイトとかリファレンスとか。

ググる

テキスト

dotinpactさんによる何かの講義資料

とりあえず、これを読めば基本は大丈夫な感じ。

田所淳さんによる講義資料

Max/MSPFlashテキストもあって面白い。

第17回のProccessing入門、動画編集用ライブラリJMyronの紹介が面白い

  • いろいろなサンプル

http://www.harukit.com/p5skch.html

その他 (まだみてない)

テクノラティプロフィール