« July 2017 | Main | September 2017 »

2017.08.29

CSSアニメーション事始め

天気はパッとしないし、カープは悪夢の3夜連続のサヨナラ負け。しかも最高で~すっ!の鈴木誠也が怪我で離脱。あれこれ気の晴れない日々を過ごしてます。

始めたばかりの水彩は数枚描いたところで、負のスパイラルにはまり、気分に相まって暗い絵になってしまう。
う~ん何か気分転換はと探している時に、ふとCSSの解説本が目に留まった。

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ホームページの見栄えを良くするための言語のこと。これにアニメーションの機能がついてるんです。
解説本をパラパラめくると、最近もの忘れの激しい脳ミソでも理解できそう。しかもCSSアニメーションは特別なソフトを必要とせず、ホームページの作成言語のHTMLにチョコチョッコとコマンドを入れるだけ。したがってエディターさえあればできるんですよ。

日曜日の午後、ヨメサンが出かけたので、ひとり部屋にこもりひたすら解説本を見ながら、あーでもない、こーでもないと試行錯誤しながら完成させたのが、下の簡単なアニメーション。
総製作時間約4時間。それも半分はサメと島と波の絵の製作時間。CSSについては割りと簡単にできた。オレって天才?でもまだまだ奥は深そーです。

自分の名前で遊んでみました(記事にアップするためGIFアニメに変換)
Shark_island

下はインデントが表示されてませんが、このアニメーションのソースコード。
これだけ!
<style>と</style>に囲まれた部分が実際にアニメーションを動かしているCSSの部分です。HTMLの<body>句でサメと島と波(2枚)の絵を読込んでいます。

ソースコードをコピーして拡張子をhtmlのHTMLファイルで保存。下の4枚の絵を任意のフォルダにダウンロード。さらに絵を読込んでいる部分のフォルダをダウンロードしたフォルダに書き換えれば、このCSSアニメーションが動きます。(はずです。)

************************以下ソースコード************************************
<!DOCTYPE html>
<html lang="ja">
<meta http-eqip="Content-Type" content="text/html;charset=UTF-8">
<meta http-eqip="Content-Style-Type" content="text/css">
<title>CSSアニメーション</title>
<head>
<style>
@keyframes nami1{
0%{transform:translate(0px,0px);}
25%{transform:translate(20px,0px);}
50%{transform:translate(-20px,0px);}
100%{transform:translate(0px,0px);}
}
.wave1{
animation:nami1 2s linear infinite;
position:absolute; top: 300px; left: 300px;
}
@keyframes nami2{
0%{transform:translate(0px,0px);}
25%{transform:translate(-20px,0px);}
50%{transform:translate(20px,0px);}
100%{transform:translate(0px,0px);}
}
.wave2{
animation:nami2 2s linear infinite;
position:absolute; top: 300px; left: 300px;
}
@keyframes shark{
0%{transform:translate(0px,0px);}
100%{transform:translate(-500px,0px);}
}
.same{
animation:shark 10s linear infinite;
position:absolute; top: 180px; left: 800px;
}
.island{
transition: linear infinite;
position:absolute; top: 100px; left: 320px;
}
</style>
</head>
<body bgcolor="silver"><center>
<div>
<img src="d:/wave1.png" class="wave1">
<img src="d:/island.png" class="island">
<img src="d:/same.png" class="same">
<img src="d:/wave2.png" class="wave2">
</div>
</body>
</html>
************************以上ソースコード************************************

波1の絵
「wave1.png」をダウンロード
波2の絵
「wave2.png」をダウンロード
サメの絵
「same.png」をダウンロード
島の絵
「island.png」をダウンロード


| | Comments (0) | TrackBack (0)

2017.08.22

GIFアニメでバスを動かす

前回の水彩画のバスを動かしてみましょう。

アニメーションの作成には、今や風前の灯のFlashやCSS、それにGIFアニメなどを利用します。
FlashやCSSを利用すると複雑なアニメーションを作ることができます。GIFアニメは複雑な動きは表現できませんが、コンピューターの知識がなくても動きのある絵を用意するだけでアニメーションを作成できます。

