2009年5月29日金曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

HTML5とJS

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

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

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

続きを読む...

2009年5月17日日曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

明石高専は休校らしいね

中間試験どーなるんでしょーかっ?
夏休みどーなるんでしょーかっ?
それ考えたら嬉しいようなあんま嬉しくないような・・・複雑やな〜〜〜

続きを読む...

2009年5月5日火曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

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

Reo君へ
Webデザインの件どうするん?

続きを読む...

2009年5月3日日曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Lingr終了

Lingrのサービスがもうすぐで終わっちゃうそうなので、削除して代わりにFC2のチャットを導入。
右側のサイドバーに注目。
新しい発言ほど上にくることに注意。
ちなみにこれはEgnimmargorp!と共通です。。。

続きを読む...

2009年5月2日土曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Egnimmargorp!開設


アートで学校の人を巻き込むのは不可能だって分かったんで、新しくEginmmargorp!っての開設しました。
意味は.............Eginmmargorp!を逆から読んでみて
プログラミング全般、数学、英語、まあなんでもおkな知的ブログになればいいなぁと。
コンセプトは「知的ダベり場」。
数学の宿題とかプログラミングの演習とかの身近なことから、自分で数学勉強したりプログラミング勉強したり何か作ったり、まあ何でもいいからそーいう感じ。

セールスポイント
  • 数式をLaTeXで書ける
  • 主要な言語のソースコードを色分けできる。行番号も付く。
何するか
  • プログラミング全般
  • 数学
  • 英語
  • 自然科学
  • 社会科学
  • 芸術(美術・音楽)
  • デザイン
  • etc..........
最近勉強しないといけないな〜って思ってるんで作ってみた。

続きを読む...

2009年5月1日金曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

そして誰もいなくなった

わざわざグループ作った意味ないwww
何人かでなんかやろうと思っててんけどな〜
温度差ヤバい(爆

続きを読む...

2009年4月29日水曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

どうすべきか

さて、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使うなら当然)
ワークフロー
  1. デザインのイメージを決める
  2. デザインカンプを作る
  3. XHTMLコーディングをする
  4. Photoshop, Illustrator, Flashなどで材料を作っておく
  5. CSSでデザインする(適宜4.に戻る)
  6. JSで動きを作る
  7. 調整
作ったはいいけど、どこにアップするんだって話なんでレンタルサーバーのことも考えておいた方がいいかな。以下参考に。
  • チカッパ!(月額525円 容量3GB データ転送量2GB/日 高機能)
  • heteml(月額1500円 容量5GB データ転送量10GB/日 高機能)
*ちなみにhetemlはチカッパ!の上位サービス

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

続きを読む...

2009年4月25日土曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

GIMPでロゴ



GIMPでロゴ作ってみた。
なかなか。

続きを読む...

2009年4月23日木曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Houdini


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

2009年4月19日日曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

話し方

なんかコメント欄で話すのだるくなったから、手軽に話せるチャット機能を導入しちゃいました。
こんなの。
下のほーにスクロールしていけば見つかります。
これからは基本こっちで話そう

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

ホムペ作り

何を作るか大体まとまったみたい。
「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のソフトは高価だからそんなに簡単に管理下におけない。でも、学校のパソコンに入っているのでそれを使うという手がある。
だから本気でやろうと思ったらちゃんと作るだけの環境は揃っているのであとは自分たちの知識レベルを上げて制作にかからなくてはならない。

続きを読む...

2009年4月14日火曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Computer Graphics








CG-ARTS検定って知ってる?
これらの本はそのうち
  • CGクリエイター検定
  • CGエンジニア検定
  • ディジタル画像処理検定
の2級の参考書。
ただの試験の参考書というものではなく、CGの基礎をしっかり勉強するための教科書としてもすごく良い本だと思う。
学校のCGでは何にも教えてくれなかったけど、この本を読んだら知りたいことがいっぱい書いてあった。

続きを読む...

2009年4月12日日曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

プロジェクト案(1)

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

絶対に必要な知識:
  • (X)HTMLの基本的な知識
  • CSSの基本的な知識
  • Webデザインのワークフローについての基本的な知識
  • デザインや色、レイアウトについての基礎的な知識
これらはプログラミング的・数学的な難しさもないから取っ付きやすいはず。
しかも、本を読むなりググるなりして簡単に知識を得ることができるので大丈夫。

あると便利な知識:
  • JavaScript
  • PHPなど
  • ネットワークの知識
これは俺も無いから勉強していけば何とかなると思う。

プロジェクトの目的:
  • Web標準準拠のサイトを作る練習
  • JavaScriptなどの練習
  • 簡単なWebアプリケーションを作る練習
