LogoMark.png

猪本結衣/情報デザイン研究II

Peep

Java Scriptによるアニメーションの実装


mainV.png










Overview


Introduction

のんびり眺めるだけのサイト
*Peep…覗き見る


現状できること・見れるもの

Background and Purpose

絵を描くのが好きでアニメーションを作る技術も多少あるので、何か活用できないかと考えた。
「ただ眺めるだけのサイト」はあまり見ない気がしたので作成してみたいと思いこのプロジェクトに決定。
訪れた方の暇つぶしになるサイトを作ることが目的。

Concept

Output

Tools

Term

2020.9.16 〜



CurrentStatus



当初の目的通り「眺めるだけ」の「暇つぶしができる」サイトが出来上がったと思う。
時間帯によって空の色が変わる点やそれに伴い部屋の照明を消した時の暗さの変化、テレビとパソコンのみ明るいままなど細かいところにこだわることができた。
またプロジェクトを初めてすぐにはなかった、干渉できる仕組み(部屋の照明のON/OFF等)が個人的には気に入っている。
まだ決定事項ではないが卒業制作で続きを作成することを考えているため、その際は今回したかった、しかし間に合わなかったり技術的に敵わなかった部分をたくさん取り入れていきたい。




Survey


Present Status

現状できること・見れるもの



問題点

Precedent

眺めることを目的にしたサイトを調べたところ、実際に撮影された動画を眺めるというものがほとんどでアニメーションはあまり見受けられなかった。

レイアウトの参考

Technique / Technology

参考にしたサイトにてCreateJSが使われていたため勉強。
行き詰まり相談したところ別の方法を勧められたためそちらも試し、結果次第ではCreateJSがボツになる可能性あり。
結局全く知らないCreateJSよりも多少知識のあるJavaScriptnの方が良いと判断しボツに。
JavaScriptの勉強用に作成した試作品もせっかくなのでいくつかCreateJSの試作たちに追加している。

Project Management


ToDo







worklog




2020.11.25

面談

以下面談で上がった話のメモとその導入方法

2020.11.24

バグの修正

テレビがつかなくなってしまったため修正。

バグの発見

CreateJSの試作たちのキーボード操作のページにバグを発見。
あくまで試作品で、かつ本来したかったキーボード操作に影響はなさそうなので放置。
後日時間を見つけて修正したい。



2020.11.23

夕方の追加

時間によって背景や部屋の明るさが変わるプログラムに夕方を追加。
併せて夕方用の窓の画像を作成。

男の子の種類の追加

スマホをいじっているものとゲームをしているもの・ゲームの画面のgifを作成し、サイトに追加。

バグの修正

画面を縮めると画像が右にはみ出してスクロールできないバグが発生していたため修正。



2020.11.22

リロードボタンの追加

サイトを開くたびにランダムで男の子の動作が変わるように作っていたが、
画像を多く使っていてリロードに少し時間を要してしまっていた。
一度数値をリセットして再度ランダムに男の子を表示させることで擬似的にリロードができるように。

時計を追加

時計用の数字を作成し、画面右下に時計を追加した。



2020.11.21

ランダム関数の実装

ランダム関数を利用し、
リロードするたびに男の子の動作が変わるようプログラムを作成した。
併せてパソコンを見ている時に画面がつくよう調整。



2020.11.20

サイトの軽量化

歩いているgifの正面・背面を不透明度で切り替えていたので、
htmlを書き換えるものに変更。

夜寝るように

24時になると寝ているgifに切り替わるようプログラムを作成。
併せて部屋の電気が消えるようにした。



2020.11.18

部屋の電気の設定

部屋の照明をスイッチを押すことでon/offを切り替えられるように。



2020.11.17

gifを書き出し

動きの確認用でしか書き出していなかったため、
サイトで扱えるよう色を単色でつけ背景を透過したものを作成。
本当はきちんと色をつけたものを使いたいが時間の関係で単色に。
時間ができたら色をつけ再度書き出したいが怪しい。
また様子を見るために試しに全てサイトに設置した。

窓の外の画像を作成

窓の外を作り忘れていたため作成。
こちらも時間に合わせて変わる。

レスポンシブの作成

ウィンドウを最大にすると画像が小さくなってしまったため大きく表示されるように調整。
ぐるぐる回っている男の子もきちんとレスポンシブデザインに合わせて移動するようにできた。
スマホ用のデザインは作成できていない。

背景の修正

部屋の淵が変に目立ってしまっていたので修正。



2020.11.16

パソコンとテレビの作成

テレビとパソコンをクリックしたら画面がつくようgifとプログラムを作成。
イメージはどうぶつの森。



2020.11.15

バグの修正

ウィンドウ幅を変えると背景は合わせて移動するが、
男の子が無視して歩き続けるバグが発生していたため修正。



2020.11.14

時間で動くプログラムの作成

時間に合わせて背景が変わるプログラムを作成。
朝、昼、夜を実装。
夕方を入れてもいいかもしれない。



2020.11.11

面談

以下面談で浮上した修正点

2020.11.8

gifの作成

ベッドで眠っている男の子を作成
作成物(左右反転し忘れた)

サイトのデザイン

左から順番に朝、昼、夜
時計のデザイン案1、2
高画質版
(メモ)男の子の色、作画コストを考えると単色でもいいのかもしれない。
背景が青系統なので赤系の色で色をつけたら目立つ。
時計は2つめの方が個人的に好き。

asa.png
hiru.png
yoru.png
clock1.png
clock2.png
















2020.11.3

gifの作成

パソコンを扱ってる男の子のgifを作成
作成物



2020.11.2

gifの作成

メインビジュアルの絵のgifをまだ作成していなかったので作成。
作成物



2020.11.1

サイトのデザイン

以上3点ができるようにひとまず机の周りをグルグル歩き回るプログラムを作成。
http://takearest.php.xdomain.jp/create/walk2/walk.html



2020.10.27

時計の作成

2020.10.25

アニメーションの作画

以前こちら側に歩いてくるgifは作成したため、あちら側に歩くものを作成。
こちらも色はまだつけていない。
作成物



2020.10.23

JavaScriptの勉強

2020.10.21

中間発表

2020.10.20

歩くモーションの組み込み

先日作成した歩くアニメーションをサイト上で動くよう作成。
キーボードの十字キーで動くが実物は自動で動かすため要勉強。

2020.10.17

歩くモーションの作成

ひとまず線画のみで歩くアニメーションを作成。
後日様子を見ながら色をつけていく予定。
作成物



2020.10.13

bg2.png

背景の描き込み

2020.10.11

chara.png

キャラクターの作成

2020.10.10

bg1.png

背景画像の作成

2020.10.9

参考サイトの収集

2020.10,7

rough.png

面談

2020.10.6

タイトル等の設定

2020.10.3

JavaScriptの勉強

2020.9.29

試作のアップロード・CreateJSの勉強(コマアニメーション)

2020.9.27

作りたいもののイメージ

2020.9.26

CreateJSの勉強(画像の導入・アニメーション)

2020.9.25

CreateJSの勉強(導入〜簡単な動作)

2020.9.23

面談

2020.9.22

資料集め・アイデア出し





PAGES

GUIDE

添付ファイル: filemainV.png 21件 [詳細] fileclock2.png 12件 [詳細] fileclock1.png 9件 [詳細] fileyoru.png 11件 [詳細] filehiru.png 13件 [詳細] fileasa.png 22件 [詳細] filechara.png 30件 [詳細] filebg2.png 34件 [詳細] filebg1.png 19件 [詳細] filerough.png 27件 [詳細]
Last-modified: 2020-12-02 (水) 11:42:24