今回はGIFアニメでバスを動かします。
GIFアニメはパラパラ漫画と原理が同じで、少しづつ動きのある絵を切り替えて動いているように見せます。

今回用意するものは以下の3枚の絵です。

①背景となる遠景と峠道を描いた絵
Genga01_470

②バスのみを描いた絵
Genga02

③手前の土手のみを描いた絵
Genga03_470

3枚の絵をレイヤー処理が可能な画像編集ソフト(今回はAdobe Photoshop Premere10を使用)に読み込みます。この時重要なのが各レイヤーに配置する絵の順番です。①の絵を一番奥のレイヤー、②の絵を真ん中のレイヤー、③の絵を手前のレイヤーに配置します。
①と③の絵は固定です。②のバスが土手に隠れて見えない状態から、徐々に右に進み、また見えなくなるまで、②の絵を少しづつ動かしながら、その都度、連番などファイル名を変えて保存します。今回はバスが右側に見えなくなるまで38枚の絵(ファイル)を用意しました。

次に用意した38枚の絵をGIFアニメ作成ソフト(今回はGiamというフリーのWinソフトを使用)に読み込み、各絵の表示時間等を設定すれば、GIFアニメの完成です。

峠道をバスが走るGIFアニメ。
Gif_

因みに今回は全ての絵が0.3秒で切替わるように設定しましたが、例えばバスが画面の中央に来た状態の絵だけ表示を3秒にすると、バスが中央に来て3秒間ストップするアニメになります。

バスが中央でストップ。
Gif__stop

 

| | Comments (0) | TrackBack (0)

2017.08.20

我がこころの耳取峠

水彩にはまったかも。

前回の40ん年ぶりの昭和新山の水彩で、Light My Fire!!
春先に購入した12色では足りないと、アマゾンで「サクラクレパス固形水彩絵の具プチカラー36色(3909円)」をポチッ。シロートは自分の技術を顧みず、道具に凝るのです。

で、今回の題材は鹿児島県南さつま市坊津町の耳取峠(みみとりとうげ)。
小さな頃から薩摩富士と呼ばれる秀麗な開聞岳を望むこの景色が好きで、何かを描きなさいと言われると、いつもこの景色を描いていた。特に春先は大好きで、下に広がる畑が菜の花の黄色一色に染まった。
また高校時代、土曜の昼に下宿先の鹿児島市内から2時間近くかけて帰ってきて、この峠に差し掛かって開聞岳が見えるとホッとしたものだ。逆に日曜日の夕方下宿先に帰る時は開聞岳を見て寂しくなった。

開聞岳の奥は大隅半島。条件が良ければ種子島も見える。左手前に枕崎市街と港。右には奇岩の立神が見える。

我がこころの原風景。
Touge01

手前に峠の道路を。
Touge02

ボンネットバスも。
Touge03

ぞして土手。奥行きがでたよーな。
Touge04

次回はバスを動かしてみます。

 

| | Comments (0) | TrackBack (0)

2017.08.15

北海道くるま旅2017 その7

北海道最後の朝も曇り空。

今日は予定もなく、18時30分苫小牧発のフェリーに間に合えばいいだけなので、ノンビリ道の駅を出発。
海岸線を目指す。いたるところにナウマンの名前だらけ。途中でホロカヤント沼という珍しい名前に惹かれて、看板どおりに進むと道に迷った。ウロウロしていたら海岸端の晩成温泉に着く。朝早いので利用しなかったが、隣が広いキャンプ場でバーベキュー施設もある。今度来た時は宿泊地にいいかも。でもいつのことやら。

目の前が海の晩成温泉。濃霧で見えないけど。宿泊施設あり。
Hokkaido0720_00

名残り惜しいけど、そろそろ帰りますか、ということで帯広を目指す。
この頃は晴れ間ものぞき、北海道らしい十勝平野をノンビリ進み、帯広には昼前に着いた。駅前に駐車し、駅構内の駅弁売り場に直行。

帯広と言えば豚丼!写真を撮り忘れ、昨年の写真。オジさんは同じ。
Hokkaido0720_01

