ANCT Media ART

HTML5とJS

2009-05-29T21:30:00.001+09:00

前々から話題になってるHTML5。
HTML5が標準になった暁にはもうHTMLとJSだけでこれまでFlashとかでしか作れなかったリッチなものも簡単に作れるようになるかもよー

(ex.) Flashを使用しないでHTML5で作ったYouTube。

またIEがトロトロしてるみたいなんだけど。まああんなのほっといても大丈夫でしょう

P.S.
@Reo だからJSも勉強しといた方がいいと思うでー。何もFlashじゃないとゲーム作れへんわけじゃないし。

明石高専は休校らしいね

2009-05-17T12:50:00.002+09:00

中間試験どーなるんでしょーかっ？

夏休みどーなるんでしょーかっ？

それ考えたら嬉しいようなあんま嬉しくないような・・・複雑やな〜〜〜

@Reo Webデザインどうするん？

2009-05-05T23:52:00.002+09:00

Reo君へ

Webデザインの件どうするん？

Lingr終了

2009-05-03T23:51:00.003+09:00

Lingrのサービスがもうすぐで終わっちゃうそうなので、削除して代わりにFC2のチャットを導入。

右側のサイドバーに注目。

新しい発言ほど上にくることに注意。

ちなみにこれはEgnimmargorp!と共通です。。。

Egnimmargorp!開設

2009-05-02T23:23:00.006+09:00

アートで学校の人を巻き込むのは不可能だって分かったんで、新しくEginmmargorp!っての開設しました。

意味は.............Eginmmargorp!を逆から読んでみて

プログラミング全般、数学、英語、まあなんでもおkな知的ブログになればいいなぁと。

コンセプトは「知的ダベり場」。

数学の宿題とかプログラミングの演習とかの身近なことから、自分で数学勉強したりプログラミング勉強したり何か作ったり、まあ何でもいいからそーいう感じ。

セールスポイント

数式をLaTeXで書ける
主要な言語のソースコードを色分けできる。行番号も付く。

何するか

プログラミング全般
数学
英語
自然科学
社会科学
芸術（美術・音楽）
デザイン
etc..........

最近勉強しないといけないな〜って思ってるんで作ってみた。

そして誰もいなくなった

2009-05-01T22:17:00.003+09:00

わざわざグループ作った意味ないwww

何人かでなんかやろうと思っててんけどな〜

温度差ヤバい（爆

どうすべきか

2009-04-29T17:24:00.000+09:00

さて、Webサイトを作るとか言ってたけど、どうするのか。
サイトのイメージは「クール・モダン+遊び心」って感じで知的でかっこいい感じがいいかななんて思ってるんだけど。
では具体的にどんなページがあるべきか

トップページ（当たり前すぎる）
About Us
Works（作品ギャラリー的なページ）
ソースコード、ソースファイルとかの倉庫的なページ（へのリンク）
アイデアを置くページ（実験的な作品、試作品とか）
共同ブログ
ニュース（更新履歴）

使うソフト（気軽に使える）

Aptana Studio（XHTML, CSS, JSのコーディング）
FireFox（デザインの調整、デバック）
Flex Builder（FlashのWebアプリケーションを作れる）
Safari, Opera, Google Chrome, FireFox, IE（ブラウザ調整）

使えるソフト（気軽に買えないけど、学校にある）

Flash（フラッシュの作成）
Dreamweaver（XHTML, CSSのコーディング）
Fireworks（デザインカンプやプロトタイプの作成、Web用画像の作成）
Photoshop, Illustrator（Web用画像の作成）

勉強すべき言語

XHTML（当然）
CSS（当然）
JavaScript（prototype.jsとかjQueryとかのライブラリも）
ActionScript（FlashとかFlex使うなら当然）

ワークフロー

デザインのイメージを決める
デザインカンプを作る
XHTMLコーディングをする
Photoshop, Illustrator, Flashなどで材料を作っておく
CSSでデザインする（適宜4.に戻る）
JSで動きを作る
調整

作ったはいいけど、どこにアップするんだって話なんでレンタルサーバーのことも考えておいた方がいいかな。以下参考に。

チカッパ！（月額525円容量3GB データ転送量2GB/日高機能）
heteml（月額1500円容量5GB データ転送量10GB/日高機能）

*ちなみにhetemlはチカッパ！の上位サービス

まあ気長にいきましょうや

GIMPでロゴ

2009-04-25T16:13:00.003+09:00

GIMPでロゴ作ってみた。

なかなか。

Houdini

2009-04-23T22:45:00.000+09:00

こんなソフトがあるなんて全然知らなかった。
何か面白そう。
ハイエンドの3DCGソフトだけど、Learning EditionはFreeだから使ってみようかな。

話し方

2009-04-19T22:03:00.002+09:00

なんかコメント欄で話すのだるくなったから、手軽に話せるチャット機能を導入しちゃいました。

こんなの。

下のほーにスクロールしていけば見つかります。

これからは基本こっちで話そう

ホムペ作り

2009-04-19T12:56:00.004+09:00

何を作るか大体まとまったみたい。
「ANCT Media ART」のホムペを作ろうということに。

じゃあ要約を。

作品ギャラリー
各個人の日記
グループとしての日記

メインコンテンツとしてはこんな感じになるかと思う。

では具体的な方法を

作品ギャラリーはFlash、もしくはJava Scriptでインタラクティブに作る
（非対応のブラウザのことも考えて静的なページも用意しておく）
日記はPHPで作る

ということで初めてサイトを作る割にハードルが少し高い気もするけど、それくらいの方ができた時に達成感が大きいだろうし、色々と得ることも大きいと思うからこれでいいかなと思った。

ということで勉強する必要があるもの/使えるようになる必要があるもの

XHTML + CSS（当たり前）
Flash （Action Script）
Java Script
PHP

結構多いけど頑張って勉強せな作られへんで。

では、これらを実装する環境はどうするか。

