デザイン良いサイト
デザインがいいなと思ったところを箇条書き
instagramが運営しているサービス. PRESSっていうところ
シンプルで良い
pressblog.me
たまたまインスタでフォローしてる人のサイト
私より年下ですごいなぁ
nemuiasa.work
授業の一環で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選択（ボーンが埋もれないように）
