プログラマのオッサンの唄

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/

一度作成したテーブルにカラムを追加してみる。

▽現状のSchema

  create_table "onecolumnmodels", :force => true do |t|
    t.string   "name"
    t.datetime "created_at", :null => false
    t.datetime "updated_at", :null => false
  end

まずは空の migration ファイルを作成する。

G:\Sites\mytest>rails g migration add_thirdname_onecolumnmodel
      invoke  active_record
      create    db/migrate/20120930223614_add_thirdname_onecolumnmodel.rb

"rails generate" は "rails g" で代用できるようだ。
作成されたmigrationファイルを開くと下記のようになっている。

class AddThirdnameOnecolumnmodel < ActiveRecord::Migration
  def up
  end

  def down
  end
end

def up のところに追加したい内容を、def down のところに元に戻す内容を追加する。

class AddThirdnameOnecolumnmodel < ActiveRecord::Migration
  def up
    add_column :onecolumnmodels, :thirdname, :string
  end

  def down
    remove_column  :onecolumnmodels, :thirdname
  end
end

この状態で、migration を実行。

G:\Sites\mytest>rake db:migrate
==  AddThirdnameOnecolumnmodel: migrating =====================================
-- add_column(:onecolumnmodels, :thirdname, :string)
   -> 0.0070s
==  AddThirdnameOnecolumnmodel: migrated (0.0080s) ============================

実行後に、db/schema.rb の内容を確認すると、thirdname が追加されている。

  create_table "onecolumnmodels", :force => true do |t|
    t.string   "name"
    t.datetime "created_at", :null => false
    t.datetime "updated_at", :null => false
    t.string   "thirdname"
  end

元に戻したい場合は、下記のように version を指定して migration を実行する。

rake db:migrate VERSION=1

ではどこに version が記載されているかというと、railsのデータベース内の schema_migrations というテーブルに記録されているようだ。

最後の行が直近で追加したバージョン番号(migrationファイルについているシリアル番号と同じ)なので、一つ前のバージョンを指定して migration してみる。

G:\Sites\mytest>rake db:migrate VERSION=20120928013904
==  AddThirdnameOnecolumnmodel: reverting =====================================
-- remove_column(:onecolumnmodels, :thirdname)
   -> 0.2440s
==  AddThirdnameOnecolumnmodel: reverted (0.2460s) ============================

実行後に、db/schema.rb の内容を確認すると、thirdname が削除されている。

  create_table "onecolumnmodels", :force => true do |t|
    t.string   "name"
    t.datetime "created_at", :null => false
    t.datetime "updated_at", :null => false
  end

2012年10月1日月曜日

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

テーブルにカラムの追加と削除を行う最小サンプル