候補を挙げてみる（理想: あるといいな, 確実: 楽勝で手に入る, ---: 補足情報）

Dreamweaver CS4（理想 --- 学校にある）
Aptana Studio （確実 --- フリーソフト）
Flash CS4 professional（理想 --- 学校にある）
FireFox（確実 --- フリーソフト）
Photoshop（理想 --- 学校にある）
Fireworks（理想 --- 学校にある）

フリーソフトはまあ勝手にダウンロードして誰でも使えるんだけど、Adobeのソフトは高価だからそんなに簡単に管理下におけない。でも、学校のパソコンに入っているのでそれを使うという手がある。

だから本気でやろうと思ったらちゃんと作るだけの環境は揃っているのであとは自分たちの知識レベルを上げて制作にかからなくてはならない。

Computer Graphics

2009-04-14T19:56:00.007+09:00

CG-ARTS検定って知ってる？

これらの本はそのうち

CGクリエイター検定
CGエンジニア検定
ディジタル画像処理検定

の２級の参考書。

ただの試験の参考書というものではなく、CGの基礎をしっかり勉強するための教科書としてもすごく良い本だと思う。

学校のCGでは何にも教えてくれなかったけど、この本を読んだら知りたいことがいっぱい書いてあった。

プロジェクト案(1)

2009-04-12T18:22:00.004+09:00

これはメディアアートのグループだけど、まずは取っ付きやすいWebデザインをやりたいと思う。

絶対に必要な知識：

(X)HTMLの基本的な知識
CSSの基本的な知識
Webデザインのワークフローについての基本的な知識
デザインや色、レイアウトについての基礎的な知識

これらはプログラミング的・数学的な難しさもないから取っ付きやすいはず。

しかも、本を読むなりググるなりして簡単に知識を得ることができるので大丈夫。

あると便利な知識：

JavaScript
PHPなど
ネットワークの知識

これは俺も無いから勉強していけば何とかなると思う。

プロジェクトの目的：

Web標準準拠のサイトを作る練習
JavaScriptなどの練習
簡単なWebアプリケーションを作る練習

ってことで知識の定着と演習が目的かな〜と思ってる。

Webデザインの技術はお金にもなるしね。

やって損はないはず。

使う予定のソフト：

Aptana Studio
FireFox +アドオン（Firebug, Web Developerなど）
その他デザイン確認用ブラウザ（Safari, Opera, Google Chrome, IE）

では、具体的に何のサイトを作るのか。

そこがまだはっきり決めれない。

そこで、誰でもいいから提案してほしい。

作るとしたらどんなサイトを作りたいですか？

落書き

2009-04-05T19:58:00.005+09:00

今日、なんかムショーに絵を描きたいと思って一気に描いた絵。

スケッチブックにボールペンで描いた。

携帯のカメラで撮ったから画像は少し悪いかも・・・

なんかプロジェクト考えない？

2009-04-04T23:37:00.001+09:00

簡単なもんでいいからさ、何かプロジェクトやらない？

Webデザインとか。

みんな読んでるの？

2009-04-04T23:03:00.001+09:00

なんか動きなさすぎ。

Processing tutorial 4

2009-03-30T17:51:00.002+09:00

じゃあ今回は動きを作ろう。
基本形はコレだ。


void setup(){
}
void draw(){
}

setup関数は起動後一度だけ読まれる関数で、例えば画面の大きさやなんちゃらModeの設定とかグローバル変数への値代入とか、フレームレートの設定とかの初期設定をするために使う。

draw関数はメインループと呼ばれて、起動中繰り返し行われる。
デフォルトでは1秒間で60回繰り返される。
もちろん、重たい処理などがあるときはもっと遅れる。

百聞は一見にしかず。
では実際にやってみよう。


void setup(){
  size(400,400);
}
void draw(){
  ellipse(mouseX,mouseY,mouseX,mouseY);
}

これでこのようにできる。

mouseXとはマウスのx座標。mouseYとはマウスのy座標。
この例はマウスの座標に、マウスの座標によって大きさが変わる楕円を描くというものである。
では次に変数を使ってみよう。

ちょっと脱線するが、変数にはお馴染みの型がある。

int
float
double
char

その他にも

boolean
color
byte

がある。どういう型なのか、というのは名前から推測できると思う。
booleanはtrueかfalseか。真偽を保存する変数だ。
colorは色情報を保存する変数。
byteは1バイト単位の情報を保存する変数。

脱線終わり。
変数にはグローバル変数とローカル変数というのがある。
関数内で宣言されるものがローカル変数、関数外で宣言されるのがグローバル変数だ。
アニメーションするにはグローバル変数というものを多用する。
ローカル変数は関数が読まれるたびに初期化されてしまうからだ。

では、時間の経過とともに左右に動く短形を作ろう。
しかも、これは残像を残す。


float x=0;
float speed=2;
float d=1;
void setup(){
  size(400,400);
  colorMode(HSB,100);
  background(99);
}
void draw(){
  noStroke();
  fill(99,30);
  rect(0,0,width,height);
  x += speed*d;
  if(x>width) d= -1;
  if(x<0) d= 1;
  fill(0);
  rect(x,height/2,20,20);
}

これでどうだろう。
rectが二つある。
最初のrectは前のフレームを半透明な白い全体を覆い隠すための短形で、次のrectは動いているように見える黒い短形だ。
最初の短形のおかげでアニメのように見える。これがなかったら前のフレームの内容は一つ目の例のようにそのまま残る。
また、この短形が半透明なので残像があるように見える。

Processing tutorial 3

2009-03-30T17:08:00.000+09:00

Processingチュートリアル第３回。
今回も前回に引き続き基本的な関数や命令を説明する。
ちなみに、動くものを作るのはもう少し先だ。

まずはいつものようにProcessingを起動しよう。

まずは、（前回紹介するべきだったかもしれないけど、）四角形を描く関数を説明する。
この関数はこれから動きを付けるときにとてもよく使うことになるから絶対に忘れてはいけない。
それではこういう風に打ってみよう。

