アトリエ・エクレア

2DCG&3DCG, プログラミング, 日記などを掲載してます。

ちょっとクラタスで戦ってくるわ・・・

クラタス スターターキット

あの水道橋重工のクラタスのスターターキット!!


気になるお値段ですが、
¥120,000,000 とたいへんお買い得!!
(*´∀`*)1点在庫ありですよ~♪


隔週刊 ボカロPになりたい! 19号

Rana_fx_4.jpg

隔週刊 ボカロPになりたい! 19号

19号を開始する(*'ω'*)

隔週刊 ボカロPになりたい! 19号
これが19号。

なんか、記事内で紹介されてるクレモンティーヌさんっていうひと、
小野リサさんと歌声そっくりだね(´・ω・`)びっくり。

<1> VOCALOID3 Editor

ボサノバのコードワーク。
あまり得るものはなかった。


<2> SSW Lite7 for Rana

ボサノバでのギターバッキングの定番 "バチーダ"
ポイント: コードのルートと5度を弾く。小節頭はルートが基本。

<3> MMD

VocaloP_vol19_006.JPG
rana_accessory_torsoAndHook がもらえた。
ギターフック と トルソー。

<適用方法>
stage_ranaroom.pmx

accessory_torsoAndHook.pmx

Rana専用GUITAR・ケーブル無.pmx

Rana専用ギターをギターフックに掛ける.vmd



AviUtl (エーブイアイユーティル)

  • インストール
  • 歌詞のテロップのつけ方
  • エンドロールのつけ方

VocaloP_vol19_007.jpg
メインウィンドウ と、拡張編集ウィンドウ(タイムラインウィンドウ) がある。

やっぱり日本人が作ったソフトは使いやすい。
ある程度、直感的に使える。
海外のソフトだと、なかなかこうはいかない。


次回も、楽しみにゃんこ。
٩( 'ω' )و



Rana_fx_5.jpg





MikuMikuDance キャラクターモデルメイキング講座 Pさんが教える3Dモデルの作り方

MikuMikuDance キャラクターモデルメイキング講座
Pさんが教える3Dモデルの作り方

発売中(2015/5/14)

mikumikudance_book001.JPG

mikumikudance_book002.jpg

とりあえず買っといた。 (´・ω・`)時間があるときに読むことにする。
これでまた、いろいろ遊べそうだ(๑´ڡ`๑)





隔週刊 ボカロPになりたい! 19号 が届く

隔週刊 ボカロPになりたい! 19号 が届く

VocaloP_vol19_001.jpg
定期購読の19号が届いた。

2015/5/26 発売のはずだけど、
2015/5/23 に届いた。

3日前でのご到着(´・ω・`)


※11号から定期購読開始

  • 11号 2015/02/03 発売 → 2015/01/31 着。3日早い
  • 12号 2015/02/17 発売 → 2015/02/14 着。3日早い
  • 13号 2015/03/03 発売 → 2015/02/28 着。3日早い
  • 14号 2015/03/17 発売 → 2015/03/14 着。3日早い
  • 15号 2015/03/31 発売 → 2015/03/30 着。1日早い
  • 16号 2015/04/14 発売 → 2015/04/11 着。3日早い
  • 17号 2015/04/28 発売 → 2015/04/25 着。3日早い
  • 18号 2015/05/12 発売 → 2015/05/11 着。1日早い
  • 19号 2015/05/26 発売 → 2015/05/23 着。3日早い

VocaloP_vol19_002.JPG
ヽ(゜Д゜;)ノあ、開かねぇぇぇぇぇぇwwwwwwwwwwwwwww

Σ(・ω・ノ)ノΣ(・ω・ノ)ノΣ(・ω・ノ)ノ ついに口糊が強力すぎるという次元を超越した Σ(・ω・ノ)ノΣ(・ω・ノ)ノΣ(・ω・ノ)ノ

VocaloP_vol19_003.jpg
いままでも強力だったけど、今回はもはや開けられないレベルです。
結局、糊じゃないところから強引に開けました。
・゜・(PД`q。)・゜・



