Saturday, May 30, 2009

JOGLでワイヤーフレームの立方体を描画する

JOGLでワイヤーフレームの立方体を描画するには、以下のコードを実行します。


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

public class JoglSample1
{
// 出力画像サイズ
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)0x77/(float)0xff,
(float)0x99/(float)0xff,
(float)0xff/(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, 40.0f);

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

gl.glClear(GL.GL_COLOR_BUFFER_BIT);

gl.glPushMatrix();
// X軸回転
gl.glRotatef(45.0f, 1.0f, 0.0f, 0.0f);
// Y軸回転
gl.glRotatef(20.0f, 0.0f, 1.0f, 0.0f);
// ワイヤフレームの立方体を描画
glut.glutWireCube(2.0f);
gl.glPopMatrix();
}

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("sample1159a.png"),
width, height, true);
context.release();
context.destroy();
}
}


出力画像(sample1159a.png)
JOGLで描画したワイヤーフレームの立方体

動作環境
JDK6 Upadate13, JOGL 1.1.1

ImageMagickとPHPでグラデーションのかかった市松模様を作成する

Imagickでグラデーションのかかった市松模様を作成するには、以下のコードを実行します。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja"
xml:lang="ja" dir="ltr">
<head>
<title>sample1101(ImageMagick6.5.2)</title>
</head>
<body>
<?php
$im = new Imagick();
$im->setOption("option:distort:viewport", "210x210+0+0");
$im->newPseudoImage(210, 210, "pattern:checkerboard");
$im->normalizeImage(Imagick::CHANNEL_ALL);
$im->paintOpaqueImage("black", "#7799ff", 0);
$im->setImageVirtualPixelMethod(
Imagick::VIRTUALPIXELMETHOD_TILE);
$points = array(0.5, 30);
//$im->distortImage(Imagick::DISTORTION_SCALEROTATETRANSLATE,
// $points, false);
// ScaleRotateTranslateDistortion in distort.h
$im->distortImage(3, $points, false);

$im2 = new Imagick();
$im2->newPseudoImage(210, 210, "gradient:#22338880-#00000000");
$im->compositeImage($im2, Imagick::COMPOSITE_OVER,
0, 0, Imagick::CHANNEL_ALL);
$im->writeImage('sample1101a.png');

$im2->destroy();
$im->destroy();
?>
<img src="sample1101a.png" /><br />

</body>
</html>


出力画像(sample1101a.png)
Imagickで描画したグラデーションのかかった市松模様

関連項目
ImageMagickでグラデーションのかかった市松模様を作成する (convertコマンドによる同様の処理)

SVGRendererで車の形を描画する

SVGRendererで車の形を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample974a.svg", 200, 200){
raceCarShape( x:0, y:40, width:200, height:120,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample974a.svg)をPNGにレンダリングした画像
SVGRendererで描画した車の形

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
SVGRendererでグラデーションのかかった星を描画する (図形をグラデーションで塗りつぶす方法)
groovyで車の形を描画する (GraphicsRendererでの同様の処理)

Friday, May 29, 2009

ImageMagickとPHPで画像をブロック風に変換する

Imagickで画像をブロック風に変換するには、以下のコードを実行します。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja"
xml:lang="ja" dir="ltr">
<head>
<title>sample1102(ImageMagick6.5.2)</title>
</head>
<body>
<?php
/* ブロックサイズ */
$bw=20;
$bh=20;

$im = new Imagick("sf.jpg");
$iw = $im->getImageWidth();
$ih = $im->getImageHeight();

/* 円のパターンを作成 */
$idraw = new ImagickDraw();
$idraw->pushPattern('tile', 0, 0, $bw, $bh);
$idraw->setFillColor("white");
$idraw->ellipse($bw/2+1,$bh/2+1,
$bw/2*0.6,$bh/2*0.6,0,360);
$idraw->popPattern();
/* 円をタイル配置してマスク作成 */
$idraw->setFillPatternURL('#tile');
$im2 = new Imagick();
$im2->newPseudoImage($iw, $ih, "xc:none");
$idraw->rectangle(0, 0, $iw, $ih);
$im2->drawImage($idraw);

/* モザイク画像作成 */
$im->modulateImage(100, 140, 100);
$im->resizeImage($iw/$bw, $ih/$bh,
imagick::FILTER_MITCHELL, 1);
/* FILTER_POINTを使用して元のサイズにリサイズ */
$im->resizeImage($iw, $ih, Imagick::FILTER_POINT, 1);


$im2->compositeImage($im, Imagick::COMPOSITE_IN, 0, 0,
Imagick::CHANNEL_ALL);
$im3 = $im2->clone();
$im4 = $im2->clone();

$im3->evaluateImage(imagick::EVALUATE_MULTIPLY, 0.8);
$im->compositeImage($im3, Imagick::COMPOSITE_OVER,
0, 0, Imagick::CHANNEL_ALL);
$im->compositeImage($im3, Imagick::COMPOSITE_OVER,
-1, -1, Imagick::CHANNEL_ALL);