size(400,400);
rect(100,20,150,300);

四角形が出てきたと思う。rect関数の文法は

rect(左上のx座標, 左上のy座標, 横の長さ, 縦の長さ);

だ。
もう一つ、rectMode();という命令を。
rectMode();の括弧の中身を変えることでrectの使い方が変わる。
３種類ある。具体例とともに見てみよう。

size(400,400);
rectMode(CORNER);
rect(100,20,150,300);

size(400,400);
rectMode(CENTER);
rect(100,20,150,300);

size(400,400);
rectMode(CORNERS);
rect(100,20,150,300);

CORNER・・・デフォルトの値。rectの文法は

rect(左上のx座標, 左上のy座標, 横の長さ, 縦の長さ);

CENTER・・・一番直感的かな。rectの文法は

rect(中心のx座標, 中心のy座標, 横の長さ, 縦の長さ);

CORNERS・・・rectの文法は

rect(左上のx座標, 左上のy座標, 右下のx座標, 右下のy座標);

これでrectの説明は終わり。

ellipse();にも同様にellipseMode();というのがある。それは自分で調べてほしい。

では、色の説明をしよう。
Processingで色を数値で表現する方法には、グレースケール, RGB, HSB, アルファチャンネルの４つがある。
RGB, HSBというものの説明をしよう。
RGBというのはお馴染みのRed, Green, Blueの光の三原色で色を指定する方法だ。
HSBにはあまり馴染みが無いかもしれないが、Hue（色相）, Saturation（彩度）, Brightness（輝度）の３つの成分で指定する方法だ。
色にもModeがある。colorMode();という命令を使う。

colorMode(RGB);

・・・以降のカラーモードをRGB指定にする。デフォルトではこれだ。

colorMode(HSB);

・・・以降のカラーモードをHSB指定にする。

colorMode( カラーモード(RGB/HSB), 色指定の範囲 );

colorMode( カラーモード(RGB/HSB), RまたはHの範囲, GまたはSの範囲, Bの範囲 );

・・・カラーモードと指定する色の範囲を指定する。

色範囲というのは上限値のことだ。
たとえば、

colorMode(HSB,100);

とするとカラーモードはHSB, 0から99の間で指定するということになる。

また、上記以外にも、16進数で表されたカラーコードで色を指定する方法もある。

で、実際色を使うのは主に

background();

fill();

stroke();

の３つだ。
background();は背景色を指定するためのもの。
fill();は図形を塗りつぶすためのもの。
stroke();は直線や輪郭などの線を塗るためのもの。
ちなみに、

noFill();

とすると以降の図形の背景は透ける。

noStroke();

とすると以降の線や輪郭は引かれない。
いずれもグレースケールで指定する場合は、

size(400,400);
background(30);
fill(150);
ellipse(width/2,height/2,300,300);

のように一つの値だけを入れる。

普通の色は次のように普通にやればいい。

size(400,400);
colorMode(HSB,100);
background(10,99,99);
fill(90,99,99);
ellipse(width/2,height/2,300,300);

こういう風に。
では、透明な色はどうするのか。
方法は簡単。色指定をしたあとに数値を付け足すだけだ。

size(400,400);
colorMode(HSB,100);
smooth();
background(10);
stroke(50,99,99,30);
strokeWeight(9);
fill(0,99,99);
ellipse(150,200,200,200);
fill(60,99,99,20);
ellipse(250,200,200,200);

重なり合った部分が透けているのが分かると思う。
注）背景色(background)には透明度は設定できない。

ちなみに

strokeWeight(数値);

で線の太さを指定する。

smooth();

を入れると以降滑らかになる。
逆に、以降滑らかにしないときは

noSmooth();

とする。

Processing tutorial 2

2009-03-30T12:20:00.000+09:00

Processingチュートリアル第２回。
今回は基本的な関数や命令の説明だ。

まずはProcessingを起動しよう。
そして、次のように打ってほしい。

println("Hello World!");

そして、[Run]ボタンを押そう。
おめでとう、これがProcessingでのHello Worldプログラムだ。

println(ほにゃらら);

でコンソールにほにゃららが表示される。
もちろん文字列にするときは""（ダブルクォーテーション）で囲む必要がある。
同様に

print(ほにゃらら);

というのもある。
printlnと何が違うのかというと、自動改行の有無だ。
つまり、

println("Hello World!");
println("Goodbye World!");

と打つとコンソールには以下のように表示される。

これと同じものをprintで表示するとこういう風になる。改行されていないのが分かるだろうか？

これでprint();とprintln();の違いは分かったと思う。

それでは、いよいよグラフィックを扱おう。
とりあえず以下のように打ってほしい。

size(400,400);
line(20,30,250,350);

これで、直線が引けたと思う。

line(x1座標, y1座標, x2座標, y2座標);

で座標(x1,y1)から(x2,y2)に直線が引ける。

size(横幅,縦幅);

で画面の大きさを決める。

じゃあ次は楕円だ。
さっきのline();の下に次の関数を書き込んでみてほしい。

ellipse(160,170,200,300);

これでもう一回[Run]をクリック。
楕円が出てきたと思う。

ellipse();という関数は楕円を描く為のものだ。

ellipse(中心x座標, 中心y座標, 横の直径, 縦の直径);

後ろの二つの値を同じにすると真円を描くことが出来る。
例えばさっきのところを以下のようにしてみよう。

ellipse(160,170,200,200);

どうだろう？ちゃんと円が描かれているはずだ。

基本的な図形を書く命令は他にもある。
三角形、四角形、多角形、カーブ、などなど。
そういうものを含め他の関数についてはここにリファレンスがあるので、一度いってみて自分でどんどん試してみてほしい。

Processing tutorial 1

2009-03-30T11:47:00.001+09:00

注）こないだ載せたこの動画も見てね。

