processingで今回はポップのデジタルアートを作ってみました。
前回processingの記事が意外と好評だったようで、また記事を書きました。
(僕のセルフブックマークがきっかけでしたが(笑))
今回はprocessingでポップなデジタルアートを作ってみました。
音楽とかと組み合わせてみたいですね。どんな作品になるんだろう。
ソースは前と殆ど変わりません(笑)
/** * Japanese Design * by Camelmasa. * * camelmasa's technology Blog http://d.hatena.ne.jp/camelmasa/ * camelmasa's technology Blog(English):http://camelmasa.com/ */ import processing.video.*; MovieMaker mm; // Declare MovieMaker object void setup() { size(600, 450); colorMode(RGB); background(0); noStroke(); smooth(); frameRate(16); mm = new MovieMaker(this, width, height, "image.mov", 30, MovieMaker.H263, MovieMaker.HIGH); } void draw() { int box_height = 45; int box_width = 60; for(int i=0;i<10;i++){ for(int j=0;j<10;j++){ float y_line = random(5,10); for(int k=0; k<y_line; k++){ fill(random(0,255), random(0,255), random(0,255)); rect(j*box_width + k * ( box_width / (y_line - k)), i*box_height, box_width / y_line, box_height); } } } mm.addFrame(); } void mousePressed(){ save("image.jpg"); } void keyPressed() { mm.finish(); // Finish the movie if space bar is pressed! }
processing面白いですよー。
今度はgainerと連携させてみましょう!
[PR]Spreeの情報を集めています。
ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。
このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。
http://spreecommerce.jp/
processingでデジタルアートというのを作ってみました。
僕の中のインスピレーションで作った作品です。
はっきり言って暗い性格だと思われても仕方ない作品が出来上がりました。
ソースは下記になります。
/** * Japanese Design * by Camelmasa. * * camelmasa's technology Blog http://d.hatena.ne.jp/camelmasa/ * camelmasa's technology Blog(English):http://camelmasa.com/ */ void setup() { size(600, 450); colorMode(RGB); background(0); noStroke(); smooth(); frameRate(16); } void draw() { int box_height = 45; int box_width = 60; int base_color = 30; int y_color = 100; for(int i=0;i<10;i++){ for(int j=0;j<10;j++){ int e = int(random(2)); switch(e){ case 1: float y_line = random(5,10); for(int k=0; k<y_line; k++){ float r_color = random(0,y_color); fill(base_color + r_color, base_color + r_color, base_color + r_color); rect(j*box_width + k * ( box_width / (y_line - k)), i*box_height, box_width / y_line, box_height); } break; case 2: float r_color = random(0,y_color); fill(base_color + r_color, base_color + r_color, base_color + r_color); rect(j*box_width, i*box_height, box_width, box_height); break; } } } } void mousePressed(){ save("image.jpg"); }
[追記]
動画版
デジタルな感じで良くないですか?
どうなんでしょうか。
動画版のソースです。
/** * Japanese Design * by Camelmasa. * * camelmasa's technology Blog http://d.hatena.ne.jp/camelmasa/ * camelmasa's technology Blog(English):http://camelmasa.com/ */ import processing.video.*; MovieMaker mm; // Declare MovieMaker object void setup() { size(600, 450); colorMode(RGB); background(0); noStroke(); smooth(); frameRate(16); mm = new MovieMaker(this, width, height, "image.mov", 30, MovieMaker.H263, MovieMaker.HIGH); } void draw() { int box_height = 45; int box_width = 60; int base_color = 30; int y_color = 100; for(int i=0;i<10;i++){ for(int j=0;j<10;j++){ int e = int(random(2)); switch(e){ case 1: float y_line = random(5,10); for(int k=0; k<y_line; k++){ float r_color = random(0,y_color); fill(base_color + r_color, base_color + r_color, base_color + r_color); rect(j*box_width + k * ( box_width / (y_line - k)), i*box_height, box_width / y_line, box_height); } break; case 2: float r_color = random(0,y_color); fill(base_color + r_color, base_color + r_color, base_color + r_color); rect(j*box_width, i*box_height, box_width, box_height); break; } } } mm.addFrame(); } void mousePressed(){ save("image.jpg"); } void keyPressed() { mm.finish(); }
名誉挽回に少し春っぽい色を使用してみました。
センスが無いのを再確認しました。
/** * Japanese Design * by Camelmasa. * * camelmasa's technology Blog http://d.hatena.ne.jp/camelmasa/ * camelmasa's technology Blog(English):http://camelmasa.com/ */ void setup() { size(600, 450); colorMode(RGB); background(70,140,70); noStroke(); smooth(); frameRate(16); } void draw() { int box_height = 45; int box_width = 60; int r_base_color = 70; int g_base_color = 140; int b_base_color = 70; int y_color = 50; for(int i=0;i<10;i++){ for(int j=0;j<10;j++){ int e = int(random(2)); switch(e){ case 1: float y_line = random(5,10); for(int k=0; k<y_line; k++){ float r_color = random(0,y_color); fill(r_base_color + r_color, g_base_color + r_color, b_base_color + r_color); rect(j*box_width + k * ( box_width / (y_line - k)), i*box_height, box_width / y_line, box_height); } break; case 2: float r_color = random(0,y_color); fill(r_base_color + r_color, g_base_color + r_color, b_base_color + r_color); rect(j*box_width, i*box_height, box_width, box_height); break; } } } } void mousePressed(){ save("image.jpg"); }
[追記]
動画版
動画版ソース
/** * Japanese Design * by Camelmasa. * * camelmasa's technology Blog http://d.hatena.ne.jp/camelmasa/ * camelmasa's technology Blog(English):http://camelmasa.com/ */ import processing.video.*; MovieMaker mm; // Declare MovieMaker object void setup() { size(600, 450); colorMode(RGB); background(70,140,70); noStroke(); smooth(); frameRate(16); mm = new MovieMaker(this, width, height, "image.mov", 30, MovieMaker.H263, MovieMaker.HIGH); } void draw() { int box_height = 45; int box_width = 60; int r_base_color = 70; int g_base_color = 140; int b_base_color = 70; int y_color = 50; for(int i=0;i<10;i++){ for(int j=0;j<10;j++){ int e = int(random(2)); switch(e){ case 1: float y_line = random(5,10); for(int k=0; k<y_line; k++){ float r_color = random(0,y_color); fill(r_base_color + r_color, g_base_color + r_color, b_base_color + r_color); rect(j*box_width + k * ( box_width / (y_line - k)), i*box_height, box_width / y_line, box_height); } break; case 2: float r_color = random(0,y_color); fill(r_base_color + r_color, g_base_color + r_color, b_base_color + r_color); rect(j*box_width, i*box_height, box_width, box_height); break; } } } mm.addFrame(); } void mousePressed(){ save("image.jpg"); } void keyPressed() { mm.finish(); // Finish the movie if space bar is pressed! }
[追記]
これはアツーイネタ!
NyARToolkit for processing NyAR4psg/0.2.0 リリースしました。
http://d.hatena.ne.jp/nyatla/20081229
[さらに追記]
id:advblogさん,id:k_wizardさん,id:RanTairyuさん,id:hiroomiさん
ブックマークして頂いた方、idコールですみません。
全てのソースのswitch部分で絶対case 2:に飛ばないバグがあります。
経緯をお話しすると、元々はcase 2:でデジタル感を出そう!と意気込んでたのですが、もっと細分化した方が格好良いかなと思ってcase 1:を作成しました。
それで、混ぜ合わせたら格好良いかなって思ってたら滅茶苦茶かっこ悪いデザインになってしまって、簡単に修正しようと思って、int e = int(random(2));としてしまったのです。
ちなみに滅茶苦茶かっこ悪いデザインはint e = int(random(3));とすると現れます。
下記がそのデザインです。
すみませんでした。
[PR]Spreeの情報を集めています。
ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。
このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。
http://spreecommerce.jp/
gainer mini + processingでLEDアレイを加算するプログラムを作成しました。
少し前にフィジカルコンピューティングに興味を持ったので、自分への投資だ!と思ってgainer miniを買って電子回路を組んでました。
flashやprocessing,ruby,python等からもLEDを光らせたり、マトリクスLEDで文字列を表示する事等が出来るので、webアプリケーション+αの分野で注目しています。
『機械はどれだけ人間に近づけるのか』
〜第2回 チームラボアルゴリズムコンテスト〜
http://www.team-lab.com/news/index.php?itemid=469
このアルゴリズムコンテストもウェブアプリケーションだけではなく、gainer等を使用したフィジカルコンピューティングがエントリーされたら面白いなあと思いました。
下記がブログタイトルのサンプルコードです。
gainer miniに付属しているボタンを押す毎にLEDアレイの数字が+1します。
/** * Japanese Design * by Camelmasa. * * camelmasa's technology Blog http://d.hatena.ne.jp/camelmasa/ * camelmasa's technology Blog(English):http://camelmasa.com/ */ import processing.gainer.*; Gainer gainer; int[] figure = { 63, 12, 91, 94, 108, 118, 119, 28, 127, 124 }; int i=0; int s=1; void setup(){ size(200,200); background(0); gainer = new Gainer(this, Gainer.MODE6); } void draw(){ if(gainer.buttonPressed){ gainer.digitalOutput(figure[i]); s=0; } else if(s == 0) { if(i > 8){ i = 0; } else { i++; } s=1; } }
追記
ソースを少し変更して、動画で保存しました。
/** * Japanese Design * by Camelmasa. * * camelmasa's technology Blog http://d.hatena.ne.jp/camelmasa/ * camelmasa's technology Blog(English):http://camelmasa.com/ */ import processing.gainer.*; Gainer gainer; int[] figure = { 63, 12, 91, 94, 108, 118, 119, 28, 127, 124 }; int i=0; int s=0; void setup(){ gainer = new Gainer(this, Gainer.MODE6); gainer.digitalOutput(figure[i]); } void draw(){ if(gainer.buttonPressed){ gainer.digitalOutput(figure[i]); s=0; } else if(s == 0) { if(i > 8){ i = 0; } else { i++; } s=1; } }
初めてYouTubeに動画をアップロードしました!簡単ですねー。
[PR]Spreeの情報を集めています。
ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。
このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。
http://spreecommerce.jp/