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
実際高校生よりも幼稚園ぐらいの子供に人気で作ってよかったってすごく思った
展示してみるとマイクが一個しかなくて子供が取り合いになってたから二個にしたほうがよかったかも、他にも動きがが重くてアニメーションなくてもよかったかな
今回気づけたこと
ものを作る上でのストーリー性(目的)の重要性
展示することの大切さ(予想外のお客さんの意見)
幼稚園児や保育園児向けのアプリケーションがなかなかない
結果は優秀賞
でももっと改善できるような
sierraでopencv3が入らない??
sierraにあげてからopencv3が入らなくなってあれれしてました
☁ ~ brew link opencv3 --force Error: No such keg: /usr/local/Cellar/opencv3 ☁ ~ brew link opencv3 --force Error: No such keg: /usr/local/Cellar/opencv3 ☁ ~ brew unlink opencv3 --force Error: No such keg: /usr/local/Cellar/opencv3
osが10.12以降からpuicktime?が使えないらしく10.11sdkをインストールする必要があるらしいのでそれをメモ_φ(・_・
ここのsdkのバージョンを10.11に変えればいいので以下のサイトから10.11をインストールします
Release MacOSX10.11.sdk · phracker/MacOSX-SDKs · GitHub
ここからsdkインストールして以下のディレクトリに移動して、sdkの中身を書き換えます
ちょっと怖いから10.12のやつはコピーしておきましょう
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.12.sdk
こんな感じかな、MacOSXsdkの中身をかきかえる
☁ ~ brew install opencv3 ☁ ~ brew link opencv3 --force Linking /usr/local/Cellar/opencv3/3.1.0_3... 56 symlinks created
できた
自分はxcodeで実行したいプログラムがquicktermを使うやつだったからエラーが出たんだけど、一応ここも10.11に変更しておく
初めてのHTML
==2019/5/22========= 以下の記事はものすごく雑で、いくつかプログラムに誤りもあるのでいつかもうちょっと丁寧に書き直したい
web制作でのメモ(ものすごい基礎)
HTMLとは
HTMLは、ページの要素や構造を指定するための言語
ホームページでいう文字みたいな
CSSとは
CSSはHTMLで作った要素を装飾するスタイルを指定する言語
ホームページのデザインは基本的にCSSでかける
HTMLにデザイン書き込んでもいいけど、文字とデザイン別々でやった方が整理しやすい
とりあえず先輩に教えてもらったHPを作ってみる
見た目はこんな感じ
大きさはこれくらい
まずはじめにhtmlの骨組み
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf8"> <meta name="description" content="sample"> <link rel="stylesheet" type="text/css" href="sample.css"> <title>sample html</title> </head> <body> </body> </html>
html lang="ja"
<html>~</html>の直下には<head>と <body>がそれぞれ一つづつ必要でlang属性で言語を指定することができ、日本語ならja、英語ならen
<head>~</head>の間には、文書のタイトル等のヘッダ情報を記述
<body>~<body>には、実際にブラウザに表示される文書の本体を記述
link rel="stylesheet" type="text/css" href="sample.css"
rel="" stylesheet
type="" text/css , CSSのMIMEタイプを指定
href="" URI , 読み込むスタイルシートファイルを指定
ここでheader,side,main,footerをbodyの中にかいていく
sample.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf8"> <meta name="description" content="sample"> <link rel="stylesheet" type="text/css" href="ss.css"> <title>sample html</title> </head> <body> <div class="wrap"> <div class="header"> <font size="5" color="#ffffff">heder</font> </div> <div class="side"> <font size="5" color="#ffffff">side</font> </div> <div class="main"> <font size="5" color="#ffffff">main</font> </div> <div class="footter"> <font size="5" color="#ffffff">footter</font> </div> </div> </body> </html>
同じくcssも
sample.css
.wrap{ width: 960px; /*横幅定義*/ margin: 0 auto; /*カラムを中央に寄せる*/ } .header { height: 200px; width: 960px; background-color:#ff0000 } .side { height: 300px; width: 320px; float: left; background-color:#00ff00 } .main { height: 400px; width: 640px; float: left; background-color:#0000ff } .footter { height: 200px; width: 960px; clear: both; background-color:#000000 }
float: left;でsideとmainを横並びにすることができる、この時clear: both;も忘れずに
.wrapで幅を定義することでカラム落ちを防ぐことができる
こんな感じのHPになる
次にheaderのところにタイトルが来るので文字の中央寄せ下にずらし、heder,side,main,footterの区別をするべく空白と線を引いていく
sample.css
.wrap{ width: 960px; margin: 0 auto; } .header { height: 70px; width: 960px; text-align: center; /*文字を中央に移動する*/ margin-bottom: 50px; /*空白*/ border-bottom: solid 10px #dddddd; /*hederの下に線*/ background-color:#ff0000 } .side { height: 300px; width: 320px; float: left; margin: 0px 0px 0px 30px; background-color:#00ff00 } .main { height: 400px; width: 540px; float: left; margin: 0px 30px 30px 0px; border-left: solid 10px #dddddd; /*左側に縦線*/ background-color:#0000ff } .footter { height: 200px; width: 960px; clear: both; border-top: solid 10px #dddddd; /*上のに線*/ background-color:#000000 }
幾つか幅や高さの値も変えつつ、こんな感じ
次にsideとmainの内容とかいろいろ付け加えてみよう
今更ながらhtmlのところにフォントとかの設定してるからcssにまとめると(雑)