Processingはメディアアートに最適な環境の一つ。
手軽に簡単に使えるけども強力なものも作れるということでプロのアーティストなどのプロトタイプ作成や、芸術系や工業系の大学などの教育機関でプログラミングの入門の授業などでも使われている。

お手軽なことから、Processingで作ったソースのことをsketch（スケッチ）と呼ぶ。
もっと詳しいことはネットや本で確認してくれたらいいと思う。

では、今回はProcessingの超基本的な使い方を説明しようと思う。
具体的に言うと、Processingという環境を説明する。
その前に、Processingをダウンロード・インストールしよう。

準備ができたら始めよう。

まずはProcessingを起動してほしい。
Processingはこんなアイコンだ。

Processingを起動すると、こんな画面が出てくると思う。
これがProcessingのIDEだ。

メインメニューにはFile, Edit, Sketch, Tools, Helpという項目がある。

いちいち説明しなくても大丈夫だと思う。

メインメニューの下には色々なボタンが並んでいると思う。

これらの機能は見ての通り。

Exportというボタンは何かというと、完成したものをJavaアプレットとして出力しWebで見れるようにするためのボタンだ。

そしてボタン群の下にはタブがある。
大きな作品を作るときはclassごとにタブを作ってソースを整理したり、という使い方をする。

タブを操作するにはタブの横の[→]ボタンを押すとメニューが出てくるから、これで操作する。

その下には白い大きなソースエディット画面がある。ここにソースを書き込んでいくのだ。

ソースをハイライトするとこういう風になる。

今何行目にカーソルがあるのかということは一番左下に書かれている。

この画像では15行目にカーソルがあるということが分かる。

そして、ソースエディット画面の下にはメッセージ行がある。
普段は淡い水色をしているが、何かエラーがあったりすると茶色くなり、メッセージを伝える。具体的な文法間違いなどを指摘してくれる。
そしてその下の黒いところはコンソール画面だ。
ここにもエラーがあると色々と赤い文字で出てくる。こっちは難しいことを言ってくる。

この場合何が間違っているか分かるだろうか？
print(50,50);
という使い方自体間違っているのだが、
print(50,50)
と最後のセミコロンが抜けている。これには注意しなくちゃいけない。

Web標準

2009-03-26T10:59:00.000+09:00

この本面白いで！

このブログはBloggerというサービスを利用していて、これには何個かデザインテンプレートがあるのだけども自分でHTML（正確にはXHTMLとCSS）の編集をすることができるようになっている。
つまり、デザインは自分が好きなようにいじれる。

そういう風にいじっているうちに「XHTML + CSS」、いわゆる「Web標準」と呼ばれる現在主流のWebデザイン法を知って、そういうことに少し興味を持っていた。

そして、今、この本を読んでいる。
本屋でたまたま見つけて、面白そうだったので買った。

今まで時代遅れな方法（見かけをHTMLのマークアップと少しのCSSだけで実現する）しか知らなかったけど、今のWebデザインの主流となっている合理的な方法とそれの本質的な利用方法、色々なテクニックなどが載っていてとても面白い。

しかも、めっちゃ綺麗な本だ。ちょっと高いけど。

Reo君、またこのブログのデザイン変えるとは思うけど、その時の為にこーいう本で勉強しといてね！
*学校で教わったの/みんなが作ったのは完全に時代遅れやで。。。

ちなみにWeb標準と呼ばれているのは何かと言うと、XHTMLと呼ばれるHTMLの見かけを指定するタグを全部削ぎ落とした新しいものでコンテンツを書き、見かけとかそーいうデザインは全部CSSで行う、という方法。

つまり、XHTMLで文書構造をしっかり作っておいて、それをCSSで自在に配置する、という風に、「文書構造」と「デザイン」を分けることでよりスマートなWebページを作成するということ。

Let's start to learn Processing

2009-03-24T13:31:00.001+09:00

Hello World! on Processing from TaKUMA YOSHiTANi on Vimeo.

英語がミスってたらゴメン

英語はある程度できないといけない。

2009-03-23T17:42:00.008+09:00

これは最近あまり勉強していない自分への警告でもあるのだけど、やっぱり英語は必要だ。

「日本人なのに英語を勉強するなんて意味不明」とか言っている人は完全なる馬鹿です。

馬鹿丸出しです。愚かです。自重しろ。

っていうことなので考えを改めよう。

まず、自分自身のことや自分が創ったものをアピール/説明するためには英語が必要だ。

英語じゃないと誰も読まない/聞かない。

日本語でアピールしたものを誰かが英語に翻訳してくれるほど注目されているなら別だけど。

同様に、誰かが面白いことをしたとき、その人は英語で説明/アピールするだろう。

それを理解するにはやはり英語スキルが必要だ。

ましてや理系のことは全て英語が中心で回っている。

英語ができない奴は間違いなく乗り遅れる。

最新の情報は全て英語だからだ。

メディアアートをやるにも英語が必要だ。

日本語の情報なんてほんの少ししかない。

あったとしても入門程度。

進んだことを知るにはやはり英語が必要。

コミュニティで色々議論するにしても英語。

だから英語をもっと気合いを入れて勉強するべきだ。

乱文＆毒吐き失礼。

Art + Tech → Media ART

2009-03-23T16:44:00.007+09:00

メディアアートは現代になって出てきた新しいアート。

アートとは芸術、すなわち「何かを表現すること」だ。

アートとデザインの違いはここだ。

メディアアートではその「何か」を表現するためのツールとしてコンピュータなどの新技術を使う。

Wikipediaのメディアアートの定義を引用すると

ニューメディアアート、メディアアート(New media art, media art)は、20世紀中盤より広く知られるようになった、芸術表現に新しい技術的発明を利用する、もしくは新たな技術的発明によって生み出される芸術の総称的な用語である。特に、ビデオやコンピュータ技術をはじめとする新技術に触発され生まれた美術であり、またこういった新技術の使用を積極的に志向する美術である。

ということだ。

引用を読むと分かるように、単に「メディアアート」と言っても凄く広い意味がある。