ってことで知識の定着と演習が目的かな〜と思ってる。
Webデザインの技術はお金にもなるしね。
やって損はないはず。

使う予定のソフト:
  • Aptana Studio
  • FireFox +アドオン(Firebug, Web Developerなど)
  • その他デザイン確認用ブラウザ(Safari, Opera, Google Chrome, IE)

では、具体的に何のサイトを作るのか。
そこがまだはっきり決めれない。
そこで、誰でもいいから提案してほしい。
作るとしたらどんなサイトを作りたいですか?

続きを読む...

2009年4月5日日曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

落書き

今日、なんかムショーに絵を描きたいと思って一気に描いた絵。
スケッチブックにボールペンで描いた。
携帯のカメラで撮ったから画像は少し悪いかも・・・






続きを読む...

2009年4月4日土曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

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

簡単なもんでいいからさ、何かプロジェクトやらない?
Webデザインとか。

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

みんな読んでるの?

なんか動きなさすぎ。
続きを読む...

2009年3月30日月曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Processing tutorial 4

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

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は動いているように見える黒い短形だ。
最初の短形のおかげでアニメのように見える。これがなかったら前のフレームの内容は一つ目の例のようにそのまま残る。
また、この短形が半透明なので残像があるように見える。

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Processing tutorial 3

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

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

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

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

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

rect(左上のx座標, 左上のy座標, 横の長さ, 縦の長さ);
だ。
もう一つ、rectMode();という命令を。
rectMode();の括弧の中身を変えることでrectの使い方が変わる。
3種類ある。具体例とともに見てみよう。

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, アルファチャンネルの4つがある。
RGB, HSBというものの説明をしよう。
RGBというのはお馴染みのRed, Green, Blueの光の三原色で色を指定する方法だ。
HSBにはあまり馴染みが無いかもしれないが、Hue(色相), Saturation(彩度), Brightness(輝度)の3つの成分で指定する方法だ。
色にも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();

の3つだ。
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();

とする。

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Processing tutorial 2

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

まずは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);
どうだろう?ちゃんと円が描かれているはずだ。

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

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Processing tutorial 1

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

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)
と最後のセミコロンが抜けている。これには注意しなくちゃいけない。

続きを読む...

2009年3月26日木曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Web標準



この本面白いで!

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

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

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

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

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

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

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

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

2009年3月24日火曜日

2009年3月23日月曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

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

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

「日本人なのに英語を勉強するなんて意味不明」とか言っている人は完全なる馬鹿です。
馬鹿丸出しです。愚かです。自重しろ。
っていうことなので考えを改めよう。

まず、自分自身のことや自分が創ったものをアピール/説明するためには英語が必要だ。
英語じゃないと誰も読まない/聞かない。
日本語でアピールしたものを誰かが英語に翻訳してくれるほど注目されているなら別だけど。

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

ましてや理系のことは全て英語が中心で回っている。
英語ができない奴は間違いなく乗り遅れる。
最新の情報は全て英語だからだ。

メディアアートをやるにも英語が必要だ。
日本語の情報なんてほんの少ししかない。
あったとしても入門程度。
進んだことを知るにはやはり英語が必要。
コミュニティで色々議論するにしても英語。

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

乱文&毒吐き失礼。

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Art + Tech → Media ART

メディアアートは現代になって出てきた新しいアート。
アートとは芸術、すなわち「何かを表現すること」だ。
アートとデザインの違いはここだ。
メディアアートではその「何か」を表現するためのツールとしてコンピュータなどの新技術を使う。

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

ということだ。
引用を読むと分かるように、単に「メディアアート」と言っても凄く広い意味がある。
例えば1年生の時のCGもメディアアートの一部分と言える。

こういうインタラクティブアートと呼ばれるものもメディアアートだ。
※interactive(インタラクティブ)とは「対話式の」「双方向の」「会話型の」という意味
これはopenFrameworks(Processing派生プロジェクトの一つ)というメディアアート用のC++のフレームワークの紹介ムービー。
openFrameworksでどんなことができるかを紹介している。

次の動画でも面白いことをしている。
次の動画はFlight404というProcessingの達人による作品だ。
どーいうことをやっていきたいのか分かってもらえたかな〜?
では、色々と挑戦していこ

続きを読む...

2009年3月19日木曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Google vs. Gravity

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

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






実はこれ、Chrome Experimentsというものの作品のうちの一つ。CBCNETによると、
JavaScriptを使用した実験的な作品をショーケースにしているGoogleによるプロジェクト。懐かしい感じもあり楽しい作品がたくさん。Hi-ResREASなどが参加、応募も受け付けています。Chromeでなくともモダンブラウザであれば動作するようです。
だそうです。
この他にも面白いのがいっぱいあった!
Chromeって言うのはGoogle Chromeのこと。いわゆるブラウザ。