中身は同じで、右は紐を引くと温かくなる弁当。タレが美味かった!
Hokkaido0720_02

帯広から高速に乗り、途中のSAで昼寝したりして16時過ぎに苫小牧のフェリー乗り場に到着。

これから乗船するサンフラワー。こちらも新造船。
Hokkaido0720_03

サンフラワーの隣には「襟裳岬」と同じ岡本おさみ・吉田拓郎コンビの「落陽」で、♪サイコロ好きですってんてんのあのじいさんが女の子みたいにテープを拾ってわざわざ見送ってくれた♪苫小牧発仙台行きフェリー♪もいた。
17時過ぎに乗船が始まる。部屋に入ると新造船らしく全てピッカピカ。ヨメさんは早速、船内の探検と展望風呂へ。

観光ホテル並みの部屋。最後なので奮発。
Hokkaido0720_04

専用のテラス付き。潮風が心地良かった。
Hokkaido0720_05

朝昼晩ともにバイキング方式のレストラン。食いすぎた!
Hokkaido0720_06

ゆったり寛げる船内。
Hokkaido0720_07

太平洋を航行中。穏やかな航海だった。
Hokkaido0720_10

定刻どおり翌日の14時に大洗港に到着。
Hokkaido0720_11

あっと言う間の7泊8日(うちフェリー2泊)の北海道くるま旅だった。
 

| | Comments (0) | TrackBack (0)

2017.08.12

残暑お見舞い2017

暑い日が続いてます。みなさまご自愛ください。

お盆休みはカレンダーどおり3日しか取れなかったので家で暇してます。
あまりに暇なので残暑お見舞いを作ってみました。北海道旅行のお思い出をGIFアニメで。

Gif_2

水彩なんて中学校の授業以来40ん年ぶり。春先にアマゾンでターレンス固形水彩絵の具プチカラー12色(1990円)てのを買っていた。携帯用の水筆付きで筆洗い用の水は不要。早速役にたった。

普通の残暑見舞いじゃいやだな、動きのあるものにしようと、こちらも久しぶりのGIFアニメに挑戦。ソフトを探しダウンロード。GIAMというフリーソフトです。使い方も簡単で思ったことができるソフトでした。
 

| | Comments (0) | TrackBack (0)

2017.08.07

北海道くるま旅2017 その6

5日目の朝も曇り空。
今日は今回の旅の目的地♪何もな~い♪襟裳岬です。隣のコンビニで朝飯を買い、8時前に道の駅を出発。

海沿いを走る国道235号線を襟裳方面へ南下。山側は牧場だらけ。しかも牛ではなく馬の牧場。ヨメさんに牛は分かるけど、サブレッドの育成って儲かるの?聞かれて、答えられず。
たしかに牛は牛乳、牛肉の需要はあるだろうけど、サラブレッドの需要って?? サラブレッドって労働馬としても使えないだろうし。

道の駅みついし。温泉、キャンプ場を併設。
Hokkaido0719_01

温泉もキャンプ場もあり、キャンプ場は海辺の気持ち良さげなオートキャンプ場。昨日はここにすればよかったねと言ったものの料金は5千円以上。北海道じゃ高いよねと意見一致。
道の駅を見渡せる小高い丘で写真を撮っていると、同年輩のオジサンが登ってきた。昨夜遅く道の駅に到着したバイクの方だ。山形の方でスーパーカブ(90CC)で北海道一周旅行中。バイクじゃ大変でしょうと言うと、最初から雨にも風にも会うと思っているからそうでもないよ、と笑う。
ところで、原チャリ乗りのヨメさんはスーパーカブに興味津々。オジサンの今のカブは分からないけど、昔のカブは質実剛健、ちょっとやそっとでは故障しないよ、に納得。

さらに南下、浦河町に入る。ヨメさんが優駿ビレッジという看板を見つけ、そりゃ行かなきゃと寄り道。

優駿ビレッジ内の宿泊施設アエル。(温泉あり)
Hokkaido0719_02