例えば１年生の時のCGもメディアアートの一部分と言える。

こういうインタラクティブ^※アートと呼ばれるものもメディアアートだ。

※interactive（インタラクティブ）とは「対話式の」「双方向の」「会話型の」という意味

made with openFrameworks from openFrameworks on Vimeo.

これはopenFrameworks（Processing派生プロジェクトの一つ）というメディアアート用のC++のフレームワークの紹介ムービー。

openFrameworksでどんなことができるかを紹介している。

次の動画でも面白いことをしている。

"Design and The Elastic Mind" Exhibition at the MoMA (2 of 2) from Victor Aguilar on Vimeo.

次の動画はFlight404というProcessingの達人による作品だ。

Solar, with lyrics. from flight404 on Vimeo.

どーいうことをやっていきたいのか分かってもらえたかな〜？

では、色々と挑戦していこ

Google vs. Gravity

2009-03-19T22:03:00.011+09:00

「ググる」でお馴染みGoogleが地球の重力に侵されてる・・・

Googleが重力に侵される経過は「続きを読む」から

実はこれ、Chrome Experimentsというものの作品のうちの一つ。CBCNETによると、

JavaScriptを使用した実験的な作品をショーケースにしているGoogleによるプロジェクト。懐かしい感じもあり楽しい作品がたくさん。Hi-ResやREASなどが参加、応募も受け付けています。Chromeでなくともモダンブラウザであれば動作するようです。

だそうです。

この他にも面白いのがいっぱいあった！

Chromeって言うのはGoogle Chromeのこと。いわゆるブラウザ。

Chrome ExperimentsへGO!!!

大きな変化

2009-03-19T13:57:00.003+09:00

このブログのデザインのこと。もうほぼ完成形に近いと思う。しばらくはこれで行くつもり。

だいぶ変わったと思いませんか？

ちょっと、忘れてない !?

2009-03-19T11:23:00.004+09:00

にもグループ作ってるから、みんなそれぞれのアカウント作ってくれ〜

特にvimeoとFlickrは絶対お願いします！

注）
vimeoは動画共有サイト、
Flickrは主に写真（動画もいけるけど）共有サイト、
facebookは超有名なSNS、
linoはオンライン付箋サイトです。

2009-03-19T10:16:00.000+09:00

こんばんゎ

前途多難難攻不落紆余曲折な壁を越えて辿り着きました。

まぁよろしく尾根外します!!

Processingを勉強しよう。

2009-03-18T21:00:00.004+09:00

唯一の日本語でのProcessing解説本。

美しい本で、プログラミングの本には思えない。デザイナー、アーティストなどプログラミングが専門外の人にプログラミングの入門としてProcessingを使っている、という本なのでレベル的には簡単なので、すぐに読み切れると思う。

Processingの使い方解説だけでなく、コミュニュティの使い方、その後どうすればいいのか、ということなどにも内容が及んでいるのでかなりタメになると思う。

Processingのメイン開発者の一人、Ben Fryによる『Visualizing Data』の邦訳版。

「データの視覚化に興味はあるけど、どうやればいいのかわからない」、という人に向けて書かれている。

Processingを主に使用している。邦訳版のみ「おまけ」として監修者がAction Scriptでの視覚化手法をカバーしている。

デザインに深みを。

2009-03-18T13:00:00.003+09:00

色とかもっと深めの色に変えました。

Simple & Coolを目指して。

これでどう？？？

ちなみにヘッダーのグラデーションはこっから取った。

メイン

2009-03-17T21:50:00.002+09:00

どぉも，Reoです。

TAKUMA君はProcessingとかを
使うってゆってますが，僕はメインでは
使わないようにします。

どっちかってゆうとFlashの方に
かなりの興味があるので，新学期が
始まってからK.Iさんにでもお借りして
Flashの勉強しよっかなぁって思ってます！
だからTAKUMAの考えるアートとは
少しかけ離れたりするかもしれへんけど…

まぁそれなりに使えるように
なるようにはしたいと思うけど。。

「続きを読む」の作り方。

2009-03-17T12:13:00.011+09:00

新しく「続きを読む」というのを作れるようにした。

「続きを読む」っていうのは、記事が長くなるときなどに要約だけ表示させといて、「続きを読む」をクリックすると全部読めるようにするやつ。みんな知ってるよね。
どうやればいいかは「続きを読む」から。

投稿するときに出てくる画面には二つのタブがある。「HTMLの編集」と、「作成」だ。
「続きを読む」を作成するときはまず「HTMLの編集」をみてほしい。


要約
<span class="fullpost">
残りの本文
</span>

このようにして欲しい。要するに、続きを<span>で囲むのだ。
これは投稿テンプレートとして書いておくから、利用してくれたらいい。
「続きを読む」としたくないときはこのタグを消せばいい。
それだけで「続きを読む」という風にできる。

これでどうだっっっっっ！！！！！

2009-03-17T11:27:00.005+09:00

Reoの要望によりこのブログのデザインを全面的に見直しました。

配色はあまり変化ないけど。

具体的な変更点

3カラムにした。
投稿のタイトルの色を変えてエントリの区別が付きやすくした。
「☆で評価するのがあるならリアクションいらんやん」ということで「読んだ！」を消した。
amazonの「くるくるウィジェット」が重くてウザいということで違うのに変えた。
「最近の投稿」「最近のコメント」を追加。
「続きを読む」機能を付けた。。

変更点はこんなとこかな。

あ〜疲れた。

何か３カラムにするだけでちょっと豪華な感じがするね。

まだ何か変えてほしいとこある？

また何かあったら言ってな〜

TAKUMA~

2009-03-16T21:24:00.002+09:00

フットサル同好会の方が断然見やすいなぁ～；；
もぉちょっとスッキリさせてデザイン凝ってみたら??

なんかTAKUMAらしくないってゆうか…

TEST

2009-03-16T21:10:00.001+09:00