続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

大きな変化

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

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

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

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


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

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

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

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
こんばんゎ

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

まぁよろしく尾根外します!!
続きを読む...

2009年3月18日水曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Processingを勉強しよう。




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

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

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



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

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

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

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

デザインに深みを。

色とかもっと深めの色に変えました。
Simple & Coolを目指して。
これでどう???
ちなみにヘッダーのグラデーションはこっから取った。

続きを読む...

2009年3月17日火曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

メイン

どぉも,Reoです。

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

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

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

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

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

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

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

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


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

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

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

これでどうだっっっっっ!!!!!

Reoの要望によりこのブログのデザインを全面的に見直しました。
配色はあまり変化ないけど。
具体的な変更点
  • 3カラムにした。
  • 投稿のタイトルの色を変えてエントリの区別が付きやすくした。
  • 「☆で評価するのがあるならリアクションいらんやん」ということで「読んだ!」を消した。
  • amazonの「くるくるウィジェット」が重くてウザいということで違うのに変えた。
  • 「最近の投稿」「最近のコメント」を追加。
  • 「続きを読む」機能を付けた。。
変更点はこんなとこかな。
あ〜疲れた。
何か3カラムにするだけでちょっと豪華な感じがするね。
まだ何か変えてほしいとこある?

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

続きを読む...

2009年3月16日月曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

TAKUMA~

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

なんかTAKUMAらしくないってゆうか…
続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

TEST

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

いきなり幽霊になる可能性99.9%ですが,
頑張りたいと思います。。
続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

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

参加メンバーのみんなにお願い。
星の評価でもコメントでもリアクションでも何でもいいから、記事を読んだのかどうか示してほしい。
話を次に続けていいのか分からなくなるし、みんなついてきてるのか分からなくなるから。

お願いしま〜す。

追記:「読んだ!」ボタンを追加しました。
追記:リアクションを削除しました。

続きを読む...

2009年3月15日日曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

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

みんなそれぞれアカウント作ってな。
ちなみに、そのグループはこのブログのサイドバーの「グループ」から行くことができるようにした。

招待制やからアカウント作ったら教えて。
このエントリのコメントにでも書いてくれたらおk。

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

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

一段落付いた。

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

あ〜疲れた
続きを読む...

2009年3月14日土曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

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

今回はこれから利用していこうと思うサービスを紹介する。
とりあえず上記すべてのアカウントを作っておくことをオススメする。

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

vimeoも動画共有サイト。YouTubeほどの知名度・動画数はないけど、YouTubeよりアート寄りで、画質がいい。サイトのデザインもかっこいい。
動画を投稿に組み込むときはこっちを使ってほしい。
例えばこんな感じ。

Flickrも超有名な写真共有サイトだから説明はいらないと思う。
基本的に静止画の作品はここにストックすることにしようと思う。

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

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

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

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

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

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

今回はこのブログの機能について説明する。
こっちを(1)にすべきだったかもしれないけど、まあいいや。
このブログの各機能はそれぞれアフォーダンスを持っているけど、分からない人がいるといけないので簡単な説明と、こういう風に使っていこうという方向性を示そうと思う。


エントリ投稿の使い方
どんなとき投稿すればいいのか
  • 新しい作品や試作品を作ったとき
  • 分からないことがあって、みんなに教えてほしい/考えてほしいとき
  • 何かアイデアが思いついて、みんなに知らせたいとき
  • その他いいたいことがあるとき
作品のソースコードはそのまま書いてもいいし、ファイルへのリンクを載せるだけでもいい。
どのオンラインストレージサービスを利用するかは『このブログの基本的な使い方 (3)』で紹介する予定だ。

ラベルについて
投稿を作成する際に「この投稿のラベル」という欄でラベルを追加することができる。
これは記事に関係の深いことを単語とか一言で表したもので、関連のある項目ごとに記事を整理することができる。

「,」(コンマ)で区切ることで複数のラベルを設定できる。
ただ、むやみにラベルを増やさないでほしい。煩雑になるから。
「この投稿のラベル」の横に「すべて表示」というリンクボタンがある。これをクリックすると今まで作成してきたラベルがすべて表示される。基本的に似た内容のラベルは作らないように先にここを確認してから、どうしても必要なときだけラベルを追加しても構わない。

コメント欄の使い方
これは普通にそのエントリへの感想でもいいし、意見、提案など議論の場となったらいいと思う。
有用な情報へのリンク、分からないこと、質問など色々書いていけばいい。

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


続きを読む...

on vimeoon Flickron Facebookon lino