浦河町とJRAの共同出資の複合施設のようだが、なんだか活気がない。大丈夫か?
アエルのフロントでお馬さんを見られる場所はないかと聞くと、すぐ近くに放牧場があり、そこで見られるとのこと。

放牧場の厩舎。
Hokkaido0719_03

厩舎の中には昨年8月に死んだニッポーテイオーの献花台が。
Hokkaido0719_04

ニッポーテイオーはワタシがまだ競馬に夢中だった80年代中頃に活躍した馬。短距離が得意でマイルの帝王と呼ばれた。ところでニッポーテイオーは連敗記録でチョー有名になったハルウララの父だったとのこと。へ~。
厩舎で作業中のかわいい女性に放牧中の馬はどこですか?と聞くと、ちょうどウイニングチケットとヒシマサルがいますと案内してくれた。

JRA功労馬だって。
Hokkaido0719_05

右:ウイニングチケット 左:ヒシマサル
Hokkaido0719_06

ウイニングチケットは93年のダービー馬! 2頭が近づいて来たので、触っていいですかと聞くと、驚かさないようにしてくださいとのこと。やったー!ダービー馬に触った!!
人参持ってくればよかったなあ。今回の旅で最高の出来事だった。次回(いつのことやら)は絶対人参持参だ! 

大興奮の中、昼過ぎに今回の旅の最終目的地、襟裳岬に到着。

♪何もな~い♪はずの襟裳岬には灯台と土産物屋と観光施設があった。
Hokkaido0719_07

因みに襟裳岬の歌碑は、思っていた作詞岡本おさみ・作曲吉田拓郎の他に、作詞丘灯至夫・作曲遠藤実・歌島倉千代子の歌碑があった。知らねーなあ。

思っていたより長閑な岬だった。
Hokkaido0719_09

襟裳岬灯台。日本の灯台50選だそうな。
Hokkaido0719_10

岬の食堂の食べかけのツブ貝定食。今回の旅で初めての普通の食事。
Hokkaido0719_11

岬を後に、黄金道路(国道336号線)を帯広方面へ北上。北海道の生まれのヨメさんが何で黄金道路って言うかとクエスチョン? 
工事自体が難工事だったことと完成後も崩落等で、黄金が敷き詰められるほど莫大な建設費をかけて完成させた道路だからとのこと。フ~ン。
広尾町を過ぎた辺りで、国道236号線を内陸に向かう。そろそろ今回の旅の最後の宿泊地と温泉を決めなければいけない。途中の道の駅大樹で地図を広げて検討。もう少し先に温泉のある道の駅忠類があり、そこへ行ってから最終決定することに。
ところで北海道から帰ってから、この大樹町でホリエモンの会社が民間初のロケット打上げを行ったのを知った。見たかったなあ。残念ながら失敗したようだが。

間もなく道の駅忠類に到着。賑やかな国道沿いでコンビニも近い。温泉だけでなく無料のオートキャン場もあり、即今夜の宿泊地に決定。
オートキャンプ場は駅の裏手で、廻りがパークゴルフ場の広くて静かな場所。広すぎてトイレが遠いのが難点だが、早速タープを広げて寛いだ。

道の駅忠類。
Hokkaido0719_14

道の駅併設の温泉。ナウマン温泉(500円)。宿泊あり。
Hokkaido0719_15

いたるところにナウマンの名前の施設があるのは、1969年にここ忠類で日本初のナウマン象の化石が発見されたことによるらしい。

道の駅併設の無料のオートキャンプ場。
Hokkaido0719_16

この日、広いキャンプ場に泊まったのは5~6台だけ。夜9時過ぎにナウマン温泉に入り、涼しかったこともあり北海道最後の夜は朝までグッスリ。

 

| | Comments (0) | TrackBack (0)

2017.08.03

北海道くるま旅2017 その5

4日目も今にも降り出しそうなどんよりの曇り空。

対岸の温泉街で8時半から遊覧船がでるとのことで、早々に撤収。
1番の遊覧船に乗ったのは、私たち夫婦と東北訛りの4人のオジサンとオバサンだけ。

