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

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)

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)


動作環境
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 1.0.7

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)


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

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)


動作環境
Processing3.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("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)

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)


動作環境
Processing3.4/Processing 1.0.7

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

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)


動作環境
Processing3.4/Processing 1.0.7

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

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)


動作環境
Processing3.4/Processing 1.0.7

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