VocaloP_vol19_004.JPG
19号。
梅雨を意識したような表紙ですな⊂(´・ω・`)⊃


VocaloP_vol19_005.JPG
今号の課題は、
「音楽のアレンジをDTMソフトを使って解析しよう! ボサノバに挑戦!」
・・・だそうだ ('ω')

٩( 'ω' )و Let's go!






Canvas

Canvas

  • Mozilla Developer Network   → リンク
  • Mozilla Developer Network (DOMリファレンス)   → リンク
  • JavaScriptリファレンス   → リンク

★ HTMLCanvasElementオブジェクト

HTMLElementオブジェクトのプロパティとメソッドを継承している。

HTML

<canvas id="canvas" width="450" height="300"></canvas>

JavaScript

var canvas = document.getElementById('canvas');  // HTMLCanvasElementオブジェクト取得
// または、var canvas = document.querySelector("#canvas"); ※但し、getElementById の方が速い

// HTMLCanvasElementオブジェクトのプロパティ
console.log(canvas.width);    // 450
console.log(canvas.height);   // 300

// HTMLCanvasElementオブジェクトのメソッド
var context = canvas.getContext('2d');   // CanvasRenderingContext2Dオブジェクト取得

★ コンテキストの取得

HTMLCanvasElement.getContext() で、canvasにおける描画コンテキストを取得できる。

var context;

window.addEventListener('load', initMyCanvas, false);  // EventTarget.addEventListener

function initMyCanvas(){
  var canvas = document.getElementById('canvas');      // HTMLCanvasElementオブジェクト取得
  context = canvas.getContext('2d');                   // CanvasRenderingContext2Dオブジェクト取得
  
  // または、context = document.getElementById('canvas').getContext('2d');
}

★ canvasの状態の、保存・復元

var context = document.getElementById('canvas').getContext('2d');

// 保存:
// スタックに現在の状態をpushすることで、キャンバスの全ての状態を保存する。
// CanvasRenderingContext2D.save()
context.save();     // この時点でのcanvas状態を保存

context.fillStyle = 'blue';
context.fillRect(20, 20, 200, 300);

// 復元:
// 描画状態のスタックのトップエントリをpopすることで、最新の保存されたcanvas状態を復元する。
// 保存された状態が無い場合、何もしない。
// CanvasRenderingContext2D.restore()
context.restore();  // 保存してあるcanvas状態を復元

★ 平行移動

CanvasRenderingContext2D.translate(x, y) ※x:水平方向, y:垂直方向 の移動距離
キャンバスの原点を、水平・垂直に平行移動する

var context = document.getElementById('canvas').getContext('2d');

// 水平方向に70px, 垂直方向に50px 平行移動する
context.translate(70, 50);
context.fillRect(0, 0, 200, 100);  // 最終的に、x:70, y:50, w:200, h:100 の塗り潰し矩形になる

// 変換行列をリセット
// Horizontal scaling, Horizontal skewing, Vertical skewing,
//              Vertical scaling, Horizontal moving, Vertical moving
context.setTransform(1, 0, 0, 1, 0, 0);

★ 拡大・縮小

CanvasRenderingContext2D.scale(x, y) ※x:水平方向, y:垂直方向 のスケーリング係数
キャンバスの単位を、スケーリングする。※デフォルト: キャンバス上の1ユニットは、1ピクセル。
拡大縮小の中心点は、キャンバスの原点。
中心点を変更するには、translate()メソッドを使用する。

var context = document.getElementById('canvas').getContext('2d');
 
// 水平方に2倍, 垂直方向に5倍する
context.scale(2, 5);
context.fillRect(10, 20, 30, 40);   // 最終的に、x:20, y:100, w:60, h:200 の塗り潰し矩形になる
 
// 変換行列をリセット
// Horizontal scaling, Horizontal skewing, Vertical skewing,
//              Vertical scaling, Horizontal moving, Vertical moving
context.setTransform(1, 0, 0, 1, 0, 0);

var context = document.getElementById('canvas').getContext('2d');  
var img = document.getElementById('sampleImage');

// canvasの原点(左上)から、ソース画像の中心位置までの距離
var x = img.width / 2;
var y = img.height / 2;

context.save();
context.translate(x, y);     // 画像の中心に、canvasと原点を移動
context.scale(0.5, 0.5);     // キャンバスの単位を、水平・垂直方向に、それぞれ半分にスケーリング
context.translate(-x, -y);   // スケーリング後の座標で、canvasと原点を移動

// スケーリング後に移動を行ったcanvasの原点位置に、画像を描画
// 画像は結果的に、画像の中心を軸に、縦横それぞれ半分に縮小される
context.drawImage(img, 0, 0);   // ※drawImage()の引数でスケーリングする方法もある
context.restore();

★ 回転

CanvasRenderingContext2D.rotate(angle) ※angle:時計回りの回転角度(ラジアン)
変換行列に回転を加える。
回転の中心点は、キャンバスの原点。
中心点を変更するには、translate()メソッドを使用する。

var context = document.getElementById('canvas').getContext('2d');

// 時計周りに、45°回転させる    ※180°はπラジアン ←→ 1ラジアンは180°/π
context.rotate(45 * Math.PI / 180);  // degree * Math.PI / 180 
context.fillRect(50, 0, 100, 50);

// 変換行列をリセット
// Horizontal scaling, Horizontal skewing, Vertical skewing,
//              Vertical scaling, Horizontal moving, Vertical moving
context.setTransform(1, 0, 0, 1, 0, 0);

★ 画像

CanvasRenderingContext2D.drawImage()

image:HTMLImageElement・HTMLCanvasElement・HTMLVideoElement のいずれかのインスタンス
s:source, d:destination,
x:X座標, y:Y座標, w:幅, h:高さ ※単位はピクセル

  • drawImage(image, dx, dy)                 ※デフォルト値 (sw:イメージ固有の幅, sh:イメージ固有の高さ)
  • drawImage(image, dx, dy, dw, dh)  ※デフォルト値 (sx:0, sy:0, sw:イメージ固有の幅, sh:イメージ固有の高さ)
  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

※HTML文書に、Img要素を置き、CSSで非表示にしておき、JavaScriptで制御する手もある。

var context = document.getElementById('canvas').getContext('2d');

window.onload = myFunc;

function myFunc() {  
  // HTMLImageElement
  var img = new Image(); // Image()コンストラクタ(Image Element constructor)で、HTMLImageElementを作成
  // または、 var img = document.createElement('img');
  
  // イベントハンドラ -------------------------------------------------------------------------------
  // 画像読み込み完了
  img.onload = function (e) {
    // 引数の指定方法は、他にもある
    context.drawImage(img, 0, 0); // image, canvasにおけるX座標(画像の左上), canvasにおけるY座標(画像の左上)
  };
  // または、 img.addEventListener('load', function(e){context.drawImage(img, 0, 0);}, false);
  
  // 画像読み込みエラー
  img.onerror = function (e) {
    window.alert('画像の読み込みエラー');
  };
  // または、 img.addEventListener('error', function(e){window.alert('画像の読み込みエラー');}, false);
  
  // 画像読み込み開始 -----------------------------------------------------------------------------------
  img.src = 'sample.png';
}

★ 矩形で消去 ※透明な黒で塗り潰す。

var context = document.getElementById('canvas').getContext('2d');
var x = 50, y = 0, width = 200, hight = 300;

// 塗り潰された矩形を描画する。
context.fillStyle = 'blue';
context.fillRect(x, y, width, hight);    // 始点のX座標, 始点のY座標, 幅, 高さ

// 矩形で、描画したものを消去。※透明な黒で塗り潰す。
// CanvasRenderingContext2D.clearRect()
context.clearRect(x, y, width, hight);   // 始点のX座標, 始点のY座標, 幅, 高さ

// キャンバス全体を消去する場合
// context.clearRect(0, 0, canvas.width, canvas.height);

★ 矩形 (線のみ)

var context = document.getElementById('canvas').getContext('2d');
var x = 50, y = 0, width = 200, hight = 300;

// 図形の周りの線に使用する色やスタイルを指定する。デフォルトは、#000 (black)
// CanvasRenderingContext2D.strokeStyle
context.strokeStyle = 'black';            // 設定の書き方は、他にもある

// 矩形を描画する。※塗り潰し無しの、線のみ
// CanvasRenderingContext2D.strokeRect()
context.strokeRect(x, y, width, hight);   // 始点のX座標, 始点のY座標, 幅, 高さ

★ 塗り潰し矩形

var context = document.getElementById('canvas').getContext('2d');
var x = 50, y = 0, width = 200, hight = 300;

// 図形の内側に使用する色やスタイルを指定する。デフォルトは、#000 (black)
// CanvasRenderingContext2D.fillStyle
context.fillStyle = 'rgba(255, 150, 200, 0.5)';   // 設定の書き方は、他にもある

// 塗りつぶされた矩形を描画する。
// CanvasRenderingContext2D.fillRect()
context.fillRect(x, y, width, hight);   // 始点のX座標, 始点のY座標, 幅, 高さ

★ 角丸長方形

以下、自作functionであり、一例にすぎない。

var context = document.getElementById('canvas').getContext('2d');

// 左上x座標, 左上y座標, 幅, 高さ, 角丸の半径, 線スタイル, 線の幅, 塗りつぶしするか(Boolean), 塗りつぶしスタイル
function drawRoundedRect(x, y, width, height, radius, myStrokeStyle, myLineWidth, isFill, myFillstyle){
    context.beginPath();
    context.moveTo(x + radius, y);
    context.lineTo(x + width - radius, y);
    context.quadraticCurveTo(x + width, y, x + width, y + radius);
    context.lineTo(x + width, y + height - radius);
    context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    context.lineTo(x + radius, y + height);
    context.quadraticCurveTo(x, y + height, x, y + height - radius);
    context.lineTo(x, y + radius);
    context.quadraticCurveTo(x, y, x + radius, y);
    context.closePath();
     
    // ストローク設定の前に行う ※重なり順が変わるため
    if (isFill){
        context.fillStyle = myFillstyle;
        context.fill();
    }
     
    // ストローク設定
    context.strokeStyle = myStrokeStyle;  // '#ff0000'など
    context.lineWidth = myLineWidth;
    context.stroke();
}

★ マウスクリックの座標

var canvas;                           // キャンバス
var context;                          // コンテキスト
var mouseClickPoint = {x:-1, y:-1};   // マウスクリックの座標

window.addEventListener('load', init, false);

function init(){
  canvas = document.getElementById('canvas');        // キャンバス HTMLCanvasElement
  context = canvas.getContext('2d');                 // コンテキスト CanvasRenderingContext2D
  
  canvas.addEventListener('click', canvasClick, false);
}

function canvasClick(e){   // 変数eには、MouseEventオブジェクトへの参照が代入される 
  // Event.target:  イベントを発生させたオブジェクトへの参照を返す。  ※この例では、HTMLCanvasElementオブジェクトを返す
  // ※MouseEventオブジェクトは、UIEventオブジェクトとEventオブジェクトのプロパティとメソッドを継承する
  
  // Element.getBoundingClientRect():  要素のサイズと、viewportに対する相対位置を持つ、DOMRectオブジェクトを返す
  // HTMLCanvasElementは、(Elementオブジェクトのプロパティとメソッドを継承した)HTMLElementオブジェクトのプロパティとメソッドを継承する
  
  // ※DOMRectオブジェクトは、以下のようなプロパティを持つ
  //   → x(※DOMRectの原点の水平座標), y(※DOMRectの原点の垂直座標), left, top, right, bottom, width, height
  var rect = e.target.getBoundingClientRect();
  
  // MouseEvent.clientX  イベント発生のクライアント領域での、水平座標
  // MouseEvent.clientY  イベント発生のクライアント領域での、垂直座標
  mouseClickPoint.x = e.clientX - rect.left;     // rect.left → rect.x でも可
  mouseClickPoint.y = e.clientY - rect.top;      // rect.top → rect.y でも可

  document.write('<p>マウスクリックの水平座標:' + mouseClickPoint.x + '</p>');
  document.write('<p>マウスクリックの垂直座標:' + mouseClickPoint.y + '</p>');
}

 

mi

mi

ファイルの作成と保存

  • HTML ・・・ 新規作成 → HTML を選択。拡張子 ".html" で保存。
  • CSS ・・・ 新規作成 → 標準 を選択。拡張子 ".css" で保存。
  • JavaScript ・・・ 新規作成 → HTML を選択。拡張子 ".js" で保存。



隔週刊 ボカロPになりたい! 18号

Rana_fx_1.jpg

隔週刊 ボカロPになりたい! 18号

18号を開始する(*'ω'*)

隔週刊 ボカロPになりたい! 18号
これが18号。

11日には届いてたんだけど、
ようやく昨日(16日)始めた。

<1> VOCALOID3 Editor

シンプルな繰り返しでメロディづくり。
今までの復習みたいな感じ。

ミニマル: 音の動きを最小限に抑え、パターン化された 音型を反復させる。


<2> SSW Lite7 for Rana

VocaloP_vol18_005.jpg        
(1) ドラムフィルの追加

(2) シンセのエフェクト加工
SuperSaw
エフェクト: Delay
エフェクト: AutoPan
アカンパニメント(リズムに合わせて多彩な装飾音を施した伴奏)

<3> MMD

VocaloP_vol18_006.JPG

VocaloP_vol18_007.JPG
rana_accessory_stuffedToy がもらえた。
クマとタコのぬいぐるみ。

タコの顔の縦線がとても気になる・・・。
縫い目の演出なのかよくわからないけど、無いほうが良かったなぁ(´・ω・`)
それと、クマの顔こわいんですけど(´-ω-`)



MikuMikuEffect (MME) の続き。

(1) ベース
AutoLuminous   (.x)  ドラッグ&ドロップ
MotionBlur   (.x)  ドラッグ&ドロップ  ※Si:ぼかし強度, Tr:残像長さ

RanaToon   (.fx)  エフェクト割当 → Ranaモデルをダブルクリック → エフェクト選択
↓ セットで使用
ExcellentShadow   (.x)  ドラッグ&ドロップ
↓ セットで使用
PostAlphaEye   (.x)  ドラッグ&ドロップ

(2) キメ
ColorShake   (.x)  ドラッグ&ドロップ
LiveLaser   (.pmx)  ドラッグ&ドロップ

(3) お化粧
WorkingFloorX   (.x)  ドラッグ&ドロップ  ※影が出ない場合、アクセサリ操作パネルのYを0.1以上の値にする。謎。
PostMovie   (.x)  ドラッグ&ドロップ

SoftSmoke   (.x)  SS_Controller_0.pmxドラッグ&ドロップ → SoftSmoke_SP.xドラッグ&ドロップ → 調整
↓ セットで使用
SoftParticleEngine   (.x)  ドラッグ&ドロップ



エフェクトの適用方法がテキストにきちんと書かれていなくてまいったわ。
お手本のファイルをみてねーみたいな感じ。
そういうのこそテキストに纏めておいてくれないと困るんだけどなぁ。

適用方法やら調整パラメータやら全部調べたから、
余計な手間がかかってしまった。

上下のでかい画像は、お手本のものではなく、
モデル読込みからエフェクトまで自分で最初から設定してみたもの。



次回は、AviUtl(エーブイアイユーティル)が登場らしい。
(´・ω・`)ゆーてぃえる、じゃないっぽい。