スタッフの方が多かった。
Hokkaido0718_001

私たちだけが中島上陸。次の遊覧船まで30分ほど散策。開園準備中のオジサンが生憎の天気でと気の毒がる。さっきまでそこに鹿もいたんだけどねえと。

中島から雲のかかった有珠山と昭和新山(左)
Hokkaido0718_003

帰りの遊覧船は混雑で外国語が飛びかっていた。
Hokkaido0718_005

洞爺湖を後に近くの有珠山ロープウェーへ。
昭和新山は思ったよりこじんまり。しかし至る所から噴煙があがっていて、いかにも火山の荒々しさが。この山が個人所有だったとのことにビックリ。

有珠山ロープウェーからの昭和新山。
Hokkaido0718_007

山頂駅は霧の中で何も見えず。
Hokkaido0718_008

楽しみにしていた有珠山は最後まで雲の中。有珠山のカルデラ見たかったなあ。

海岸線に戻り、国道37号線を南下。室蘭に入ると、白い煙をモクモクと吐く大きな煙突や工場群が目立つ。東日本最大の吊り橋という立派な白鳥大橋で室蘭港を渡り、道の駅みたら室蘭(白鳥大橋記念館)へ。
ヨメさんが室蘭はボルトやナットで作った鉄の人形ボルタが有名で欲しいとのことで購入。野球やサッカー関係は人気があるらしく売り切れていた。店員さんに名前のみたらって何ですか?と聞くも分からず。

我が家が買ったボルタ。タイトルは「はい、チーズのボルタ」だそーな。
Hokkaido07180th_000

道の駅のデッキから。さすが鉄の街。対岸は煙突だらけ。
Hokkaido0718_009_2

道の駅で購入した弁当。うまさ噴火級?普通でした。
Hokkaido0718_010

名前に惹かれて室蘭の市街を抜けて地球岬へ。

地球岬も霧の中。
Hokkaido0718_013

さらに国道36号線で海岸線を走る。登別を過ぎた白老町虎杖浜で日帰りのアロヨ温泉(420円)を見つけ、目の前の海を見ながらひとっ風呂。ここもクーラーなしで、しかも床暖房が入っていた!

飯も食ったし、風呂も入った。後は今夜の宿泊地を探しながら苫小牧を過ぎ、国道235号線で日高方面へ。途中の道の駅むかわ四季の館(@むかわ町)は温泉施設も併設の大きな道の駅で、駐車場は大混雑だった。キャンピンカー専用の駐車区画もあり迷ったが、あまりの広さと混雑でパス。
道の駅を出る時、キャンピングカー専用駐車場に所沢ナンバーのNV200発見。やはり同じように回っているようだ。

道の駅むかわ四季の館。人気の道の駅のようだ。
Hokkaido0718_014

さらに国道235号線を南下。日高町を過ぎ新冠町へ。サラブレッドの一大生産地。牧場には牛ではなくサブレッドが。
やがてサラブレッド銀座駐車場というところに到着。新冠の町が見える高台で、サラブレッド銀座というだけあって周りは牧場だらけ。

サラブレッド銀座駐車場。
Hokkaido0718_015

いたるところにサラブレッドが!
Hokkaido0718_016

駐車場に着いた時、1台の車が停まっていた。ボンゴトラックの荷台にプレハブの小さな家を載せた不思議なキャンピングカー。近づいて見ていたらワタシと同年輩のオジサンがやってきた。
失礼ながら手作りですか?と聞くと、今は販売してないが昔仙台のディーラーが販売していた車だという。失礼しました!
馬が好きで岩手から来たとのこと。ここに車をおいて往復10キロぐらい歩いた。牧場しかなかったとオジサン。楽しそうでした。

新冠の町に行くと、町中に道の駅サラブレッドロード新冠(@新冠町)があった。目の前にセイコーマートとセブンイレブン。広い駐車場は混雑していない。便利で静かそうなので今夜の宿泊地に決定。
隣にはレコード館といのがあって展望タワーもある。中に入ると係りのお兄さんが今日は休館日なんですと申訳なさそうにいう。97万枚ものレコードを収集しているとのことで是非見たかったのだが。

