Saturday, December 05, 2009

Processingで半透明の四角を描画する

Processingで半透明の四角を描画するには、以下のコードを実行します。


// 画像の上に半透明の四角と文字列を描画する
// キャンバスサイズ
size(200, 200);
colorMode(RGB,255,255,255,255);
// 背景色
background(#ffffee);
// 画像はdataディレクトリに置いておく
PImage img = loadImage("SF.JPG");
// 画像の表示
image(img, 0, 0);
// 半透明の四角を描画
// 塗りつぶし色
fill(#000000,128);
noStroke();
rect(img.width*0.1, img.height*0.3, img.width*0.8, img.height*0.4);
// フォントを変換
PFont font = createFont("Tahoma",20,true);
// フォントを設定
textFont(font);
String message = "San Francisco";
// 文字列の幅を取得
float tw = textWidth(message);
// 文字
fill(#ffffff);
text(message,img.width/2-tw/2,img.height/2+textDescent());
// ファイル保存
save("sample1384a.png");


元画像(SF.JPG)


出力画像(sample1384a.png)
Processingで半透明の四角を描画する

○動作環境
Processing 3.4/Processing 1.0.7

〇関連項目
Processingをインストールした仮想マシンを構築するには、以下のページを参照してください。
https://serverarekore.blogspot.com/search/label/Processing
・Processingに関する他の記事は、こちらを参照してください。

GfxBuilderで四角を描画する

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


import griffon.builder.gfx.render.*

def gr = new GfxRenderer()
gr.renderToFile("sample1420a.png", 100, 100){
antialias("on")
rect( x:10, y:10, width:80, height:80,
fill: color("#c8c0c0"),
borderColor: color("#808080"),
borderWidth: 2
)
}


出力画像(sample1420a.png)
GfxBuilderで描画した四角

動作環境
Groovy1.6.5, JDK6 Update16

Friday, December 04, 2009

Processingで画像を回転させる

より新しいバージョンでの記事Processingで画像を回転させるを参照してください。

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


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


元画像(sf2.jpg)


出力画像(sample1383a.png)
processingで回転させた画像

動作環境
Processing 1.0.7

〇関連項目
Processingをインストールした仮想マシンを構築するには、以下のページを参照してください。
https://serverarekore.blogspot.com/search/label/Processing
・Processingに関する他の記事は、こちらを参照してください。

Processingとjsilhouetteを使用してアスタリスクを描画する

より新しいバージョンでの記事Processingとjsilhouetteを使用してアスタリスクを描画するを参照してください。

Processingとjsilhouetteを使用してアスタリスクを描画するには、以下のコードを実行します。jsilhouetteはhttp://code.google.com/p/jsilhouette/から jsilhouette-geom-0.3.1.jarをダウンロードしてSketchのフォルダのcodeサブフォルダに配置するか、 Sketch->Add FilesメニューからSketchに追加します。


// キャンバスサイズ
size(200, 200);
background(#f8f8ff);
// 描画用PGraphics作成
PGraphicsJava2D g2d=(PGraphicsJava2D)createGraphics(200, 200, JAVA2D);
g2d.beginDraw();
Graphics2D gr = g2d.g2;
gr.setColor(new Color(#ffcc00));
// 矢印を描画
gr.fill(new Asterisk(100, 100, 80, 12, 5, 18, 1f));
g2d.endDraw();

image(g2d, 0, 0);
// ファイル保存
save("sample1480a.png");


出力画像(sample1480a.png)
Processingとjsilhouetteを使用して描画したアスタリスク

動作環境
Processing 1.0.7

〇関連項目
Processingをインストールした仮想マシンを構築するには、以下のページを参照してください。
https://serverarekore.blogspot.com/search/label/Processing
・Processingに関する他の記事は、こちらを参照してください。

Thursday, December 03, 2009

Processingで画像をセピア調に変換する

Processingで画像をセピア調に変換するには、以下のコードを実行します。


// キャンバスサイズ
size(300, 225);
// 背景色
background(#ffffee);
// 塗りつぶし色
fill(#d0d0f0);
// 画像はdataディレクトリに置いておく
PImage img = loadImage("sf2.jpg");
// グレースケール
img.filter(GRAY);
// 着色
tint(#fec243);
// 画像の表示
image(img, 0, 0);
// ファイル保存
save("sample1382a.png");


元画像(sf2.jpg)


出力画像(sample1382a.png)
Processingでセピア調に変換した画像

○動作環境
Processing3.4/Processing 1.0.7

〇関連項目
Processingをインストールした仮想マシンを構築するには、以下のページを参照してください。
https://serverarekore.blogspot.com/search/label/Processing
・Processingに関する他の記事は、こちらを参照してください。

ProcessingとJava Image Filters(pixels)を使用して画像を点状に加工する

より新しいバージョンでの記事ProcessingとJava Image Filtersを使用して画像を点状に加工するを参照してください。

ProcessingとJava Image Filters(pixels)を使用して画像を点状に加工するには、以下のコードを実行します。Java Image Filtersはhttps://pixels.dev.java.net/servlets/ProjectDocumentListから pixels-core-2.1.3-SNAPSHOT.jarをダウンロードしてSketchのフォルダのcodeサブフォルダに配置するか、 Sketch->Add FilesメニューからSketchに追加します。


// キャンバスサイズ
size(200, 200);
PImage img = loadImage("SF.JPG");
// 画像を点状に変換する
PointillizeFilter pf = new PointillizeFilter();
// スケール
pf.setScale(12);
// エッジを表示するかどうか
pf.setFadeEdges(false);
// エッジの厚さ
pf.setEdgeThickness(0.4f);
// ランダムさ
pf.setRandomness(0.2f);
// あいまいさ
pf.setFuzziness(0.2f);
PImage img2 = new PImage(pf.filter((BufferedImage)img.getImage(), null));
image(img2, 0, 0);
// ファイル保存
save("sample1443a.png");


元画像(sf.jpg)


出力画像(sample1443a.png)
ProcessingとJava Image Filters(pixels)を使用して点状に加工した画像

動作環境
Processing 1.0.7

〇関連項目
Processingをインストールした仮想マシンを構築するには、以下のページを参照してください。
https://serverarekore.blogspot.com/search/label/Processing
・Processingに関する他の記事は、こちらを参照してください。

Wednesday, December 02, 2009

JOGLで4色グラデーションのポリゴンを描画する

JOGLで4色グラデーションのポリゴンを描画するには、以下のコードを実行します。


import java.io.*;
import javax.media.opengl.*;
import javax.media.opengl.glu.*;
import com.sun.opengl.util.*;

public class JoglSample61
{
// 出力画像サイズ
private static int width = 300;
private static int height = 300;

public static void main(String args[])
throws IOException
{
GLDrawableFactory gldf =
GLDrawableFactory.getFactory();
GLCapabilities glc = new GLCapabilities();
glc.setDoubleBuffered(false);
GLPbuffer buf = gldf.createGLPbuffer(
glc, null, width, height, null);

buf.addGLEventListener(
new GLEventListener(){
// 初期化
public void init(GLAutoDrawable dr)
{
GL gl = dr.getGL();
// 背景色
gl.glClearColor(
(float)0xf0/(float)0xff,
(float)0xf0/(float)0xff,
(float)0xf0/(float)0xff,
1f);
}

public void display(GLAutoDrawable dr)
{
GL gl = dr.getGL();
GLUT glut = new GLUT();
gl.glViewport(0, 0, width, height);

// 透視投影
gl.glMatrixMode(GL.GL_PROJECTION);
gl.glLoadIdentity();
float ratio = (float)height/(float)width;
gl.glFrustum(-1.0f, 1.0f, -ratio, ratio,
5.0f, 60.0f);

gl.glMatrixMode(GL.GL_MODELVIEW);
gl.glLoadIdentity();
gl.glTranslatef(0.0f, 0.0f, -50.0f);

gl.glEnable(GL.GL_LIGHTING);
gl.glEnable(GL.GL_LIGHT0);
gl.glEnable(gl.GL_COLOR_MATERIAL);
gl.glEnable(GL.GL_NORMALIZE);
gl.glEnable(GL.GL_DEPTH_TEST);
gl.glClear(GL.GL_COLOR_BUFFER_BIT |GL.GL_DEPTH_BUFFER_BIT );

// X軸回転
gl.glRotatef(50.0f, 1.0f, 0.0f, 0.0f);

double rs = 15d;
gl.glBegin(GL.GL_POLYGON);
gl.glNormal3d(0, 1,0);
// 赤色
gl.glColor3f(1, 0, 0);
gl.glVertex3d(-rs/2, 0.0, rs/2);
// 緑色
gl.glColor3f(0, 1, 0);
gl.glVertex3d(-rs/2, 0.0, -rs/2);
// 青色
gl.glColor3f(0, 0, 1);
gl.glVertex3d(rs/2, 0.0, -rs/2);
// 黄色
gl.glColor3f(1, 1, 0);
gl.glVertex3d(rs/2, 0.0, rs/2);
gl.glEnd();
}

public void reshape(
GLAutoDrawable dr,
int x, int y,
int width, int height){}

public void displayChanged(
GLAutoDrawable dr,
boolean modeChanged,
boolean deviceChanged){}
}
);

GLContext context = buf.createContext(null);
context.makeCurrent();
buf.display();
Screenshot.writeToFile(
new File("sample1381a.png"), width, height, true);
context.release();
context.destroy();
}
}


出力画像(sample1381a.png)
JOGLで描画した4色グラデーションのポリゴン

動作環境
JOGL1.1.1a, JDK6 Update14

Tuesday, December 01, 2009

PyWin32とImageMagickで画像の端を円形にぼかす

PyWin32とImageMagickで画像の端を円形にぼかすには、以下のコードを実行します。


# coding=UTF-8
import win32com.client

im = win32com.client.Dispatch("ImageMagickObject.MagickImage.1")
im.convert("sf.jpg", "-background", "#ffffe0",
"-vignette", "5x5+10+5", "sample1380a.png")


元画像(sf.jpg)


出力画像(sample1380a.png)
PyWin32とImageMagickで画像の端を円形にぼかした結果

動作環境
Python3.1.1, Python for Windows Extensions (Build 214), ImageMagick6.5.5

GfxBuilderでポリゴンを描画する

GfxBuilderでポリゴンを描画するには、以下のコードを実行します。


import griffon.builder.gfx.render.*

def gr = new GfxRenderer()
gr.renderToFile("sample1419a.png", 200, 200){
antialias("on")
polygon( points: [100,0, 0,198, 198,198],
fill: color("#c8c0c0"),
borderColor: color("#808080"),
borderWidth: 2
)
}


出力画像(sample1419a.png)
GfxBuilderで描画したポリゴン

動作環境
Groovy1.6.5, JDK6 Update16

Monday, November 30, 2009

PyWin32とImageMagickで画像上に斜線を描画する

PyWin32とImageMagickで画像上に斜線を描画するには、以下のコードを実行します。


# coding=UTF-8
import win32com.client

im = win32com.client.Dispatch("ImageMagickObject.MagickImage.1")
im.convert("sf.jpg", "-fx", "(i+j)%5==0?#FFFFFF:p",
"sample1379a.png")


元画像(sf.jpg)


出力画像(sample1379a.png)
PyWin32とImageMagickで斜線を描画した画像

動作環境
Python3.1.1, Python for Windows Extensions (Build 214), ImageMagick6.5.5

ProcessingとJava Image Filters(pixels)を使用して画像にひねりをかける

より新しいバージョンでの記事ProcessingとJava Image Filtersを使用して画像にひねりをかけるを参照してください。

ProcessingとJava Image Filters(pixels)を使用して画像にひねりをかけるには、以下のコードを実行します。Java Image Filtersはhttps://pixels.dev.java.net/servlets/ProjectDocumentListから pixels-core-2.1.3-SNAPSHOT.jarをダウンロードしてSketchのフォルダのcodeサブフォルダに配置するか、 Sketch->Add FilesメニューからSketchに追加します。


// キャンバスサイズ
size(300, 225);
PImage img = loadImage("sf2.jpg");
// 画像にひねりをかける
TwirlFilter tf = new TwirlFilter();
// 角度
tf.setAngle(1.5f);
// 中央座標X
tf.setCentreX(0.4f);
// 中央座標Y
tf.setCentreY(0.6f);
// 半径
tf.setRadius(150f);
PImage img2 = new PImage(tf.filter((BufferedImage)img.getImage(), null));
image(img2, 0, 0);
// ファイル保存
save("sample1442a.png");


元画像(sf2.jpg):dataサブディレクトリに配置か、Add Filesで追加。


出力画像(sample1442a.png)
ProcessingとJava Image Filters(pixels)を使用してひねりをかけた画像

動作環境
Processing 1.0.7

〇関連項目
Processingをインストールした仮想マシンを構築するには、以下のページを参照してください。
https://serverarekore.blogspot.com/search/label/Processing
・Processingに関する他の記事は、こちらを参照してください。

Sunday, November 29, 2009

PyWin32とImageMagickで縁取り+グラデーション塗りの文字列を描画する

PyWin32とImageMagickで縁取り+グラデーション塗りの文字列を描画するには、以下のコードを実行します。


# coding=UTF-8
import win32com.client

im = win32com.client.Dispatch("ImageMagickObject.MagickImage.1")
im.convert("-size", "200x60", "xc:none", "-tile",
"gradient:#ffffff-#f8c749", "-stroke", "#c0c0ff",
"-strokewidth", "2", "-pointsize", "50", "-draw",
"text 0,45 Python" , "sample1378a.png")


出力画像(sample1378a.png)
PyWin32とImageMagickで描画した縁取り+グラデーション塗りの文字列

動作環境
Python3.1.1, Python for Windows Extensions (Build 214), ImageMagick6.5.5

Processingとjsilhouetteを使用して矢印を描画する

より新しいバージョンでの記事Processingとjsilhouetteを使用して矢印を描画するを参照してください。

Processingとjsilhouetteを使用して矢印を描画するには、以下のコードを実行します。jsilhouetteはhttps://code.google.com/p/jsilhouette/から jsilhouette-geom-0.3.1.jarをダウンロードしてSketchのフォルダのcodeサブフォルダに配置するか、 Sketch->Add FilesメニューからSketchに追加します。


// キャンバスサイズ
size(200, 200);
background(#f8f8ff);
// 描画用PGraphics作成
PGraphicsJava2D g2d=(PGraphicsJava2D)createGraphics(200, 200, JAVA2D);
g2d.beginDraw();
Graphics2D gr = g2d.g2;
gr.setColor(new Color(#ffcc00));
// 矢印を描画
gr.fill(new Arrow(50, 50, 100, 100));
g2d.endDraw();

image(g2d, 0, 0);
// ファイル保存
save("sample1479a.png");


出力画像(sample1479a.png)
Processingとjsilhouetteを使用して描画した矢印

動作環境
Processing 1.0.7

〇関連項目
Processingをインストールした仮想マシンを構築するには、以下のページを参照してください。
https://serverarekore.blogspot.com/search/label/Processing
・Processingに関する他の記事は、こちらを参照してください。