rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

前橋のゆるキャラころとんをSVGでアニメーション描画してみた

      生活, 群馬 ,

  • このエントリーをはてなブックマークに追加
  • Pocket

ころとん

我らが前橋のゆるキャラ「ころとん」を SVG で書いて、絵描き歌風にアニメーションで描画させてみました。下記リンクからそのころとんが見られます。

絵心が無いのでひどいころとんになってしまいましたがw、スラスラと本当に絵描き歌っぽく描かれるアニメーションが結構面白いです。

このころとん、結構簡単にできてしまうのでその作り方を紹介してみましょう。

作り方

SVG でイラストを描く

まずはころとんのイラストを用意します。

ころとんの書き方は、こちらの公式サイトに絵描き歌が公開されているので、一緒に歌いながら書いてみましょう。

なお、SVG 形式の画像が作れれば良いので、今回自分はブラウザ上でお絵かきができる svg-edit というツールを使って書いてみました。

ころとん

なお、できあがった coroton.svg ファイルはこちら。

SVG 画像をアニメーションさせる

SVG 画像をアニメーション描画させるのには、Lazy Line Painter という jQuery プラグインを使ってみました。

まず、Lazy Line Painter のサイトの下の方にある「SVG TO LAZY LINE CONVERTER」というエリアに、作成した SVG 画像をドラッグ&ドロップでアップロードします。

Lazy Line Painter

画像がアップロードされると、このようにアニメーションして表示されます。

ころとん

この下にコードが表示されるので、svgdata.js というファイルを作成しそのコードをコピー&ペーストして保存します。

Lazy Line Painter

なお、コードの最後の方にある「$(‘#undefined’).lazylinepainter(」という箇所を「$(‘#coroton’).lazylinepainter(」に直しておきます。(※変更は任意です。)

保存する svgdata.js はこのようになりました。

Lazy Line Painter の GitHub ページにあ
る「Download ZIP」からソースをダウンロードして解凍します。その中に同梱されている「jquery.lazylinepainter-1.7.0.min.js」というファイルを取り出して使います。

下記のように、index.html ファイルを作成します。(「<div id=’coroton’></div>」という箇所の ID 属性を、svgdata.js で修正した “coroton” に合わせるのがポイントです。)

ちなみに、ここまで作ったファイルはこのような構成になります。

/directory
├─ index.html
├─ jquery.lazylinepainter-1.7.0.min.js
└─ svgdata.js

あとはブラウザでこの index.html を開けば、アニメーションでころとんが見られると思います。

頑張れ!ゆるキャラグランプリ

さて、今回ご紹介した前橋のゆるキャラころとんは、ただいま投票受付中の「ゆるキャラグランプリ2015」に参加中です。

10/19現在でころとんは総合26位、今年の目標10位以内にはまだまだもう一頑張り必要な状況です!

インターネット投票の期間は2015年11月16日(月)18時まで。

こちらのページから誰でも投票できますので、ぜひみなさんでころとんを応援しましょう!

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

群馬のおきて
「群馬のおきて グンマーを楽しむための52のおきて」を読みました

「グンマー」という最高のネタを得て、今ノリにノッている群馬ですが、それを後押しす …

雪
今回の大雪被害について前橋市から支給される支援金・見舞金の申請をお忘れなく

自分が会社の業務で納めたシステムが入っている事業施設が、先日の大雪でほぼ全壊して …

富岡製糸場
グンマーの世界遺産・富岡製糸場でプロジェクションマッピングが開かれる!

先日の世界遺産登録が正式に決定し、グンマー起こしの希望の星として大いに湧いている …

和凧
前橋の「上州空っ風凧揚げ大会」に行ってきました

2月15日、前橋で開かれた「第23回上州空っ風凧揚げ大会」に子どもたちと行ってき …

高崎駅西口にあるだるまの壁画が好き

高崎はだるまの生産量が全国一(シェア80%もあるんだとか)ということで、JR高崎 …

サイクルポート
前向きな方向で高チャリが改善されるといいなあと思っている件

高チャリが何やら話題になっているようですね。 高崎市民の民度が問われる「返ってこ …

パスタ
知らずに損した!ワンコインでお得なランチが食べられる「ランチパスポート前橋・高崎」は要チェック!

高崎・前橋市内の飲食店でワンコイン500円でお得なランチが食べられる!という「ラ …

ぐんまちゃん
今年も使おう!ぐんまちゃんの年賀状デザイン2015年版

【2015/12/14更新】 最新の年賀状デザインについてはこちらの記事をご覧く …

ナポリタン
ランチパスポートVol5の1店目。安定の美味しさな高崎市「room’s」でナポリタンランチ

500円でお得なランチが頂けるランチパスポート、Vol5 を購入してからようやく …

佐世保バーガー
ランチパスポート5店目。初めての佐世保バーガー、高崎市「エッグマン」のベーコンエッグバーガーセット

500円でランチが楽しめるランチパスポート、5店目は高崎駅前LABI1高崎にある …