授業の一環でHPを作ってみた
他学部の専門の授業でホームページ作成があったのでやってみた
以前先輩にhtmlとcssを教えてもらったおかげか結構自分が思ってたよりもスラスラとできた。
ホームページを作っている最中少ない情報量でも意外といけるもんだなと思ったが、あとから教えた人が上手かっただけなのではないかと思いちょっと調子に乗った自分が恥ずかしかった。
今回はこういうデザインにするんだ!!と決めずに進めたため、作っては消し、作っては消しの繰り返しで完成までに時間がかかった
次からは目標をきちんと決めようと思う
いやでも楽しかった〜
www.geocities.jp
普通に今度は広告の出ないやつで自分のブログを開設してもいい気がしてきた
このホームページを作る際に何を書こうかと色々候補を出して見たら、意外と発信したいことが多くて自分は多趣味ではないかと思った
以下はちょっと参考にしたもの
素敵サイト達
mosne.it
fukushimanaoki.com
saruwakakun.com
www.manicyouth.jp
買った割にさらっと読んで終わった本
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/10/27
- メディア: 単行本
- この商品を含むブログ (1件) を見る
今更ながらiTerm2
今更ながらiTermでpoewerlineを使おうと思う
oh-my-zshを使ってたけど、なんとなく嫌だったので変える
インストールの仕方
pip install --user powerline-status==2.4
フォントのインストール(これしないと文字化けがおこる)
# clone git clone https://github.com/powerline/fonts.git # install cd fonts ./install.sh "Source Code Powerline Regular"
Fontconfig warning: line 146: blank doesn't take any effect anymore. please remove it from your fonts.conf
とワーニング出たので下記のサイト参考にしたら消えた
http://qiita.com/y-temp4/items/f4841be65f9f4d34e08a
iTerm2のpreferencesのフォントを変更したら文字化けがなおった(下記の参考サイト参照)
またパスを通すため、自分のpowerline.zshがどこにあるか確認する
find ~/ -name "powerline.zsh"
私の場合は.vim/bundle/powerline/powerline/bindings/zsh/powerline.zshにあったので以下を.zshrcに追加
# powerline export PATH=$PATH:~/Library/Python/2.7/bin powerline-daemon -q . ~/.vim/bundle/powerline/powerline/bindings/zsh/powerline.zsh
あと、lsするとなぜが味気のない画面になったので、色をつける
.bash_profileに
.bash_profileにかくと最初に読み込まれないので新しくウィンドウを開くと反映されない
.zshrcに書き込むと良い
alias ls='ls -G' export LSCOLORS=gxfxcxdxbxegedabagacad
を追加
完成
参考にしたサイト
processingで渦巻き
カラフルな渦巻きを作りたくでどうにかできたけど、変数がこんなに多く必要なのかと疑問
他にもっといいやり方があるのかな
だめだったやつ
millis();を使って処理をした
float r1,r2,r3 = 0; float a1,a2,a3 = 0; float x1,x2,x3; float y1,y2,y3; void setup(){ size(300,300); noStroke(); background(255, 255, 255); frameRate(60); colorMode(RGB, 255); } void draw(){ translate(width/2, height/2); //座標原点を画面の中央へ移動 int m = millis(); m = m % (9*900); x1 = r1 * cos(radians(a1)); y1 = r1 * sin(radians(a1)); x2 = r2 * cos(radians(a2)); y2 = r2 * sin(radians(a2)); x3 = r3 * cos(radians(a3)); y3 = r3 * sin(radians(a3)); if (m > 0) { fill(252,215,220); //ピンク a1 += 1; r1 += 0.1; ellipse(x1, y1, 10, 10); } if (m > 3*900) { fill(239,226,189); //ベージュ a2 += 1; r2 += 0.1; ellipse(x2, y2, 10, 10); } if (m > 6*900) { fill(138,189,178); //緑 a3 += 1; r3 += 0.1; ellipse(x3, y3, 10, 10); } if(mousePressed) { println(m); } }
どうにかイメージ通りには動いたやつ
timerを使い時間を区切ってやった
float r1,r2,r3 = 0; float a1,a2,a3 = 0; float x1,x2,x3; float y1,y2,y3; int timer; void setup(){ size(300,300); noStroke(); background(255, 255, 255); frameRate(30); colorMode(RGB, 255); } void draw(){ translate(width/2, height/2); x1 = r1 * cos(radians(a1)); y1 = r1 * sin(radians(a1)); x2 = r2 * cos(radians(a2)); y2 = r2 * sin(radians(a2)); x3 = r3 * cos(radians(a3)); y3 = r3 * sin(radians(a3)); if (timer > 0) { fill(252,215,220); //ピンク a1 += 1; r1 += 0.1; ellipse(x1, y1, 10, 10); } if (timer > 60) { fill(239,226,189); //ベージュ a2 += 1; r2 += 0.1; ellipse(x2, y2, 10, 10); } if (timer > 180) { fill(138,189,178); //緑 a3 += 1; r3 += 0.1; ellipse(x3, y3, 10, 10); } timer++; } }
Blenderまとめ3
水族館を作った時のメモ
砂の地面を作る場合
参考にしたサイト
Blenderで凸凹の地形を簡単に作る | deskyg.com DEsign-SKetch
edit modeでw(subdivide選択)で細分化できる
ModifierでDisplaceを選択し、Textureパネルで「sand」を選択しCloud項目のSizeを変更すれば以下のようになる
ModifierでSubSurfとか加えたり、値を変えればもうちょっと滑らかになるかも
テクスチャもつけてみよう
Unwrapして
片方をUV/Image Editorにする
下のテクスチャを選択しobject modeに戻すと下のような感じになる
砂っぽいかも....!
どうしても魚のヒレがくっついて、表示されなかった
これを
三角形にするといいらしい、裏も同様
それっぽい海底の作り方
海底の設定
水平色を白くしたら後ろではなく、上書きされる感じで白がたされた
Enviroment Lightingを追加しないと暗くなる
Mistで遠くに霧が掛かった感じ
あり
なし
以下Blender公式サイトより
- Intensity
霧の強度の最小値
- Start
霧が現れ始める距離
- Depth
Startの距離から霧が完全に現れるまでの距離。カメラからStart+Depthの距離よりも遠くにあるオブジェクトは完全に見えなくなる
- Height
よりリアルにするために、高さに応じて霧を弱めます。数値を0よりも大きくすると、Z=0の高さを中心とした範囲で霧の強度が最高(下方)から0(上方)まで変化
復習程度に作って見た、とりあえずworldをいじればいい感じ
それっぽーーい
けど水族館で作った背景と今回復習で作ったのだと海の画像が少しリアリティがない
多分どこかで画像を貼ってる気がするので調べたところあった
Textureのworldのところに画像を貼ると背景に反映された
すっごい、微妙
なくてもいいのかな
Blenderまとめ2
つづき
色ぬり
1. 切り離したい辺を選択し、ctrl + E でmark seamを選択
2. 全選択でUnwrap
3. 表示をDefoultからUV Editingに変換し
4. SolidからTextureにかえて見やすいようにする
5. MaskからPaintモードにして色を塗ったり、テクスチャを貼ったりする
save imageも忘れずに
左はテクスチャ貼ったのと、色を塗ったやつ
UV削除
テクスチャがうまくいかない時根本的に削除するといいかも
アニメーションでのウェイト
1. オブジェクトを選択しながらShiftでボーン選択しctrl + P(with automatic weightを選択)
2. object modeでボーン選択
3. posemodeにし、ウェイトをつけたいボーンを選択
4. オブジェクトを選択
5. Weight paintを選択
6. こんな感じ
アニメーション
1. 設定
2. アニメーションのメモリを0にして、骨を全選択しLocRot
3. 好きなように動きをつける
忘れそうなやつ: X-Axis選択(ボーンが埋もれないように)
Blenderまとめ1
やろうやろうと言ってやってなかったBlender操作まとめ
すっっっごく長くなるので分割していこうと思う
Blednerを学ぶにおいて少し参考にしたサイト
日本VTR実験室 初心者のための!作って学ぶBlenderの基礎:①基本操作とBlender紹介-日本VTR実験室-映像会社のスマホアプリ開発部隊
Blenderで0からモデリングを学べるWebサイ -Blenderで0からモデリン- 画像編集・動画編集・音楽編集 | 教えて!goo
新しい物体追加
shift + A
物体を傾ける
R X (角度)
面分割
ctrl R = マウスグリグリで分割したい向きにカーソル持ってきてenter
削除(edit mode)
左クリック(トラックパッドで二本指)で頂点選択、Xで削除
画面移動
shift押しながら右へ左へ
全ての原点が0,0にいく
ctrl + A + location
物体が中心に移動(この場合矢印の座標はそのまま)
alt + g
A = 全選択
x,y,z = 方向固定
C = 広範囲選択
S = しぼめたり、広げたり
- s x 2 enter(x軸に2倍拡張)
- s z 1. 3 enter
G = 伸びる
E = 伸びる
F = 面貼り
頂点選択でF
R = 物体をくるくる回転できる
B = 矩形選択
K = 結びたい複数頂点を選択
シームの解除(赤いやつ)
ctl + e で clear seam
一直線を選択
alt押しながらループ選択
物体表示/非表示
H / alt + H
複数のオブジェクトを統合
ctrl + J
面が裏表逆の場合
ctrl + N
物体コピー
shift + d
サイドのバー表示
T(左)とN(右)
かぶってる点を削除
全選択でwでremove doubles
ループ辺とループ辺を繋ぐ新たな面を作成
wでbridge edge loopsを選択
切り抜き
面選択してshift + Dしたら選択した部分を切り抜ける
layer
物体を選択しmで置きたいところをクリック
shiftを押しながらレイヤーを選択するとまとめて見れる
物体の向き(オリジナル水族館の時)
1
3
7
物体の切り抜き
切り抜きたい部分を選択し
p(seletctionを選択)
できた
注意:clippingしたままだとくっついたままなので中注意
IT津梁まつり
沖縄県主催のIT津梁まつりに琉球大学情報工学科AR班として出展
内容は音声を入力として操作するアプリケーション及びゲームとプロジェクションマッピングによるピアノ練習ツールの展示
私は水族館を担当し、主にBlenderでクマノミやハコフグ、背景のサンゴやわかめ、岩を作成
あとはアニメーションとか、結構Blenderが面白い
一から全てみんなで作ったから大変だったけどその分こだわれたからよかったなと
以下の画像がポスターでうちのアプリケーション?を紹介するときに使用した画像
実際こんな風に綺麗には表示することがでいなかったけど
https://www.youtube.com/channel/UCck2XV7BUZioL9ZgNLWMlzw
実際高校生よりも幼稚園ぐらいの子供に人気で作ってよかったってすごく思った
展示してみるとマイクが一個しかなくて子供が取り合いになってたから二個にしたほうがよかったかも、他にも動きがが重くてアニメーションなくてもよかったかな
今回気づけたこと
ものを作る上でのストーリー性(目的)の重要性
展示することの大切さ(予想外のお客さんの意見)
幼稚園児や保育園児向けのアプリケーションがなかなかない
結果は優秀賞
でももっと改善できるような