Saturday, November 14, 2009

Processingで立方体が回転するアニメーションを表示する

Processingで立方体が回転するアニメーションを表示するには、以下のコードを実行します。


void setup(){
// キャンバスサイズ
size(400, 400, P3D);
}

void draw(){
// 背景色
background(#ffffee);
// 線の色
stroke(#7799dd);
// 線の太さ
strokeWeight(2);
// 塗りつぶし色
fill(#e0e0f0);
// 移動
translate(200, 200, 50);
// 回転
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.02);
// 立方体
box(120);
}


スクリーンショット
Processingでの立方体が回転するアニメーション

動作環境
Processing 1.0.7

ImageMagickで画像を青く滲んだ感じに加工する

ImageMagickで画像を青く滲んだ感じに加工するには、以下のバッチファイルを実行します。


rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.5.7-Q16

rem 画像を青く滲ませる
%im%\convert.exe sf2.jpg -modulate 100,50,100 -spread 3
-motion-blur 0,7,270 -fill #bbddff -tint 90%% sample1434a.png


元画像(sf2.jpg)


出力画像(sample1434a.png)
ImageMagickで青く滲んだ感じに加工した画像

Friday, November 13, 2009

GfxBuilderで矢印を描画する

GfxBuilderで矢印を描画するには、以下のコードを実行します。


import griffon.builder.gfx.render.*

def gr = new GfxRenderer()
gr.renderToFile("sample1414a.png", 200, 200){
antialias("on")
arrow( x: 20, y: 100, width: 100, height: 50,
angle:85, depth:0.5, rise:0.2,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
arrow( x: 100, y: 100, width: 100, height: 50,
angle:115, depth:0.2, rise:0.1,
fill: color("#bbffdd"),
borderColor: color("#108050"),
borderWidth: 2
)
}


出力画像(sample1414a.png)
GfxBuilderで描画した矢印画像

動作環境
Groovy1.6.5, JDK6 Update16

Processingで画像の上にぼやけた文字列を描画する

Processingで画像の上にぼやけた文字列を描画するには、以下のコードを実行します。


// キャンバスサイズ
size(300, 300);
colorMode(RGB,255,255,255,255);
// 背景色
background(#ffffee);
// 画像はdataディレクトリに置いておく
PImage img = loadImage("SF.JPG");
// 画像の表示
image(img, 50, 50);
// オフスクリーンバッファを作成
PGraphics gr = createGraphics(300, 300, JAVA2D);
gr.beginDraw();
// フォントを変換
PFont font = createFont("Tahoma",28,true);
// フォントを設定
gr.textFont(font);
// 文字
gr.text("San Francisco",60,200);
gr.filter(BLUR, 1.5);
gr.endDraw();
image(gr, 0, 0);
// ファイル保存
save("sample1261a.png");


元画像(sf.jpg)


出力画像(sample1261a.png)
Processingで描画したぼやけた文字列

動作環境
Processing 1.0.7

Thursday, November 12, 2009

Processingで画像をビデオ風に変換する

Processingで画像をビデオ風に変換するには、以下のコードを実行します。


// キャンバスサイズ
size(300, 300);
// 背景色
background(#ffffee);
// 塗りつぶし色
fill(#d0d0f0);
// 画像はdataディレクトリに置いておく
PImage img = loadImage("SF.JPG");
img.loadPixels();
for(int li=0;li<img.width*img.height;li++){
if( floor(li / img.width) % 2 == 0 ){
println(li);
img.pixels[li] =
color(red(img.pixels[li])/2,
green(img.pixels[li])/2,
blue(img.pixels[li])/2);
}
}
img.updatePixels();
// 画像の表示
image(img, 50, 50);
// ファイル保存
save("sample1260a.png");



元画像(sf.jpg)


出力画像(sample1260a.png)


動作環境
Processing 1.0.7

Wednesday, November 11, 2009

Processingで画像をぼかす

Processingで画像をぼかすには、以下のコードを実行します。


// キャンバスサイズ
size(300, 300);
// 背景色
background(#ffffee);
// 塗りつぶし色
fill(#d0d0f0);
// 画像はdataディレクトリに置いておく
PImage img = loadImage("SF.JPG");
// ぼかし
img.filter(BLUR, 1.5);
// 画像の表示
image(img, 50, 50);
// ファイル保存
save("sample1259a.png");


元画像(sf.jpg)


出力画像(sample1259a.png)


動作環境
Processing 1.0.7

GfxBuilderで円弧を描画する

GfxBuilderで円弧を描画するには、以下のコードを実行します。


import griffon.builder.gfx.render.*

def gr = new GfxRenderer()
gr.renderToFile("sample1413.png", 200, 200){
antialias("on")
arc( x: 0, y: 0, width: 198, height: 198,
start:15, extent:150,
borderColor: color("#cccccc"),
borderWidth: 2,
fill: color("#7799ff"),
close: "pie"
)
}


出力画像(sample1413a.png)
GfxBuilderで描画した円弧

Tuesday, November 10, 2009

Processingで画像をポスタライズする

Processingで画像をポスタライズするには、以下のコードを実行します。


// キャンバスサイズ
size(200, 200);
// 背景色
background(#ffffee);
// 塗りつぶし色
fill(#d0d0f0);
// 画像はdataディレクトリに置いておく
PImage img = loadImage("SF.JPG");
// ポスタライズ
img.filter(POSTERIZE, 8);
// 画像の表示
image(img, 0, 0);
// ファイル保存
save("sample1258a.png");


元画像(sf.jpg)


出力画像(sample1258a.png)
Processingでポスタライズした画像

動作環境
Processing 1.0.7

Monday, November 09, 2009

Processingで画像を反転させる

Processingで画像を反転させるには、以下のコードを実行します。


// キャンバスサイズ
size(400, 400);
// 背景色
background(#ffffee);
// 塗りつぶし色
fill(#d0d0f0);
// 画像はdataディレクトリに置いておく
PImage img = loadImage("sf2.jpg");
// 反転
img.filter(INVERT);
// 画像の表示
image(img, 50, 100);
// ファイル保存
save("sample1257a.png");


元画像(sf2.jpg)


出力画像(sample1257a.png)


動作環境
Processing 1.0.7

Sunday, November 08, 2009

Processingで画像を2値化する

Processingで画像を2値化するには、以下のコードを実行します。


// キャンバスサイズ
size(400, 400);
// 背景色
background(#ffffee);
// 塗りつぶし色
fill(#d0d0f0);
// 画像はdataディレクトリに置いておく
PImage img = loadImage("sf2.jpg");
// 二値化
img.filter(THRESHOLD, 0.5);
// 画像の表示
image(img, 50, 100);
// ファイル保存
save("sample1256a.png");


元画像(sf2.jpg)


出力画像(sample1256a.png)


動作環境
Processing 1.0.7