道の駅サラブレッドロード新冠。ハイセイコーの歌碑があった。
Hokkaido0718_017

 

| | Comments (0) | TrackBack (0)

2017.08.01

北海道くるま旅2017 その4

北海道上陸3日目の朝。

恵山の横から朝日が顔を出した。
Hokkaido0718_00

この日もコンビニおにぎりで朝食を済ませ、8時前に道の駅を出発。国道278号線(恵山国道)を走った。

最初の道の駅縄文ロマン南かやべ(@函館市) 道の駅というより博物館。
Hokkaido0718_01

さらに278号線を走ると間もなく道の駅しかべ間歇泉公園に着いた。至る所から湯煙が。
Hokkaido0718_02

約15分間隔の間歇泉があった。足湯に浸かりながら見られる。
Hokkaido0718_03

ところでこの道の駅で出会いがあった。我が家の車の横に停まったのが、我が家と同じニッサンのNV200。あれっと思って後ろを覗くと、所沢ナンバーで我が家と同じキャンピングカー・ディーラーのステッカーが! 降りてきた中年男性に尋ねると、やはり同じディーラーだった。ただ同じ車種でもキャンピングカー仕様が異なるタイプ。数日前に北海道に来て、8月末まで反時計回りに北海道旅行中とのこと。お互いビックリ。いい旅をと分かれた。

今回の旅で見たかった山のひとつ駒ヶ岳。残念ながら山頂に雲がかかってる。
Hokkaido0718_04

大沼国定公園。ここも外国の方だらけ。
Hokkaido0718_05

大沼越しの駒ヶ岳。ビューポイントの案内あり。
Hokkaido0718_06

1時間ほど遊歩道をブラブラし汗をかく。休憩所で食べたカキ氷の美味かったこと。
大沼を後にし、駒ケ岳を回り込むようにまた海岸線へ。

JR函館本線の森駅。
Hokkaido0718_07

森駅といえば、京王デパートの駅弁大会でいつも1位のいかめし(650円)。
Hokkaido0718_08

道の駅YOU・遊 もり。ここでいかめしをペロリ。美味い!
Hokkaido0718_09

森ICから道央自動車道に乗り長万部まで。

長万部駅といえば、かにめし。
駅売りはなく近くの製造元へ。レストランの椅子と窓が列車風だった。
Hokkaido0718_10

駅弁かにめし(1000円)。晩めし用。
Hokkaido0718_11

札幌生まれのヨメさんは、父親が出張のお土産にこのかにめしをよく買ってきていたらしい。久しぶりの思い出のかにめしは昔のままで美味しかったとのこと。

長万部から国道37号線を走り、洞爺湖を目指す。

洞爺湖いこいの家(370円)。洞爺湖を望む高台にある日帰り温泉。ここもクーラーなし!
Hokkaido0718_12

洞爺湖畔。着いた時はモーターボートや水遊びの人がいっぱいいた。
Hokkaido0718_13

洞爺湖曙公園のキャンプ場。デイキャンプの人たちが帰ると、急に寂しくなった。
Hokkaido0718_14

広いキャンプ場なのに遠くにテントが2張りと近くにバイク旅の青年がひとりだけ。
ノンビリしていると管理人の方が料金を徴収に来た。キャンピングカーは1200円とのこと。キャンプ場のトイレは全て汲み取り式だがいいかと念を押された。水洗式はちょっと離れた駐車場にあるとのこと。また夜対岸の温泉街で花火があがると教えて貰った。

対岸の温泉街の花火。毎夜打ち上げるとのこと。花火を見る船も出るようだ。
Hokkaido0718_15

明るいうちにキャンプ場内のトイレに行ったのだが、さすがに臭かった。(笑い) それでヨメさんと寝る前に駐車場の水洗式のトイレまで歩く。すると駐車場に昼間会った所沢ナンバーが!もう就寝中のようで声はかけなかったが、同じようなコースを辿ったのかな。

| | Comments (0) | TrackBack (0)

« July 2017 | Main | September 2017 »