プログラマのオッサンの唄: SVG画像を読み込んでProcessing.jsで操作するサンプル

Processing の描画機能は高機能なのだが、スクリプト上で複雑な画像をゼロから描くのは面倒である。
そこで、Illustrator などのツールで作成したSVG画像を読み込んで表示するサンプルを作成してみた。

▽作成したHTML

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="processing-1.4.1.js" type="text/javascript"></script>
  </head>
  <body>
    <p>
    <canvas id="mycanvas"></canvas>
    </p>
    <button onClick="sketchProc2()">Move</ button>
<script type="text/processing" data-processing-target="mycanvas">
PShape s;
int cy;
boolean down;

void setup() {
  size(320, 320);
  noLoop();
  s = loadShape("helicopter.svg");
  cy = 10;
  down = true;
}

void draw() {
  background(255); // clear
  shape(s, 80, cy, 100, 52);
}

void moveSVG() {

  background(255); // clear
  if (cy <= 10) {
    down = true;
  } else if (250 <= cy) {
    down = false;
  }

  if (down) {
    cy += (random(10) + 10);
  } else {
    cy -= (random(10) + 10);
  }

  shape(s, 80, cy, 100, 52);
}
</script>

<script id="script1" type="text/javascript">

function sketchProc2() {
  var p2 = Processing.getInstanceById("mycanvas");
  p2.moveSVG();
}
</script>

  </body>
</html>

▽実行結果

Move! ボタンを押すとヘリコプターのSVG画像が上下に移動する。

※ヘリコプターのSVG画像は、下記のサイトのアイコンを利用。

The Noun Project
http://thenounproject.com/

2012年10月1日月曜日

SVG画像を読み込んでProcessing.jsで操作するサンプル

0 件のコメント:

コメントを投稿