はじめまして，Reoです。
チ○リンです　笑”

いきなり幽霊になる可能性99.9%ですが，
頑張りたいと思います。。

読んでるのかどうか示してほしい。

2009-03-16T18:00:00.007+09:00

参加メンバーのみんなにお願い。

星の評価でもコメントでもリアクションでも何でもいいから、記事を読んだのかどうか示してほしい。

話を次に続けていいのか分からなくなるし、みんなついてきてるのか分からなくなるから。

お願いしま〜す。

~~追記：「読んだ！」ボタンを追加しました。~~

追記：リアクションを削除しました。

グループを何カ所かに作った

2009-03-15T23:27:00.003+09:00

みんなそれぞれアカウント作ってな。

ちなみに、そのグループはこのブログのサイドバーの「グループ」から行くことができるようにした。

招待制やからアカウント作ったら教えて。

このエントリのコメントにでも書いてくれたらおk。

何個もアカウント作ってもらってすいません。

一段落付いた。

2009-03-15T13:25:00.002+09:00

このブログのデザインとか機能とかグループへのリンクとか。
とにかく必要なコンテンツは全部揃った。

あ〜疲れた

このブログの基本的な使い方 (3)

2009-03-14T23:01:00.008+09:00

今回はこれから利用していこうと思うサービスを紹介する。

とりあえず上記すべてのアカウントを作っておくことをオススメする。

YouTubeはもちろんあのお馴染み動画共有サイト。

vimeoも動画共有サイト。YouTubeほどの知名度・動画数はないけど、YouTubeよりアート寄りで、画質がいい。サイトのデザインもかっこいい。

追記:グループをvimeoに作成した。

http://www.vimeo.com/groups/anct

動画を投稿に組み込むときはこっちを使ってほしい。

例えばこんな感じ。

school of Dolphins from TaKUMA YOSHiTANi on Vimeo.

Flickrも超有名な写真共有サイトだから説明はいらないと思う。

基本的に静止画の作品はここにストックすることにしようと思う。

追記:グループを作成した。

http://www.flickr.com/groups/1018747@N24/

Dropboxはオンラインストレージサービス。たとえばBlenderのソースファイルをこのブログからダウンロードさせたいなら、これにファイルをアップしてURLを取得してリンクさせるといい。

linoはオンライン付箋サイト。アイデアとかをいっぱい書き出す（ブレーンストーミング）ときとかに使おうと思う。

追記:グループを作成した。

http://linoit.com/groups/ANCT%20Media%20Art%20Group

facebookは超有名なSNS。ここにもグループを作った。

このブログの基本的な使い方 (2)

2009-03-14T22:24:00.006+09:00

『このブログの基本的な使い方 (1)』ではソースコードの色付けの方法を紹介した。

今回はこのブログの機能について説明する。

こっちを(1)にすべきだったかもしれないけど、まあいいや。

このブログの各機能はそれぞれアフォーダンスを持っているけど、分からない人がいるといけないので簡単な説明と、こういう風に使っていこうという方向性を示そうと思う。

エントリ投稿の使い方

どんなとき投稿すればいいのか

新しい作品や試作品を作ったとき
分からないことがあって、みんなに教えてほしい/考えてほしいとき
何かアイデアが思いついて、みんなに知らせたいとき
その他いいたいことがあるとき

作品のソースコードはそのまま書いてもいいし、ファイルへのリンクを載せるだけでもいい。

どのオンラインストレージサービスを利用するかは『このブログの基本的な使い方 (3)』で紹介する予定だ。

ラベルについて

投稿を作成する際に「この投稿のラベル」という欄でラベルを追加することができる。

これは記事に関係の深いことを単語とか一言で表したもので、関連のある項目ごとに記事を整理することができる。

「,」（コンマ）で区切ることで複数のラベルを設定できる。

ただ、むやみにラベルを増やさないでほしい。煩雑になるから。

「この投稿のラベル」の横に「すべて表示」というリンクボタンがある。これをクリックすると今まで作成してきたラベルがすべて表示される。基本的に似た内容のラベルは作らないように先にここを確認してから、どうしても必要なときだけラベルを追加しても構わない。

コメント欄の使い方

これは普通にそのエントリへの感想でもいいし、意見、提案など議論の場となったらいいと思う。

有用な情報へのリンク、分からないこと、質問など色々書いていけばいい。

記事への評価

このブログに導入した機能の一つに『outbrain』がある。これは直感的な方法で「５段階」評価ができる。

このブログの基本的な使い方 (1)

2009-03-14T21:48:00.007+09:00

ソースコードを載せる時は

このサイトに行って（Bookmarkしておくといいと思う）、フォームにコードをコピペして「変換」ボタンを押すだけ。

クリボウのBlogger Tips : コードをハイライトする「Code Prettify」ウィジェット

すると下のテキストボックスにHTML用に変換されたものが出てくるのでそれを投稿のとき[HTMLの編集]タブから好きなところにコピペすればコードに色とかがついて出てくる。

テストも兼ねて試しにやってみる。

まず

PFont font;

color bgc = color(0);

boolean announce = true;

int tLength =50;
int eLength =260;

float Cx=mouseX;
float Cy=mouseY;

float[] tX = new float[tLength];
float[] tY = new float[tLength];
float[] tSpx = new float[tLength];
float[] tSpy = new float[tLength];
float[] tAcx = new float[tLength];
float[] tAcy = new float[tLength];
float[] tScale = new float[tLength];
float[] textsize = new float[tLength];

float[] eX = new float[eLength];
float[] eY = new float[eLength];
float[] eSpx = new float[eLength];
float[] eSpy = new float[eLength];
float[] eAcx = new float[eLength];
float[] eAcy = new float[eLength];
float[] eScale = new float[eLength];
float[] Radius = new float[eLength];

float r = 100;