次回も、楽しみにゃんこ。
٩( 'ω' )و



Rana_fx_2.jpg






隔週刊 ボカロPになりたい! 18号 が届く

隔週刊 ボカロPになりたい! 18号 が届く

VocaloP_vol18_001.jpg  
定期購読の18号が届いた。

2015/5/12 発売のはずだけど、
2015/5/11 に届いた。

1日前でのご到着。
遅くなったの2回目か(´・ω・`)


※11号から定期購読開始

  • 11号 2015/02/03 発売 → 2015/01/31 着。3日早い
  • 12号 2015/02/17 発売 → 2015/02/14 着。3日早い
  • 13号 2015/03/03 発売 → 2015/02/28 着。3日早い
  • 14号 2015/03/17 発売 → 2015/03/14 着。3日早い
  • 15号 2015/03/31 発売 → 2015/03/30 着。1日早い
  • 16号 2015/04/14 発売 → 2015/04/11 着。3日早い
  • 17号 2015/04/28 発売 → 2015/04/25 着。3日早い
  • 18号 2015/05/12 発売 → 2015/05/11 着。1日早い

VocaloP_vol18_002.JPG  
これ絶対、口糊が強力すぎるって。。。

ずっと大丈夫だったはずなのに、前回からやたら強力になってしまった。
・゜・(PД`q。)・゜・