$im3->evaluateImage(imagick::EVALUATE_MULTIPLY, 1.5);
$im->compositeImage($im3, Imagick::COMPOSITE_OVER,
-2, -2, Imagick::CHANNEL_ALL);


$im->writeImage('sample1102a.png');

$im2->destroy();
$im->destroy();
?>
<img src="sample1102a.png" /><br />

</body>
</html>


元画像(sf.jpg)


出力画像(sample1102a.png)
Imagickでブロック風に変換した画像

関連項目
ImageMagickで画像をブロック風に変換する (convertコマンドでの同様の処理)
ImageMagickとPHPで、画像を荒いドット画像に変換する
ImageMagickとPHPで画像を荒いドットを交互に配置したモザイク画像に変換する

SVGRendererで二次曲線を描画する

SVGRendererで二次曲線を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample973a.svg", 200, 200){
quadCurve( x1:200, y1:0, ctrlx:0, ctrly: 100,
x2:200, y2:200,
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample973a.svg)をPNGにレンダリングした画像
SVGRendererで描画した二次曲線

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで二次曲線を描画する (GraphicsRendererでの同様の処理)

Thursday, May 28, 2009

ImageMagickとPHPで手書き風の円に囲まれた文字を描画する

Imagickで手書き風の円に囲まれた文字を描画するには、以下のコードを実行します。


<title>sample1100(ImageMagick6.5.2)</title>
</head>
<body>
<?php
/* 表示文字列 */
$message_string = "ImageMagick";
/* 文字色 */
$fc = "#103070";
/* 円の色 */
$cc = "#bbddff";
/* ブロック幅・高さ */
$bw = 40;
$bh = 40;
/* 円半径サイズ */
$crx = 18;
$cry = 18;
/* 文字サイズ */
$ps = 25;

$images = new Imagick();
for($sl=0;$sl<strlen($message_string);$sl++){
$im = new Imagick();
$im->newPseudoImage($bw, $bh, "xc:none");
$idraw = new ImagickDraw();

/* 円描画 */
$idraw->setFillColor($cc);
$idraw->ellipse($bw/2, $bh/2, $crx,
$cry, 0, 360);

/* 文字色設定 */
$idraw->setFillColor($fc);
$im->drawImage($idraw);
/* フォント設定 */
$idraw->setFont('Tahoma-Bold');
/* フォントサイズ設定 */
$idraw->setFontSize($ps);
$idraw->setGravity(Imagick::GRAVITY_CENTER);
$im->annotateImage($idraw, 0, 0, 0,
substr($message_string,$sl,1));

$images->addImage($im);
$idraw->destroy();
$im->destroy();
}
$images->setImageIndex(0);
$im2 = $images->appendImages(false);
$im2->spreadImage(1);
$im2->medianFilterImage(1);

$im2->writeImage('sample1100a.png');

$images->destroy();
$im2->destroy();
?>
<img src="sample1100a.png" /><br />

</body>
</html>


出力画像(sample1100a.png)


関連項目
ImageMagickとPHPで手書き風の文字列をアニメーションGIFにする
ImageMagickとPHPで手塗り風の四角を描画する

SVGRendererでピンを描画する

SVGRendererでピンを描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample972a.svg", 200, 200){
pin( cx:100, cy:100, radius: 20, height:80,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2,
angle: 45
)
}


出力SVG(sample972a.svg)をPNGにレンダリングした画像
SVGRendererで描画したピン

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
SVGRendererでグラデーションのかかった星を描画する (図形をグラデーションで塗りつぶす方法)
groovyでピンを描画する (GraphicsRendererでの同様の処理)

Wednesday, May 27, 2009

im4javaで画像に半透明の濃淡をつける

im4javaで画像に半透明の濃淡をつけるには、いかのコードを実行します。


import java.util.*;
import org.im4java.core.*;
import org.im4java.process.*;

// im4java-0.97.0-bin.tar.bz2を解凍してim4java-0.97.0.jarはclasspathに通す
public class Im4java19
{
public static void main(String args[])
throws Exception
{
try
{
// ConvertCmd convert = new ConvertCmd();
ImageCommand convert = new WindowsConvertCmd();

IMOperation op = new IMOperation();
op.seed().addRawArgs("6215");
op.size(200, 200).addRawArgs("plasma:fractal");
op.fx("lightness");
op.alpha("activate").channel("a").fx("r").channel("rgba");
op.addImage("sf.jpg");
op.compose("src_in").composite();
op.addImage("sample1085a.png");
convert.run(op);

op = new IMOperation();
op.size(200, 200).addRawArgs("pattern:checkerboard");
op.addImage("sample1085a.png");
op.composite();
op.addImage("sample1085b.png");
convert.run(op);
}
catch(CommandException cex)
{
System.out.println(cex.getErrorText());
cex.printStackTrace();
}
}

// im4java 0.97
static class WindowsConvertCmd extends ImageCommand
{
public WindowsConvertCmd()
{
setCommand("cmd");
setCommand("/c");
setCommand("convert");
/* another way
setCommand("C:\\Program Files\\ImageMagick-6.4.9-Q16\\convert");
*/
}
}
}