void setup() {
size(900,600);
colorMode(HSB,100);
background(0);
smooth();
frameRate(20);

font = loadFont("SansSerif-48.vlw");
textFont(font);
textAlign(CENTER);

//arrays
for(int i=0; i targetX) tAcx[i] = -tAcx[i];
tAcy[i] = eScale[i] * sq(distX);
if(tY[i] > targetY) tAcy[i] = -tAcy[i];

tSpx[i] += tAcx[i]/10;
tSpy[i] += tAcy[i]/10;
tX[i] = tX[i] + tSpx[i];
tY[i] = tY[i] + tSpy[i];
}

//****************************************************************************
//ellipse attraction
//****************************************************************************
void ellipseAttraction(int i,float targetX,float targetY) {
float distX = eX[i] - targetX;
float distY = eY[i] - targetY;
eAcx[i] = eScale[i] * sq(distX);
if(eX[i] > targetX) eAcx[i] = -eAcx[i];
eAcy[i] = eScale[i] * sq(distX);
if(eY[i] > targetY) eAcy[i] = -eAcy[i];

eSpx[i] += eAcx[i]/10;
eSpy[i] += eAcy[i]/10;
eX[i] = eX[i] + eSpx[i];
eY[i] = eY[i] + eSpy[i];
}

//****************************************************************************
//fadeToBgc
//****************************************************************************
void fadeToBgc() {
rectMode(CORNER);
noStroke();
fill(bgc,50);
rect(0,0,width,height);
}

//****************************************************************************
//acctions
//****************************************************************************
int c = 40;

void mousePressed() {
c = int(random(79));
for(int i=0; i< xs1="width;" xs2="width;" xs3="width;" xs4="width;"> width) xs5 += sp5;
else xs5=width;
}

というコードがざっとあるとする。

これはProcessingのプログラムだから一回試してみて。

汚いコードだけど。だいぶ前に作ったやつだから許してね

これを例のサイトに行って変換してくる。

PFont font;

color bgc = color(0);

boolean announce = true;

int tLength =50;
int eLength =260;

float Cx=mouseX;
float Cy=mouseY;

float[] tX = new float[tLength];
float[] tY = new float[tLength];
float[] tSpx = new float[tLength];
float[] tSpy = new float[tLength];
float[] tAcx = new float[tLength];
float[] tAcy = new float[tLength];
float[] tScale = new float[tLength];
float[] textsize = new float[tLength];

float[] eX = new float[eLength];
float[] eY = new float[eLength];
float[] eSpx = new float[eLength];
float[] eSpy = new float[eLength];
float[] eAcx = new float[eLength];
float[] eAcy = new float[eLength];
float[] eScale = new float[eLength];
float[] Radius = new float[eLength];

float r = 100;

void setup() {
size(900,600);
colorMode(HSB,100);
background(0);
smooth();
frameRate(20);

font = loadFont("SansSerif-48.vlw");
textFont(font);
textAlign(CENTER);

//arrays
for(int i=0; i<tLength; i++) {
textsize[i] = int(random(10,30));
tScale[i] = random(0.0004,0.0005);
tAcx[i] = tAcy[i] = 0;
tSpx[i] = random(-1,1);
tSpy[i] = random(-1,1);

tX[i] = width/2 + r*cos(radians(random(i*6)));
tY[i] = height/2+ r*sin(radians(random(i*6)));
}

for(int j=0; j<eLength; j++) {
Radius[j] = random(20,40);
eScale[j] = random(0.0004,0.0005);
eAcx[j] = eAcy[j] = 0;
eSpx[j] = random(-1,1);
eSpy[j] = random(-1,1);

eX[j] = random(width/2 + r*cos(radians(360) ) );
eY[j] = random(height/2+ r*sin(radians(360) ) );
}
}

//****************************************************************************
//draw
//****************************************************************************

void draw() {
fadeToBgc();

for(int i=0; i<eLength; i++) {
ellipseAttraction(i,mouseX,mouseY);
fill(random(c,c+20),99,99,40);
ellipse(eX[i],eY[i],Radius[i],Radius[i]);
}

for(int j=0; j<tLength; j++) {
textAttraction(j,mouseX,mouseY);
textSize(textsize[j]);
fill(99,60);
text("E0838",tX[j],tY[j]);
}

if(announce){
announce();
if(fade<fadeMax) fade = fade*1.1 + 0.2;
}else {
xs1 = -100;
xs2 = -100;
xs3 = -100;
xs4 = -100;
xs5 = width + 1000;
}
}

//****************************************************************************
//text attraction
//****************************************************************************
void textAttraction(int i,float targetX,float targetY) {
float distX = tX[i] - targetX;
float distY = tY[i] - targetY;
tAcx[i] = tScale[i] * sq(distX);
if(tX[i] > targetX) tAcx[i] = -tAcx[i];
tAcy[i] = eScale[i] * sq(distX);
if(tY[i] > targetY) tAcy[i] = -tAcy[i];

tSpx[i] += tAcx[i]/10;
tSpy[i] += tAcy[i]/10;
tX[i] = tX[i] + tSpx[i];
tY[i] = tY[i] + tSpy[i];
}

//****************************************************************************
//ellipse attraction
//****************************************************************************
void ellipseAttraction(int i,float targetX,float targetY) {
float distX = eX[i] - targetX;
float distY = eY[i] - targetY;
eAcx[i] = eScale[i] * sq(distX);
if(eX[i] > targetX) eAcx[i] = -eAcx[i];
eAcy[i] = eScale[i] * sq(distX);
if(eY[i] > targetY) eAcy[i] = -eAcy[i];

eSpx[i] += eAcx[i]/10;
eSpy[i] += eAcy[i]/10;
eX[i] = eX[i] + eSpx[i];
eY[i] = eY[i] + eSpy[i];
}

//****************************************************************************
//fadeToBgc
//****************************************************************************
void fadeToBgc() {
rectMode(CORNER);
noStroke();
fill(bgc,50);
rect(0,0,width,height);
}

//****************************************************************************
//acctions
//****************************************************************************
int c = 40;