VocaloP_vol18_003.JPG
18号。
いつもは赤い森男師匠(パンダ)が黒っぽい。



VocaloP_vol18_004.JPG
今号の課題は、
「PVにカッコイイエフェクトを追加しよう トランスに挑戦!」
・・・だそうだ ('ω')

٩( 'ω' )و Let's go!






飴ちゃん

飴ちゃん

今日の戦利品(´・ω・`) ※コンビニにて

penpen_001.JPG
戦利品No.001   うなだれペンギン

penpen_002.jpg
(*´ω`*)かわゆす。

penpen_003.JPG
(*´ω`*)食いかけの魚かな。

penpen_004.JPG
(*´ω`*)かわゆす。

penpen_005.JPG
(*´ω`*)いろんな言葉とイラストがある。

penpen_006.JPG
飴もペンギンの形。
ただ、なめてると、どんどん頭のほうがとがってくる・・・。
普通に丸いほうが食べ易いかも(´・ω・`)

以上の実験から、
"ペンギン = かわゆす" の法則が成り立つ!
( ,,`・ ω´・)よし!この公式は学会で発表することにしよう・・・。

( ´,_ゝ`)プッ

noodle_001.JPG
戦利品No.002   SHOYU NOODLE

noodle_002.JPG
これなんか、日清のカップヌードルと味が似てるような・・・。
でもつくってるのはサンヨー食品。(´・ω・`)
サッポロ一番のとこだよね、たぶん。

ほとんど同じような味で、値段もサイズも日清のよりも手頃な感じがするような・・・。
日清さん、もっと安くしてください(´・ω・`)





マイブログへようこそ♪
PLEASANT_DRAGON

2DCG&3DCG,プログラミング,
日記などを掲載中☆

(*´▽`*)コメント大歓迎です☆

最新記事
記事一覧

全ての記事を表示する

カテゴリ
SAI (0)
mi (2)
C (1)
C++ (1)
C# (0)
VBA (0)
月別アーカイブ
最新コメント
RSSリンクの表示
リンク
FC2ブログランキング

FC2Blog Ranking

ピックアップ商品1♪










カレンダー
04 | 2015/05 | 06
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -
ブログ内検索フォーム
プロフィール

エクレア

Author:エクレア


  • 2DCG&3DCGの創作活動をしています。

  • SF系のメカが大好物。

アクセスカウンター
Twitter
ピックアップ商品2♪