元画像(sf.jpg)


出力画像1(sample1085a.png)


出力画像2(sample1085b.png):半透明濃淡をつけた画像と市松模様の重ね合わせ


関連情報
im4javaのまとめ

ImageMagickで、画像に半透明の濃淡をつけて重ね合わせる

SVGRendererでアイスクリームを描画する

SVGRendererでアイスクリームを描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample971a.svg", 200, 200){
iceCreamShape( x:0, y:40, width: 200, height:120,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample971a.svg)をPNGにレンダリングした画像
SVGRendererで描画したアイスクリーム

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyでアイスクリーム形を描画する (GraphicsRendererによる同様の処理)

Tuesday, May 26, 2009

ImageMagickとPHPで画像を滲んだ感じに変換する

Imagickで画像を滲んだ感じに変換するには、以下のコードを実行します。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja"
xml:lang="ja" dir="ltr">
<head>
<title>sample1099(ImageMagick6.5.2)</title>
</head>
<body>
<?php
$im = new Imagick("sf.jpg");
// 何故かIM6.5.2-0では動作しない?
//$im->setImageColorspace(Imagick::COLORSPACE_GRAY);
$im = $im->fxImage("lightness");
$im2 = new Imagick("sf.jpg");
$im2->spreadImage(4);
$im2->blurImage(0,1);
$im->compositeImage($im2, Imagick::COMPOSITE_OVERLAY, 0, 0,
Imagick::CHANNEL_ALL);

$im->writeImage('sample1099a.png');
$im2->destroy();
$im->destroy();
?>
<img src="sample1099a.png" />
</body>
</html>


元画像(sf.jpg)


出力画像(sample1099a.png)
Imagickで滲んだ感じに変換した画像

関連項目
ImageMagickで画像を滲んだ感じに変換する (convertコマンドでの同様の処理)

SVGRendererで足形を描画する

SVGRendererで足形を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample970a.svg", 200, 200){
footShape( x:0, y:30, width:200, height:140,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample970a.svg)をPNGにレンダリングした画像

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで足型を描画する (GraphicsRendererによる同様の処理)

Monday, May 25, 2009

ImageMagickとPHPで回転させた半透明グラデーションで画像を切り取る

Imagickで回転させた半透明グラデーションで画像を切り取るには、以下のコードを実行します。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja"
xml:lang="ja" dir="ltr">
<head>
<title>sample1098(ImageMagick6.5.2)</title>
</head>
<body>
<?php
$im = new Imagick("sf.jpg");
$im2 = new Imagick();
$im2->newPseudoImage(200, 200, "gradient:#ffffffff-#ffffff00");
$im2->setImageMatte(true);
$points = array(45);
//$im->distortImage(Imagick::DISTORTION_SCALEROTATETRANSLATE, $points, false);
// ScaleRotateTranslateDistortion in distort.h
$im2->distortImage(3, $points, false);

$im2->compositeImage($im, Imagick::COMPOSITE_IN, 0, 0,
Imagick::CHANNEL_ALL);

$im2->writeImage('sample1098a.png');
$im2->destroy();
$im->destroy();
?>
<img src="sample1098a.png" />
</body>
</html>


元画像(sf.jpg)


出力画像(sample1098a.png)
Imagickで回転させた半透明グラデーションで切り取った画像

関連項目
ImageMagickを使用して傾けた半透明グラデーションで画像を切り取る (convertコマンドでの同様の処理)

SVGRendererで魚を描画する

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


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample969a.svg", 200, 200){
fishShape( x:0, y:40, width:200, height:120,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample969a.png)をPNGでレンダリングした画像


動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで魚型を描画する

Sunday, May 24, 2009

ImageMagickとPHPで画像を点画のように変換する

Imagickで画像を点画のように変換するには、以下のコードを実行します。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja"
xml:lang="ja" dir="ltr">
<head>
<title>sample1097(ImageMagick6.5.2)</title>
</head>
<body>
<?php
$im = new Imagick("sf2.jpg");
$im->modulateImage(100, 250, 100);
$im->sketchImage(10,0,135);
$im->spreadImage(1);
$im->writeImage('sample1097a.png');
$im->destroy();
?>
<img src="sample1097a.png" />
</body>
</html>


元画像(sf2.jpg)


出力画像(sample1097a.png)
Imagickで点画のように変換した画像

関連項目
ImageMagickとPHPで画像を絵画調に変換する
ImageMagickで画像を点画のように変換する (convertコマンドでの同様の処理)

SVGRendererでドーナツ型を描画する

SVGRendererでドーナツ型を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample968a.svg", 200, 200){
donut( cx:100, cy:100, ir:50, or:90,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample968a.svg)をPNGにレンダリングした画像
SVGRendererで描画したドーナツ型

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
SVGRendererで円を描画する
SVGRendererで楕円を描画する
SVGRendererでグラデーションのかかった星を描画する (図形をグラデーションで塗りつぶす方法)
groovyでドーナツ型を描画する (GraphicsRendererでの同様の処理)