void mousePressed() {
c = int(random(79));
for(int i=0; i<tLength; i++) {
tX[i] = mouseX;
tY[i] = mouseY;
}
for(int j=0; j<eLength; j++) {
eX[j] = mouseX;
eY[j] = mouseY;
}
}

void keyPressed() {
switch(key){
case 's':
announce = true;
break;
case 'h':
announce = false;
break;

case'0':
obicolor = 0;
break;
case'1':
obicolor = 10;
break;
case'2':
obicolor = 20;
break;
case'3':
obicolor = 30;
break;
case'4':
obicolor = 40;
break;
case'5':
obicolor = 50;
break;
case'6':
obicolor = 60;
break;
case'7':
obicolor = 70;
break;
case'8':
obicolor = 80;
break;
case'9':
obicolor = 90;
break;
}
}

//****************************************************************************
//announce
//****************************************************************************

float fade=0;
float fadeMax = 40;
float obihaba = 200;

float xs1 = -100;
float xs2 = -100;
float xs3 = -100;
float xs4 = -100;

float xs5 = width+2000;

float sp1 = random(3,7);
float sp2 = random(3,7);
float sp3 = random(3,7);
float sp4 = random(3,7);

float sp5 = random(-7,-3);

int obicolor = 0;

float yPos;
float yDiff;

float speed = 0.1;

void speed(){
yDiff = (yPos - mouseY)*speed;

yPos -= yDiff;
}

void announce() {
speed();

rectMode(CORNER);
noStroke();
fill(obicolor,99,99,fade);
rect(0,yPos - obihaba/2,width,obihaba);
float obi2 = obihaba + 23;
fill(obicolor,99,79,fade/2);
rect(0,yPos - obi2/2,width,obi2);


//making UI

String s1 = "Type 'h' to hide this announce.";
String s2 = "Type 's' to see this announce again.";
String s3 = "Type '0~9' to change color of announce band.";
String s4 = "0 is Red, 4 is Green, 6 is Blue, 8 is Purple,9 is Pink.";

String s5 = "Welcome to TaKUMA YOSHiTANi's homepage.";

textAlign(RIGHT);
textSize(40);
fill(obicolor,99,99,fade+10);
text("Announce",width,yPos - 99);

moveStrings();

textSize(12);
fill(99,89);
text(s1,xs1,yPos - 80);
text(s2,xs2,yPos - 50);
text(s3,xs3,yPos - 20);
text(s4,xs4,yPos + 10);

textSize(30);
text(s5,xs5,yPos + 70);
}

void moveStrings() {
if(xs1 < width) xs1 += sp1;
else xs1=width;

if(xs2 < width) xs2 += sp2;
else xs2=width;

if(xs3 < width) xs3 += sp3;
else xs3=width;

if(xs4 < width) xs4 += sp4;
else xs4=width;


if(xs5 > width) xs5 += sp5;
else xs5=width;
}

どうだろう？色が付いているのが分かると思う。

基本的な使い方 (1) ではソースコードの色付けを紹介しました

使うソフトウェアについて（CG関係）

2009-03-14T10:47:00.002+09:00

次はCG用のソフトについて。

この３つは知っている方がいいと思う。

全部フリー。

個人的にGIMPとInkscapeはめちゃくちゃ使いにくいんだけど、まあ機能は豊富らしいので。

Blenderはフリーの3DCGソフトで、元々オランダのアニメーションスタジオで使われていたんだけどそのスタジオが倒産してソフトだけ有志が集まって公開しているもの。いわゆるオープンソースソフトウェア。フリーとは思えないほどめちゃくちゃ高機能で、アニメーションスタジオで使われてたくらいだからアニメを作る機能が特に凄い。

知っていて損は無いソフト。

これも場合によっちゃ使っていくかも。

使うソフトウェアについて（Programming関係）

2009-03-14T10:27:00.003+09:00

とりあえず

全部使える/覚える必要はないけど、こういうソフト・環境を使っていこうと思ってま〜す。

全部フリー。

とりあえずProcessingは絶対にある程度使えるようになった方がいいと思う。

プログラミングの専門家じゃないアーティスト・デザイナー達にも簡単に使えるように作られて、しかも強力な環境なので基本これを使っていこうと思って。

簡単な説明をすると、

Wiring, ArduinoはProcessingの派生プロジェクトで、フィジカルコンピューティングというものをするための環境。フィジカルコンピューティングっていうのは、マイクロコンピュータを使って現実世界とコンピュータの世界をつなげる、みたいなイメージ。

だから、インタラクティブアートするときとかに必要になってくると思う。

言語的にはProcessingと同じものだから、Processingを使えるようになったらこれらもプログラミングはできるようになると思う。

openFrameworksっていうのはC++でProcessingと同じようなことをするためのライブラリ。ProcessingはJavaを簡単にしたものなんだけど、openFrameworksはC++だからProcessingより速かったりする。

Context Free Artはこの中で一番簡単な言語(?)で、フラクタルな作品を作ることができる。

Quartz ComposerはMacのDeveloper Toolsに含まれているアプリケーションで、リアルタイムなものを作ったりできる。

vvvvっていうのはWindows用のもので、Quartz Composerとかに似てる。使ったことないけど。

Pure Data, Chuckは音楽用のプログラミング環境。

Pure Data, vvvv, Quartz Composerはビジュアルプログラミング言語と言ってパッチをノードでつないでいくプログラミング環境だから、普通のプログラミングと少しイメージが違う。

親しみやすいかなーと。

ッテステス

2009-03-13T17:05:00.001+09:00

テェスト!!!!!!

テスト投稿

2009-03-13T16:18:00.001+09:00

～テスト投稿～

テスト投稿

2009-03-12T23:13:00.001+09:00

またまたテスト投稿

テスト投稿

2009-03-12T22:49:00.002+09:00

テスト～～～～～～～～～。

テスト投稿

2009-03-12T22:49:00.000+09:00

メディアアート同好会での初投稿